/* =============================================
   SIMPLE GENIUS — Design Tokens
   Linear-inspired layout system, light mode
   ============================================= */

:root,
[data-theme='light'] {
  /* ── TYPE SCALE (Linear-matched) ── */
  --text-xs:   0.875rem;   /* 14px — captions, eyebrows */
  --text-sm:   0.9375rem;  /* 15px — nav, footer, small labels */
  --text-base: 1rem;       /* 16px — body */
  --text-lg:   1.125rem;   /* 18px — lead body */
  --text-xl:   1.375rem;   /* 22px — card titles */
  --text-2xl:  1.75rem;    /* 28px — section headlines */
  --text-3xl:  2.5rem;     /* 40px — display-md */
  --text-4xl:  3.5rem;     /* 56px — display-lg */
  --text-hero: clamp(3rem, 2vw + 2.5rem, 4.5rem); /* hero headline */

  /* ── SPACING ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-7:  1.75rem;
  --space-8:  2rem;
  --space-9:  2.25rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --section-y: 7rem;   /* vertical padding between sections */

  /* ── LAYOUT ── */
  --content-narrow:  640px;
  --content-default: 960px;
  --content-wide:    1200px;
  --outer-pad: clamp(1.5rem, 5vw, 3rem);

  /* ── BRAND COLORS — Light ── */
  --color-bg:             #F0EFED;
  --color-surface:        #F7F6F4;
  --color-surface-2:      #FAFAF8;
  --color-surface-offset: #E8E7E4;
  --color-divider:        rgba(31,31,31,0.07);
  --color-border:         rgba(31,31,31,0.10);
  --color-border-strong:  rgba(31,31,31,0.15);

  /* ── TEXT ── */
  --color-text:         #1A1A1A;
  --color-text-2:       #4A4845;
  --color-text-3:       #8A8780;
  --color-text-inverse: #F9F8F5;

  /* ── NAV — always dark pill ── */
  --color-nav-bg:   #2B2B2B;
  --color-nav-text: rgba(255,255,255,0.82);
  --color-nav-text-hover: #ffffff;

  /* ── PRIMARY CTA ── */
  --color-primary:       #1A1A1A;
  --color-primary-hover: #333333;
  --color-primary-text:  #FFFFFF;

  /* ── ACCENT — Simple Genius brand yellow ── */
  --color-accent:       #C8A84B;
  --color-accent-light: #F9F3E3;

  /* ── PASTEL PILLS ── */
  --color-pill-green:        #D4EDDA;
  --color-pill-green-text:   #2D6A4F;
  --color-pill-pink:         #FAD7E6;
  --color-pill-pink-text:    #8B1A4A;
  --color-pill-blue:         #D6E8FA;
  --color-pill-blue-text:    #1A4F7A;
  --color-pill-yellow:       #FFF3CD;
  --color-pill-yellow-text:  #7A5A00;
  --color-pill-neutral:      #E8E8E8;
  --color-pill-neutral-text: #3A3A3A;

  /* ── RADIUS (Linear system) ── */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-full: 9999px;

  /* ── TRANSITIONS ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition: 160ms var(--ease-out);

  /* ── SHADOWS ── */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.10);
  --shadow-panel: 0 0 0 1px rgba(31,31,31,0.08), 0 8px 32px rgba(31,31,31,0.08);

  /* ── FONTS ── */
  --font-display: 'Playfair', 'Georgia', serif;
  --font-body:    'Inter', 'Helvetica Neue', sans-serif;
}

[data-theme='dark'] {
  --color-bg:             #141413;
  --color-surface:        #1A1918;
  --color-surface-2:      #1F1E1D;
  --color-surface-offset: #242320;
  --color-divider:        rgba(255,255,255,0.06);
  --color-border:         rgba(255,255,255,0.08);
  --color-border-strong:  rgba(255,255,255,0.12);
  --color-text:           #E8E6E2;
  --color-text-2:         #A8A5A0;
  --color-text-3:         #565350;
  --color-text-inverse:   #1A1918;
  --color-nav-bg:         #1A1918;
  --color-primary:        #E8E6E2;
  --color-primary-hover:  #FFFFFF;
  --color-primary-text:   #1A1918;
  --color-accent:         #D4A847;
  --color-accent-light:   #2A2215;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.5);
  --shadow-panel: 0 0 0 1px rgba(255,255,255,0.06), 0 8px 32px rgba(0,0,0,0.4);
}