/* ============================================================
   PERSONAL BRAND DESIGN SYSTEM — colors_and_type.css
   Creative Strategist / Content Creator / Filmmaker
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300;1,9..40,400&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

/* ── BASE COLOR TOKENS ─────────────────────────────────────── */
:root {
  --color-eggshell:    #F7F3EC;
  --color-black:       #080806;
  --color-orange:      #FF4D00;
  --color-warm-mid:    #1A1A1A;
  --color-muted:       #C4B8A8;
  --color-muted-text:  #6B5D4F;
  --color-white:       #FFFFFF;

  --color-orange-10:   #FF4D001A;
  --color-orange-20:   #FF4D0033;

  --bg:              var(--color-eggshell);
  --bg-surface:      var(--color-white);
  --bg-raised:       #EAE4DA;
  --bg-inverted:     var(--color-black);
  --fg:              var(--color-black);
  --fg-secondary:    var(--color-muted-text);
  --fg-inverted:     var(--color-eggshell);
  --fg-accent:       var(--color-orange);
  --border:          var(--color-black);
  --border-subtle:   var(--color-muted);
  --accent:          var(--color-orange);
  --accent-fg:       var(--color-black);

  --font-display:    'Bebas Neue', 'Impact', sans-serif;
  --font-heading:    'Syne', 'Helvetica Neue', sans-serif;
  --font-body:       'DM Sans', 'Helvetica Neue', sans-serif;
  --font-mono:       'Space Mono', 'Courier New', monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  2rem;
  --text-3xl:  2.5rem;
  --text-4xl:  3.5rem;
  --text-5xl:  5rem;
  --text-6xl:  7rem;

  --leading-tight:  1;
  --leading-snug:   1.2;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  --tracking-tight:  -0.03em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-wider:  0.15em;
  --tracking-widest: 0.25em;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold:800;

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  --radius-none: 0px;
  --radius-sm:   2px;
  --radius-pill: 999px;

  --shadow-float:  0 4px 24px rgba(0, 0, 0, 0.12);
  --shadow-heavy:  0 8px 48px rgba(0, 0, 0, 0.20);

  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-inout:   cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 200ms;
  --duration-base: 400ms;

  --max-width:    1200px;
  --gutter:       24px;
  --border-width: 1px;
}

[data-theme="dark"] {
  --bg:           #131110;
  --bg-surface:   #1E1B19;
  --bg-raised:    #252220;
  --bg-inverted:  #EDE8DF;
  --fg:           #EDE8DF;
  --fg-secondary: #8A8078;
  --fg-inverted:  #131110;
  --fg-accent:    var(--color-orange);
  --border:       rgba(237, 232, 223, 0.15);
  --border-subtle:rgba(237, 232, 223, 0.07);
  --shadow-float: 0 4px 24px rgba(0, 0, 0, 0.5);
  --shadow-heavy: 0 8px 48px rgba(0, 0, 0, 0.75);
}