/* =========================================================
   SPC STUDIOS - Design tokens
   A creative sub-brand of SPC. Coral + violet on warm neutrals,
   with heritage SPC blue kept as sibling DNA.
   Ported 1:1 from the SPC Studios design system.
   ========================================================= */

:root {
  /* ============================================================
     BRAND - STUDIO CORAL  (primary)
     ============================================================ */
  --studio-coral-50:  #fff3ef;
  --studio-coral-100: #ffe3d9;
  --studio-coral-200: #ffc2af;
  --studio-coral-300: #ff9a7e;
  --studio-coral-400: #fb6f4a;
  --studio-coral-500: #ef4d23;   /* signature Studio Coral - fills, large type */
  --studio-coral-600: #d63d16;   /* text-safe on white (4.64:1) - buttons, links */
  --studio-coral-700: #b22f10;
  --studio-coral-800: #8c2710;
  --studio-coral-900: #6e2311;
  --studio-coral-950: #3a1308;

  /* ============================================================
     BRAND - STUDIO VIOLET  (expressive secondary / accent)
     ============================================================ */
  --studio-violet-50:  #f2effe;
  --studio-violet-100: #e6e0fd;
  --studio-violet-200: #cdc1fb;
  --studio-violet-300: #ad99f7;
  --studio-violet-400: #8b6cf0;
  --studio-violet-500: #6d47e6;   /* Studio Violet - accent fills (5.69:1 on white) */
  --studio-violet-600: #5a32d6;   /* text-safe violet (7.34:1) */
  --studio-violet-700: #4a26b4;
  --studio-violet-800: #3b1f8c;
  --studio-violet-900: #2f1b6b;
  --studio-violet-950: #1d0f42;

  /* ============================================================
     HERITAGE BLUE  (carried-over SPC hue - sibling DNA)
     ============================================================ */
  --studio-blue-50:  #eef5fb;
  --studio-blue-500: #0f70b8;
  --studio-blue-600: #005bad;
  --studio-blue-700: #004a8f;

  /* ============================================================
     NEUTRALS  (warmed ~3% toward the coral)
     ============================================================ */
  --studio-neutral-0:    #ffffff;
  --studio-neutral-50:   #faf8f6;
  --studio-neutral-100:  #f1efeb;
  --studio-neutral-200:  #e3ded7;
  --studio-neutral-300:  #c8c2b9;
  --studio-neutral-400:  #9d968b;
  --studio-neutral-500:  #6e6960;
  --studio-neutral-600:  #4c4842;
  --studio-neutral-700:  #3a3631;
  --studio-neutral-800:  #2e2b27;   /* warm charcoal - body text */
  --studio-neutral-900:  #1f1d1a;
  --studio-neutral-1000: #0c0b09;

  /* CTA */
  --studio-cta:         #d63d16;
  --studio-cta-hover:   #b22f10;
  --studio-cta-pressed: #8c2710;
  --studio-tint:        #ffe3d9;

  /* Semantic surface & foreground */
  --bg:        var(--studio-neutral-0);
  --bg-muted:  var(--studio-neutral-50);
  --bg-sunken: var(--studio-neutral-100);
  --bg-inverse: var(--studio-neutral-900);

  --surface:         var(--studio-neutral-0);
  --surface-raised:  var(--studio-neutral-0);
  --surface-overlay: color-mix(in srgb, var(--studio-neutral-900) 55%, transparent);

  --fg:        var(--studio-neutral-800);
  --fg-muted:  var(--studio-neutral-500);
  --fg-subtle: var(--studio-neutral-400);
  --fg-on-brand: var(--studio-neutral-0);

  --border:         var(--studio-neutral-200);
  --border-strong:  var(--studio-neutral-300);
  --border-inverse: color-mix(in srgb, var(--studio-neutral-0) 18%, transparent);

  --accent:         var(--studio-coral-500);
  --accent-strong:  var(--studio-coral-600);
  --accent-soft:    var(--studio-coral-50);
  --accent-ring:    color-mix(in srgb, var(--studio-coral-500) 35%, transparent);

  --secondary:        var(--studio-violet-500);
  --secondary-strong: var(--studio-violet-600);
  --secondary-soft:   var(--studio-violet-50);
  --secondary-ring:   color-mix(in srgb, var(--studio-violet-500) 35%, transparent);

  /* Semantic state */
  --success: #1f8a5a;
  --warning: #b8740f;
  --danger:  #c92a2a;
  --info:    var(--studio-blue-500);

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-display: 'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fs-display-2xl: clamp(56px, 8vw, 112px);
  --fs-display-xl:  clamp(44px, 6vw, 80px);
  --fs-display-lg:  clamp(36px, 5vw, 56px);
  --fs-h1: 40px;
  --fs-h2: 32px;
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-h5: 18px;
  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-body-sm: 14px;
  --fs-caption: 12px;
  --fs-eyebrow: 12px;

  --lh-tight:  1.02;
  --lh-snug:   1.15;
  --lh-normal: 1.45;
  --lh-loose:  1.65;

  --tracking-tight:   -0.025em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;
  --tracking-eyebrow: 0.18em;

  /* ============================================================
     SPACING / RADII / SHADOWS / MOTION / LAYOUT
     ============================================================ */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  /* Warm coral-tinted shadow ladder */
  --shadow-xs:  0 1px 2px  rgba(58, 19, 8, 0.06);
  --shadow-sm:  0 2px 6px  rgba(58, 19, 8, 0.08);
  --shadow-md:  0 8px 20px rgba(58, 19, 8, 0.10);
  --shadow-lg:  0 18px 40px rgba(58, 19, 8, 0.14);
  --shadow-xl:  0 28px 60px rgba(46, 12, 4, 0.22);
  --shadow-cta: 0 6px 18px rgba(214, 61, 22, 0.35);

  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;

  --container-max: 1160px;
  --container-pad: clamp(20px, 5vw, 40px);
}