/* ============================================================
   Penode Design Tokens — tokens.css
   Usage: import in global CSS; consumed by Tailwind theme.extend
   Source: PEN-26 AC-2
   ============================================================ */

:root {
  /* ── Brand colours ─────────────────────────────────────── */
  --color-brand-deep:       #0E2A47;   /* Penode Deep — primary dark BG */
  --color-brand-ink:        #111418;   /* Ink — darkest surface / text on light */
  --color-brand-spark:      #F5C518;   /* Spark — accent / CTA */

  /* ── Semantic surface colours (default: dark mode) ──────── */
  --color-bg-base:          #0E2A47;
  --color-bg-surface:       #122d4e;   /* +8% L over Deep */
  --color-bg-elevated:      #163455;   /* +14% L */
  --color-bg-overlay:       rgba(14,42,71,.92);

  --color-text-primary:     #F0F4F8;
  --color-text-secondary:   #A8BCCE;
  --color-text-muted:       #6B8BA4;
  --color-text-inverse:     #111418;   /* on Spark yellow */

  --color-border-subtle:    rgba(240,244,248,.08);
  --color-border-default:   rgba(240,244,248,.16);
  --color-border-strong:    rgba(240,244,248,.32);

  --color-accent:           #F5C518;
  --color-accent-hover:     #f7cd37;
  --color-accent-press:     #ddb010;

  /* ── Typography ─────────────────────────────────────────── */
  --font-display:    'Space Grotesk', system-ui, sans-serif;
  --font-body:       'Inter', system-ui, sans-serif;

  /* Scale (Major Third ×1.25) */
  --text-xs:    0.64rem;   /* 10.24px */
  --text-sm:    0.8rem;    /* 12.8px  */
  --text-base:  1rem;      /* 16px    */
  --text-md:    1.25rem;   /* 20px    */
  --text-lg:    1.563rem;  /* 25px    */
  --text-xl:    1.953rem;  /* 31.25px */
  --text-2xl:   2.441rem;  /* 39px    */
  --text-3xl:   3.052rem;  /* 48.8px  */

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.03em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-widest:  0.12em;

  /* ── Spacing (4-pt base grid) ───────────────────────────── */
  --space-0:    0;
  --space-1:    0.25rem;   /* 4px  */
  --space-2:    0.5rem;    /* 8px  */
  --space-3:    0.75rem;   /* 12px */
  --space-4:    1rem;      /* 16px */
  --space-5:    1.25rem;   /* 20px */
  --space-6:    1.5rem;    /* 24px */
  --space-8:    2rem;      /* 32px */
  --space-10:   2.5rem;    /* 40px */
  --space-12:   3rem;      /* 48px */
  --space-16:   4rem;      /* 64px */
  --space-20:   5rem;      /* 80px */
  --space-24:   6rem;      /* 96px */
  --space-32:   8rem;      /* 128px */

  /* ── Border radii ───────────────────────────────────────── */
  --radius-sm:   0.25rem;   /* 4px  — inputs, badges */
  --radius-md:   0.5rem;    /* 8px  — cards */
  --radius-lg:   0.75rem;   /* 12px — modals, panels */
  --radius-xl:   1rem;      /* 16px — hero cards */
  --radius-2xl:  1.5rem;    /* 24px — large feature cards */
  --radius-full: 9999px;    /* pills, avatars */

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-sm:   0 1px 2px rgba(0,0,0,.3);
  --shadow-md:   0 4px 12px rgba(0,0,0,.4);
  --shadow-lg:   0 8px 32px rgba(0,0,0,.5);
  --shadow-glow: 0 0 24px rgba(245,197,24,.18);   /* Spark glow for CTAs */

  /* ── Motion ─────────────────────────────────────────────── */
  --duration-fast:    100ms;
  --duration-normal:  200ms;
  --duration-slow:    350ms;
  --ease-out:  cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in:   cubic-bezier(0.4, 0.0, 1, 1);
  --ease-inout:cubic-bezier(0.4, 0.0, 0.2, 1);

  /* ── Layout ─────────────────────────────────────────────── */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;
}

/* ── Light mode override (opt-in via .light or prefers-color-scheme) */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --color-bg-base:        #FFFFFF;
    --color-bg-surface:     #F5F7FA;
    --color-bg-elevated:    #EAEFF4;
    --color-text-primary:   #111418;
    --color-text-secondary: #3A5068;
    --color-text-muted:     #6B8BA4;
    --color-border-subtle:  rgba(14,42,71,.06);
    --color-border-default: rgba(14,42,71,.14);
    --color-border-strong:  rgba(14,42,71,.28);
  }
}