@import 'tailwindcss';
/* =============================================================================
テーマ（ダーク + オレンジアクセント固定）
============================================================================= */
:root {
--accent-value: #d07850;
/* 背景・カード（Obsidian風） */
--background: #212126;
--background-solid: #212126;
--card: #2a2a2f;
--popover: #2a2a2f;
/* テキスト */
--foreground: #c8c8c8;
--card-foreground: #e5e1d8;
--popover-foreground: #e5e1d8;
/* プライマリ */
--primary: var(--accent-value);
--primary-foreground: #0a0a0a;
/* セカンダリ・ミュート・アクセント */
--secondary: #343438;
--secondary-foreground: #fafafa;
--muted: #343438;
--muted-foreground: #989898;
--accent: #343438;
--accent-foreground: #fafafa;
/* ボーダー・入力 */
--border: #3e3e45;
--input: #46464e;
--ring: var(--accent-value);
/* 機能カラー */
--destructive: #ef4444;
--destructive-foreground: #ffffff;
--success: var(--accent-value);
--warning: #f59e0b;
--warning-foreground: #0a0a0a;
--info: #3b82f6;
--info-foreground: #ffffff;
--danger: #ef4444;
--danger-foreground: #ffffff;
/* その他 */
--radius: 0.5rem;
/* ブランドカラー */
--brand: var(--accent-value);
/* サイドバー */
--sidebar: #26262a;
--sidebar-foreground: #fafafa;
--sidebar-border: #343438;
--sidebar-accent: #343438;
--sidebar-accent-foreground: #fafafa;
}
/* =============================================================================
Tailwind テーマ連携
============================================================================= */
@theme inline {
--font-sans: var(--font-ubuntu), var(--font-noto-sans-jp), system-ui, sans-serif;
--font-mono: var(--font-ubuntu), monospace;
--animate-collapsible-down: collapsible-down 0.2s ease-out;
--animate-collapsible-up: collapsible-up 0.2s ease-out;
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-destructive-foreground: var(--destructive-foreground);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--color-success: var(--success);
--color-warning: var(--warning);
--color-warning-foreground: var(--warning-foreground);
--color-info: var(--info);
--color-info-foreground: var(--info-foreground);
--color-danger: var(--danger);
--color-danger-foreground: var(--danger-foreground);
--color-brand: var(--brand);
--color-sidebar: var(--sidebar);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
}
/* =============================================================================
ベーススタイル
============================================================================= */
@layer base {
* {
@apply border-border outline-ring/50;
}
body {
background-color: var(--background);
color: var(--foreground);
min-height: 100dvh;
}
.neon-glow {
text-shadow: 0 0 10px var(--accent-value), 0 0 20px var(--accent-value), 0 0 30px var(--accent-value);
}
.dot-grid {
background-image: radial-gradient(circle, rgba(255, 255, 255, 0.15) 1px, transparent 1px);
background-size: 24px 24px;
}
.glass-sidebar {
background: rgba(30, 30, 34, 0.7);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--muted-foreground);
}
::-webkit-scrollbar-corner {
background: transparent;
}
* {
scrollbar-width: thin;
scrollbar-color: var(--border) transparent;
}
}
/* =============================================================================
アニメーション
============================================================================= */
@keyframes collapsible-down {
from { height: 0; }
to { height: var(--radix-collapsible-content-height); }
}
@keyframes collapsible-up {
from { height: var(--radix-collapsible-content-height); }
to { height: 0; }
}
@keyframes pulse-border {
0%, 100% {
box-shadow: 0 0 0 0 var(--primary), 0 0 0 0 transparent;
}
50% {
box-shadow: 0 0 0 4px var(--primary), 0 0 20px 4px var(--primary);
}
}
.animate-pulse-border {
animation: pulse-border 1.5s ease-in-out infinite;
}
.lp-dot-grid {
position: relative;
}
.lp-dot-grid::after {
content: '';
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background-image: radial-gradient(circle, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
background-size: 24px 24px;
}
.lp-dot-grid > * {
position: relative;
z-index: 1;
}
