@import 'tailwindcss';
@import 'tw-animate-css';
@import './tokens/tokens-light.css';
@import './tokens/tokens-dark.css';

/* Aspekta — self-hosted sans font (canonical UI typeface) */
@font-face { font-family: 'Aspekta'; font-style: normal; font-weight: 100; font-display: swap; src: url('/fonts/Aspekta-100.woff2') format('woff2'); }
@font-face { font-family: 'Aspekta'; font-style: normal; font-weight: 200; font-display: swap; src: url('/fonts/Aspekta-200.woff2') format('woff2'); }
@font-face { font-family: 'Aspekta'; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/Aspekta-300.woff2') format('woff2'); }
@font-face { font-family: 'Aspekta'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/Aspekta-400.woff2') format('woff2'); }
@font-face { font-family: 'Aspekta'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/Aspekta-500.woff2') format('woff2'); }
@font-face { font-family: 'Aspekta'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/Aspekta-600.woff2') format('woff2'); }
@font-face { font-family: 'Aspekta'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/Aspekta-700.woff2') format('woff2'); }
@font-face { font-family: 'Aspekta'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/Aspekta-800.woff2') format('woff2'); }
@font-face { font-family: 'Aspekta'; font-style: normal; font-weight: 900; font-display: swap; src: url('/fonts/Aspekta-900.woff2') format('woff2'); }

@custom-variant dark (&:is(.dark *));

/* =============================================================================
   GREYHAVEN DESIGN TOKENS

   Token values are auto-generated by Style Dictionary from tokens/*.json
   (W3C DTCG format). DO NOT hand-edit :root or .dark — edit the source
   token files and run `pnpm tokens:build` instead.

   Color Philosophy:
   - Neutral and minimal scheme
   - Off-black, warm grey, and white form the base
   - Single accent (orange) used sparingly for active/important states
   - No gradients, no decorative color
   ============================================================================= */

/* Radius — not color, kept inline */
:root {
  --radius: 0.375rem;
}

/* =============================================================================
   THEME CONFIGURATION
   Typography: Source Serif Pro (primary/serif) + Aspekta (secondary/UI/sans)
   ============================================================================= */

@theme inline {
  /* Typography — Aspekta (self-hosted) is the canonical sans font */
  --font-sans: 'Aspekta', ui-sans-serif, system-ui, sans-serif;
  --font-serif: var(--font-source-serif, 'Source Serif 4'), 'Source Serif Pro', Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Color mappings — maps CSS var RGB triplets to Tailwind utility classes */
  --color-background: rgb(var(--background));
  --color-foreground: rgb(var(--foreground));
  --color-card: rgb(var(--card));
  --color-card-foreground: rgb(var(--card-foreground));
  --color-popover: rgb(var(--popover));
  --color-popover-foreground: rgb(var(--popover-foreground));
  --color-primary: rgb(var(--primary));
  --color-primary-foreground: rgb(var(--primary-foreground));
  --color-secondary: rgb(var(--secondary));
  --color-secondary-foreground: rgb(var(--secondary-foreground));
  --color-muted: rgb(var(--muted));
  --color-muted-foreground: rgb(var(--muted-foreground));
  --color-accent: rgb(var(--accent));
  --color-accent-foreground: rgb(var(--accent-foreground));
  --color-destructive: rgb(var(--destructive));
  --color-destructive-foreground: rgb(var(--destructive-foreground));
  --color-border: rgb(var(--border));
  --color-input: rgb(var(--input));
  --color-ring: rgb(var(--ring));
  --color-chart-1: rgb(var(--chart-1));
  --color-chart-2: rgb(var(--chart-2));
  --color-chart-3: rgb(var(--chart-3));
  --color-chart-4: rgb(var(--chart-4));
  --color-chart-5: rgb(var(--chart-5));
  --radius-sm: calc(var(--radius) - 2px);
  --radius-md: var(--radius);
  --radius-lg: calc(var(--radius) + 2px);
  --radius-xl: calc(var(--radius) + 4px);
  --color-hero-bg: rgb(var(--hero-bg));
  --color-sidebar: rgb(var(--sidebar));
  --color-sidebar-foreground: rgb(var(--sidebar-foreground));
  --color-sidebar-primary: rgb(var(--sidebar-primary));
  --color-sidebar-primary-foreground: rgb(var(--sidebar-primary-foreground));
  --color-sidebar-accent: rgb(var(--sidebar-accent));
  --color-sidebar-accent-foreground: rgb(var(--sidebar-accent-foreground));
  --color-sidebar-border: rgb(var(--sidebar-border));
  --color-sidebar-ring: rgb(var(--sidebar-ring));

  /* Greyhaven-specific colors for direct use */
  --color-greyhaven-orange: #D95E2A;
  --color-greyhaven-offblack: #161614;
  --color-greyhaven-offwhite: #F9F9F7;
  --color-greyhaven-grey1: #F0F0EC;
  --color-greyhaven-grey2: #DDDDD7;
  --color-greyhaven-grey3: #C4C4BD;
  --color-greyhaven-grey4: #A6A69F;
  --color-greyhaven-grey5: #7F7F79;
  --color-greyhaven-grey7: #575753;
  --color-greyhaven-grey8: #2F2F2C;
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}