@import 'tailwindcss';
@import 'tw-animate-css';

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

/* =============================================================================
   GREYHAVEN DESIGN TOKENS
   Based on Greyhaven Brand Guidelines v1.0
   
   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
   ============================================================================= */

:root {
  /* Background & Foreground */
  --background: 240 240 236;           /* Grey 1 #F0F0EC */
  --foreground: 22 22 20;              /* Off-black #161614 */

  /* Card */
  --card: 249 249 247;                 /* Off-white #F9F9F7 - elevated from background */
  --card-foreground: 22 22 20;

  /* Popover */
  --popover: 249 249 247;
  --popover-foreground: 22 22 20;

  /* Primary - Orange accent (used sparingly) */
  --primary: 217 94 42;                /* Orange #D95E2A */
  --primary-foreground: 249 249 247;   /* Off-white */

  /* Secondary */
  --secondary: 240 240 236;            /* Grey 1 #F0F0EC */
  --secondary-foreground: 47 47 44;    /* Grey 8 #2F2F2C */

  /* Muted */
  --muted: 240 240 236;                /* Grey 1 #F0F0EC */
  --muted-foreground: 87 87 83;        /* Grey 7 #575753 */

  /* Accent - Subtle grey for hover states */
  --accent: 221 221 215;               /* Grey 2 #DDDDD7 */
  --accent-foreground: 22 22 20;       /* Off-black */

  /* Destructive */
  --destructive: 180 50 50;            /* Muted red for destructive actions */
  --destructive-foreground: 249 249 247;

  /* Borders & Inputs */
  --border: 196 196 189;               /* Grey 3 #C4C4BD */
  --input: 196 196 189;                /* Grey 3 #C4C4BD */

  /* Focus Ring */
  --ring: 217 94 42;                   /* Orange for focus states */

  /* Charts - Warm neutral palette with orange accent */
  --chart-1: 217 94 42;                /* Orange accent */
  --chart-2: 87 87 83;                 /* Grey 7 */
  --chart-3: 127 127 121;              /* Grey 5 */
  --chart-4: 166 166 159;              /* Grey 4 */
  --chart-5: 47 47 44;                 /* Grey 8 */

  /* Radius - Tightened, no playful rounding */
  --radius: 0.375rem;

  /* Sidebar */
  --sidebar: 240 240 236;
  --sidebar-foreground: 22 22 20;
  --sidebar-primary: 217 94 42;
  --sidebar-primary-foreground: 249 249 247;
  --sidebar-accent: 196 196 189;
  --sidebar-accent-foreground: 22 22 20;
  --sidebar-border: 196 196 189;
  --sidebar-ring: 217 94 42;
}

/* =============================================================================
   DARK THEME
   Guidelines: Negative/reverse usage via off-black and greys
   ============================================================================= */

.dark {
  /* Background & Foreground */
  --background: 22 22 20;              /* Off-black #161614 */
  --foreground: 249 249 247;           /* Off-white #F9F9F7 */

  /* Card */
  --card: 47 47 44;                    /* Grey 8 #2F2F2C */
  --card-foreground: 249 249 247;

  /* Popover */
  --popover: 47 47 44;
  --popover-foreground: 249 249 247;

  /* Primary - Orange accent (same in dark mode) */
  --primary: 217 94 42;                /* Orange #D95E2A */
  --primary-foreground: 249 249 247;

  /* Secondary */
  --secondary: 87 87 83;               /* Grey 7 #575753 */
  --secondary-foreground: 249 249 247;

  /* Muted */
  --muted: 87 87 83;                   /* Grey 7 #575753 */
  --muted-foreground: 196 196 189;     /* Grey 3 #C4C4BD */

  /* Accent - Subtle grey for hover states */
  --accent: 87 87 83;                  /* Grey 7 #575753 */
  --accent-foreground: 249 249 247;

  /* Destructive */
  --destructive: 180 50 50;
  --destructive-foreground: 249 249 247;

  /* Borders & Inputs */
  --border: 87 87 83;                  /* Grey 7 */
  --input: 87 87 83;

  /* Focus Ring */
  --ring: 217 94 42;

  /* Charts */
  --chart-1: 217 94 42;
  --chart-2: 196 196 189;
  --chart-3: 166 166 159;
  --chart-4: 127 127 121;
  --chart-5: 240 240 236;

  /* Sidebar */
  --sidebar: 47 47 44;
  --sidebar-foreground: 249 249 247;
  --sidebar-primary: 217 94 42;
  --sidebar-primary-foreground: 249 249 247;
  --sidebar-accent: 87 87 83;
  --sidebar-accent-foreground: 249 249 247;
  --sidebar-border: 87 87 83;
  --sidebar-ring: 217 94 42;
}

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

@theme inline {
  /* Typography - Using CSS variables from Next.js font loading */
  --font-sans: var(--font-inter), 'Inter', 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 */
  --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-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;
  }
}