@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: 'Inter', 'Outfit', ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Tiempos Text", var(--font-source-serif), 'Source Serif 4', serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  
  /* Institutional Type Scale - Hard-Calibrated to Slide 22 (150px target) */
  --type-display: clamp(4.5rem, 12vw, 9.375rem); /* 150px Display */
  --type-h1:      clamp(3rem, 10vw, 6.25rem);      /* 100px Institutional Header */
  --type-h2:      clamp(2.25rem, 6vw, 4.6875rem);  /* 75px Section Header */
  --type-h3:      clamp(1.5rem, 4vw, 3.75rem);     /* 60px Subheader */
  --type-h4:      clamp(1.25rem, 2vw, 2.25rem);    /* 36px Label */
  --type-body-lg: 1.25rem;                         /* 20px - Secondary Body */
  --type-body:    1.0625rem;                       /* 17px - Primary Body */
  --type-caption: 0.8125rem;                       /* 13px - Meta */

  /* Specified Tracking - Slide 22 (-2%) */
  --type-tracking-heading: -0.02em; 
  --type-tracking-display: -0.04em;
  --type-tracking-body:    0.01em;

  /* Institutional Spacing & Construction */
  --border-institutional: 0.5px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;

  /* 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));
  
  /* Greyhaven-specific colors for direct use */
  --color-greyhaven-orange: #D95E2A;
  --color-greyhaven-offblack: #161614;
  --color-greyhaven-offwhite: #F9F9F7;
  --color-greyhaven-grey3: #C4C4BD;
  --color-greyhaven-grey7: #575753;
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground antialiased;
    font-feature-settings: "ss01", "ss02", "cv01", "cv11";
  }
  
  h1, h2, h3, h4 {
    letter-spacing: var(--type-tracking-heading);
    font-weight: 500; /* Tiempos Medium fallback */
  }
}

@layer utilities {
  .institutional-grid {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l25.98 15v30L30 60 4.02 45V15z' fill-rule='evenodd' stroke='%23C4C4BD' stroke-width='0.5' fill='none' opacity='0.1'/%3E%3C/svg%3E");
    background-size: 30px 52px;
  }
}