/* ==========================================================================
   Hallmark Design Tokens (OKLCH) - Rogabot Design System
   Genre: modern-minimal • Macrostructures: Workbench, Stat-Led, Stepped Workflow
   ========================================================================== */

:root {
  /* 1. OKLCH Surface & Theme Colors */
  --color-paper: oklch(14% 0.02 250);
  --color-paper-2: oklch(18% 0.03 250);
  --color-paper-elevated: oklch(22% 0.035 250);
  --color-paper-card: rgba(15, 23, 42, 0.75);
  --color-paper-card-hover: rgba(22, 33, 58, 0.85);

  /* 2. Typography Colors */
  --color-ink: oklch(98% 0.01 250);
  --color-ink-2: oklch(75% 0.03 250);
  --color-ink-muted: oklch(58% 0.03 250);
  --color-ink-inverse: oklch(14% 0.02 250);

  /* 3. Accent Hues */
  --color-accent: oklch(74% 0.16 215); /* Luminous Cyan #06b6d4 */
  --color-accent-ink: oklch(14% 0.02 250);
  --color-accent-emerald: oklch(72% 0.17 160); /* Recovered Lead Emerald #10b981 */
  --color-accent-glow: rgba(6, 182, 212, 0.25);
  --color-accent-emerald-glow: rgba(16, 185, 129, 0.25);
  --color-focus: oklch(74% 0.16 215);

  /* 4. Structural Dividers & Borders */
  --color-rule: rgba(255, 255, 255, 0.08);
  --color-rule-strong: rgba(255, 255, 255, 0.16);
  --color-rule-accent: rgba(6, 182, 212, 0.4);

  /* 5. Typography Font Families */
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* 6. Spacing Scale (4pt Baseline) */
  --space-3xs: 0.25rem;   /* 4px */
  --space-2xs: 0.5rem;    /* 8px */
  --space-xs:  0.75rem;   /* 12px */
  --space-sm:  1rem;      /* 16px */
  --space-md:  1.5rem;    /* 24px */
  --space-lg:  2rem;      /* 32px */
  --space-xl:  3rem;      /* 48px */
  --space-2xl: 4.5rem;    /* 72px */
  --space-3xl: 7rem;      /* 112px */

  /* 7. Typography Scale */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-md: 1.125rem;    /* 18px */
  --text-lg: 1.375rem;    /* 22px */
  --text-xl: 1.75rem;     /* 28px */
  --text-2xl: 2.25rem;    /* 36px */
  --text-3xl: 3rem;       /* 48px */
  --text-display: clamp(2.25rem, 5vw + 0.5rem, 4rem);

  /* 8. Radii */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --radius-pill: 9999px;

  /* 9. Motion, Easings & Durations */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 150ms;
  --dur-normal: 250ms;
  --dur-spring: 400ms;

  /* 10. Max Container Width */
  --container-max: 1240px;
}

/* Light Theme Overrides */
html.theme-light {
  --color-paper: oklch(98% 0.01 250);
  --color-paper-2: oklch(95% 0.015 250);
  --color-paper-elevated: #ffffff;
  --color-paper-card: rgba(255, 255, 255, 0.9);
  --color-paper-card-hover: rgba(255, 255, 255, 1);

  --color-ink: oklch(14% 0.02 250);
  --color-ink-2: oklch(35% 0.02 250);
  --color-ink-muted: oklch(50% 0.02 250);
  --color-ink-inverse: oklch(98% 0.01 250);

  --color-rule: rgba(0, 0, 0, 0.08);
  --color-rule-strong: rgba(0, 0, 0, 0.16);
  --color-rule-accent: rgba(6, 182, 212, 0.5);
}