/* =========================================================
   Michael Bach — Design Tokens v0.1
   All brand values per MIC-BAC Brand Guidelines 2024-03-04.
   Do not introduce off-brand colors. Allowed pairings only.
   ========================================================= */

:root {
  /* ---------- BRAND COLORS (exact hex from brand guide) ---------- */

  /* Arsenic — primary dark */
  --color-arsenic:        #443E4F;
  --color-arsenic-t1:     #625A72;
  --color-arsenic-t2:     #807693;
  --color-arsenic-t3:     #958DA5;
  --color-arsenic-t4:     #AAA4B7;

  /* Dark Lavender — secondary */
  --color-lavender:       #644B92;
  --color-lavender-t1:    #795DAC;
  --color-lavender-t2:    #8F78BA;
  --color-lavender-t3:    #A693C8;
  --color-lavender-t4:    #BCAED6;

  /* Coral — accent / primary CTA */
  --color-coral:          #EE0742;
  --color-coral-t1:       #F93969;
  --color-coral-t2:       #FA6187;
  --color-coral-t3:       #FB88A5;
  --color-coral-t4:       #FCB0C3;

  /* Tulip — soft accent */
  --color-tulip:          #F88C93;
  --color-tulip-t1:       #F99FA5;
  --color-tulip-t2:       #FAB2B7;
  --color-tulip-t3:       #FBC5C9;
  --color-tulip-t4:       #FCD9DB;

  /* Pastel Orange — warm accent */
  --color-orange:         #FFAB4C;
  /* Alias — v0.2 used "pastel orange" in copy; same swatch as orange. */
  --color-pastel-orange:  #FFAB4C;
  --color-orange-t1:      #FFBC70;
  --color-orange-t2:      #FFC685;
  --color-orange-t3:      #FFCF99;
  --color-orange-t4:      #FFD9AD;

  /* Timberwolf — neutral light */
  --color-timberwolf:     #DBDBD1;
  --color-timberwolf-t1:  #E4E4DD;
  --color-timberwolf-t2:  #EDEDE8;
  --color-timberwolf-t3:  #F6F6F4;
  --color-timberwolf-t4:  #FFFFFF;

  --color-white:          #FFFFFF;
  --color-near-black:     #1A1A1A;

  /* ---------- SEMANTIC ALIASES ---------- */

  --color-bg-primary:     var(--color-arsenic);     /* dark surfaces */
  --color-bg-secondary:   var(--color-lavender);    /* lavender surfaces */
  --color-bg-soft:        var(--color-timberwolf);  /* neutral light */
  --color-bg-softer:      var(--color-timberwolf-t3); /* off-white */
  --color-bg-light:       var(--color-white);

  --color-text-on-dark:   var(--color-white);
  --color-text-on-light:  var(--color-arsenic);
  --color-text-muted-on-dark:  var(--color-timberwolf);
  --color-text-muted-on-light: var(--color-arsenic-t1);

  --color-accent:         var(--color-coral);
  --color-accent-soft:    var(--color-tulip);
  --color-accent-warm:    var(--color-orange);

  --color-focus-on-dark:  var(--color-coral);
  --color-focus-on-light: var(--color-arsenic);

  /* ---------- TYPE SCALE ---------- */

  --font-sans: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-lg:    1.125rem;   /* 18px */
  --text-xl:    1.375rem;   /* 22px */
  --text-2xl:   1.75rem;    /* 28px */
  --text-3xl:   2.25rem;    /* 36px */
  --text-4xl:   3rem;       /* 48px */
  --text-5xl:   4rem;       /* 64px */
  --text-hero:  clamp(2.75rem, 6.5vw, 5.75rem); /* responsive editorial display */

  --leading-tight:   1.05;
  --leading-snug:    1.15;
  --leading-normal:  1.4;
  --leading-relaxed: 1.6;

  --tracking-display: -0.025em;
  --tracking-tight:   -0.015em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-eyebrow: 0.18em;

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

  /* ---------- SPACING (rem-based, 8pt-ish) ---------- */

  --space-1:  0.25rem;   /* 4 */
  --space-2:  0.5rem;    /* 8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.5rem;    /* 24 */
  --space-6:  2rem;      /* 32 */
  --space-7:  2.5rem;    /* 40 */
  --space-8:  3rem;      /* 48 */
  --space-9:  4rem;      /* 64 */
  --space-10: 5rem;      /* 80 */
  --space-12: 7rem;      /* 112 */
  --space-14: 9rem;      /* 144 */

  /* ---------- RADII ---------- */

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-full: 9999px;

  /* ---------- SHADOWS (subtle only — no AI-blur) ---------- */

  --shadow-1: 0 1px 0 rgba(26,26,26,0.06);
  --shadow-2: 0 2px 0 rgba(26,26,26,0.08);
  --shadow-inset-line: inset 0 -1px 0 rgba(26,26,26,0.08);

  /* ---------- MOTION ---------- */

  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---------- LAYOUT ---------- */

  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 4vw, 2.5rem);
  --section-y:     clamp(3.5rem, 8vw, 6.5rem);

  /* ---------- FOCUS ---------- */

  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;
}

/* Reduced-motion: collapse durations to zero. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}