/* 
   ESHA AI — STUDIO PORCELAIN & ELECTRIC COBALT DESIGN TOKENS
   Apple-grade neutral white/obsidian palette paired with Cobalt-Indigo + Ember Spark
    */

@layer reset, tokens, base, components, utilities;

@layer tokens {
  :root {
    color-scheme: light dark;

    &:has(> head > meta[name="color-scheme"][content="dark"]) {
      color-scheme: dark;
    }

    &:has(> head > meta[name="color-scheme"][content="light"]) {
      color-scheme: light;
    }

    /* Tier 1 — Apple Studio Neutrals & Esha Brand Spectrum */
    --raw-bg-light: #FBFBFD;
    --raw-bg-dark: #0A0B0F;
    --raw-surface-light: #FFFFFF;
    --raw-surface-dark: #13161E;
    --raw-tint-light: #F3F5F8;
    --raw-tint-dark: #0F1219;
    --raw-text-light: #111318;
    --raw-text-dark: #F4F6FA;
    --raw-muted-light: #5A6070;
    --raw-muted-dark: #9BA3B4;
    --raw-border-light: #E4E7EC;
    --raw-border-dark: #232836;

    --color-cobalt: #0057E5;
    --color-indigo: #4F46E5;
    --color-ember: #FF6B4A;
    --color-amber: #D98A00;

    /* AA/AAA accessible accent ink tokens */
    --raw-accent-ink-light: #0052CC;
    --raw-accent-ink-dark: #6CA8FF;

    --raw-live-light: #157347;
    --raw-live-dark: #47C18A;
    --raw-build-light: #8A5400;
    --raw-build-dark: #E89D1A;
    --raw-planned-light: #525866;
    --raw-planned-dark: #A5AEBE;

    /* Tier 2 — Semantic Surface & Typography Tokens (Fallback Defaults: Light) */
    --color-bg: var(--raw-bg-light);
    --color-surface: var(--raw-surface-light);
    --color-surface-tint: var(--raw-tint-light);
    --color-text: var(--raw-text-light);
    --color-muted: var(--raw-muted-light);
    --color-border: var(--raw-border-light);
    --color-accent: var(--raw-accent-ink-light);
    --color-accent-fill: #0057E5;
    --color-accent-on-fill: #FFFFFF;
    --color-cta-hover-a: #0046C7;
    --color-cta-hover-b: #3730A3;
    --color-highlight-a: #0052E0;
    --color-highlight-b: #4F46E5;
    --color-status-live: var(--raw-live-light);
    --color-status-build: var(--raw-build-light);
    --color-status-planned: var(--raw-planned-light);
    --color-live-bg: rgba(21, 115, 71, 0.11);
    --color-build-bg: rgba(217, 138, 0, 0.13);
    --color-planned-bg: rgba(82, 88, 102, 0.11);
    --shadow-sm: 0 2px 10px -2px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 18px 42px -16px rgba(15, 23, 42, 0.11),
    0 2px 8px -2px rgba(15, 23, 42, 0.04);

    /* Signature Esha Brand Gradient (used sparingly: emblem, hero phrase, primary CTA hover) */
    --brand-gradient: linear-gradient(135deg, var(--color-cobalt) 0%, var(--color-indigo) 100%);

    /* Font Stacks */
    --font-sans: 'Inter',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
    --font-display: 'Plus Jakarta Sans',
    'Inter',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
    --font-gujarati: 'Noto Sans Gujarati',
    'Inter',
    sans-serif;
    --font-mono: ui-monospace,
    'SFMono-Regular',
    Menlo,
    Consolas,
    monospace;

    /* Fluid Type Scale */
    --text-hero: clamp(2.75rem, 5vw, 4.5rem);
    --text-h2: clamp(1.75rem, 3vw, 2.5rem);
    --text-h3: clamp(1.25rem, 1.8vw, 1.5rem);
    --text-body: clamp(1rem, 1.05vw, 1.125rem);
    --text-sm: 0.875rem;
    --text-xs: 0.75rem;

    /* 4/8px Spacing Scale & Layout Geometry */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;
    --space-16: 64px;
    --space-section: clamp(64px, 9vw, 120px);

    --container-max: 1120px;
    --radius-sm: 14px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    /* Motion */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --dur-fast: 200ms;
    --dur-base: 320ms;

    @supports (color: light-dark(white, black)) {
      --color-bg: light-dark(var(--raw-bg-light), var(--raw-bg-dark));
      --color-surface: light-dark(var(--raw-surface-light), var(--raw-surface-dark));
      --color-surface-tint: light-dark(var(--raw-tint-light), var(--raw-tint-dark));
      --color-text: light-dark(var(--raw-text-light), var(--raw-text-dark));
      --color-muted: light-dark(var(--raw-muted-light), var(--raw-muted-dark));
      --color-border: light-dark(var(--raw-border-light), var(--raw-border-dark));
      --color-accent: light-dark(var(--raw-accent-ink-light), var(--raw-accent-ink-dark));
      --color-accent-fill: light-dark(#0057E5, #5E9BFF);
      --color-accent-on-fill: light-dark(#FFFFFF, #0A0B0F);
      --color-cta-hover-a: light-dark(#0046C7, #7BB0FF);
      --color-cta-hover-b: light-dark(#3730A3, #A5B4FC);
      --color-highlight-a: light-dark(#0052E0, #60A5FA);
      --color-highlight-b: light-dark(#4F46E5, #A78BFA);
      --color-status-live: light-dark(var(--raw-live-light), var(--raw-live-dark));
      --color-status-build: light-dark(var(--raw-build-light), var(--raw-build-dark));
      --color-status-planned: light-dark(var(--raw-planned-light), var(--raw-planned-dark));
      --shadow-sm: light-dark(0 2px 10px -2px rgba(15, 23, 42, 0.06),
          0 2px 10px -2px rgba(0, 0, 0, 0.5));
      --shadow-md: light-dark(0 18px 42px -16px rgba(15, 23, 42, 0.11),
          0 20px 48px -16px rgba(0, 0, 0, 0.65));
    }
  }

  @supports not (color: light-dark(white, black)) {
    @media (prefers-color-scheme: dark) {
      :root {
        --color-bg: var(--raw-bg-dark);
        --color-surface: var(--raw-surface-dark);
        --color-surface-tint: var(--raw-tint-dark);
        --color-text: var(--raw-text-dark);
        --color-muted: var(--raw-muted-dark);
        --color-border: var(--raw-border-dark);
        --color-accent: var(--raw-accent-ink-dark);
        --color-accent-fill: #5E9BFF;
        --color-accent-on-fill: #0A0B0F;
        --color-cta-hover-a: #7BB0FF;
        --color-cta-hover-b: #A5B4FC;
        --color-highlight-a: #60A5FA;
        --color-highlight-b: #A78BFA;
        --color-status-live: var(--raw-live-dark);
        --color-status-build: var(--raw-build-dark);
        --color-status-planned: var(--raw-planned-dark);
      }
    }
  }
}