/* tokens.css — Tailwind v4 CSS-first @theme Reverse-engineered design system. DARK SCHEME ONLY (app sets color-scheme:dark, .dark on , no light/[data-theme] variant exists). Brand assets (logo, avatars, wallpapers) intentionally excluded — replace with ours. */ @theme { /* ---- Fonts (vendor woff2 locally; see assets-manifest) ---- */ --font-sans: "Geist", "Geist Fallback", ui-sans-serif, system-ui, sans-serif; --font-mono: "Geist Mono", "Geist Mono Fallback", ui-monospace, SFMono-Regular, monospace; --font-inter: "Inter", "Inter Fallback", sans-serif; /* reserved/secondary brand fonts present in token layer */ --font-display: "Familjen Grotesk", sans-serif; --font-body: "Satoshi", system-ui, sans-serif; --font-logo: "Ranade", sans-serif; /* ---- Color: function-grouped ---- */ --color-background: #0a0a0a; --color-foreground: #fafafa; --color-card: #0a0a0a; --color-popover: #0a0a0a; --color-surface-warm: #141414; /* raised tier 1 / warm surface */ --color-surface-warm-muted: #1f1f1f; /* raised tier 2 */ --color-subtle: #141414; --color-hover-bg: #171717; /* generic hover fill */ --color-divider-subtle: #1a1a1a; --color-border: #262626; --color-input: #262626; --color-muted: #262626; --color-secondary: #262626; --color-accent-bg: #262626; /* token named --accent in source */ --color-muted-foreground: #a3a3a3; --color-subtle-foreground: #737373; /* brand accent (coral) + variants */ --color-coral: #f96565; --color-coral-light: #fa7575; --color-coral-dark: #e85555; --color-primary: #fafafa; /* primary button bg (light-on-dark) */ --color-primary-foreground: #171717; --color-ring: #fafafa; --color-focus-ring: #f5f5f5; /* semantic */ --color-destructive: #7f1d1d; --color-destructive-foreground: #fafafa; --color-chart-1: #2662d9; --color-chart-2: #2eb88a; --color-chart-3: #e88c30; --color-chart-4: #af57db; --color-chart-5: #e23670; /* gradient stops (coral tile) */ --color-gradient-coral-top: #fa7575; --color-gradient-coral-bottom: #e85555; /* ---- Type scale (size / line-height) ---- */ --text-xxs: 10px; --text-xxs--line-height: 14px; --text-xs: .75rem; --text-xs--line-height: 1rem; --text-sm: .875rem; --text-sm--line-height: 1.25rem; --text-base: 1rem; --text-base--line-height: 1.5rem; --text-lg: 1.125rem;--text-lg--line-height: 1.75rem; --text-xl: 1.25rem; --text-xl--line-height: 1.75rem; --text-2xl: 1.5rem; --text-2xl--line-height: 2rem; --text-3xl: 1.875rem;--text-3xl--line-height: 2.25rem; --text-4xl: 2.25rem;--text-4xl--line-height: 2.5rem; --text-5xl: 3rem; --text-5xl--line-height: 1; --text-6xl: 3.75rem;--text-6xl--line-height: 1; --text-xxl: 28px; --text-xxl--line-height: 36px; --text-xxxl: 36px; --text-xxxl--line-height: 44px; --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --tracking-tight: -.025em; --tracking-normal: 0em; --tracking-wide: .025em; --tracking-wider: .05em; --tracking-widest: .1em; --leading-tight: 1.25; --leading-snug: 1.375; --leading-relaxed: 1.625; /* ---- Spacing scale (base unit .25rem) ---- */ --spacing: .25rem; /* ---- Radius scale ---- */ --radius: .5rem; --radius-sm: calc(.5rem - 4px); --radius-md: calc(.5rem - 2px); --radius-lg: .5rem; --radius-xl: calc(.5rem + 4px); --radius-2xl: 1rem; --radius-3xl: 1.5rem; --radius-button: 9999px; /* pill buttons + nav items */ --radius-toggle: 8px; /* ---- Elevation / shadows ---- */ --shadow-xs: 0 1px 2px 0 #0000000d; --shadow-sm: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a; --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a; --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a; --shadow-bubble: 0 1px 2px #0006; --shadow-button: 0 1px 2px #0000004d, 0 2px 4px -1px #0000004d; --shadow-card: 0 1px 2px #0006, 0 4px 12px -2px #00000080; --shadow-popover: 0 16px 40px -12px #0009; --shadow-dialog: 0 32px 80px -24px #000000b3; --shadow-edge: -3px 0 14px -4px #0006; /* panel left edge */ --shadow-dock-tile: 0 0 0 1px #ffffff14, inset 0 1px 0 #ffffff2e; --shadow-cta: inset 0 1px 0 #ffffff40, 0 3px 10px -3px #f965658c; /* coral CTA */ --nav-logo-shadow: inset 0 0 0 1px #ffffff26; /* ---- Motion ---- */ --ease-app: cubic-bezier(.32,.72,0,1); /* DOMINANT curve */ --ease-out: cubic-bezier(.16,1,.3,1); /* secondary */ --ease-quick: cubic-bezier(.16,1,.3,1); --ease-in-out: cubic-bezier(.4,0,.2,1); --ease-bounce: cubic-bezier(.5,1.5,.6,1); --duration-fast: .15s; --duration-normal: .25s; --duration-slow: .4s; --default-transition-duration: .25s; --default-transition-timing-function: cubic-bezier(.32,.72,0,1); /* ---- Structural dimensions ---- */ --app-sidebar-width: 176px; /* left rail */ --sessions-col-width: 208px; /* sessions column */ --device-panel-width: 448px; /* Computer slide-out */ --header-height-sm: 56px; /* h-14 */ --header-height-lg: 80px; /* lg:h-20 */ --focus-ring-width: 2px; --focus-ring-offset: 2px; } /* Breakpoints observed: mobile <600px and <=767px (screen). Desktop rail/3-col layout above lg. prefers-reduced-motion: reduce supported. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }