/* ============================================================
   Studio1 — Color Tokens
   Heavy black + charcoal foundation, with punchy fuchsia and
   lime CTA accents. Confident, edgy, conversion-focused.
   NOTE: exact brand hexes pending the 2023 Style Guide PDF.
   ============================================================ */

:root {
  /* ---- Base neutrals (ink scale) ---- */
  --ink-1000: #050506;   /* deepest black — full-bleed hero bg */
  --ink-950:  #0A0A0C;   /* page black */
  --ink-900:  #121215;   /* charcoal surface */
  --ink-800:  #1A1A1F;   /* raised charcoal card */
  --ink-700:  #24242B;   /* hairline / elevated card */
  --ink-600:  #34343D;   /* borders on dark */
  --ink-500:  #4B4B56;   /* muted strokes */
  --ink-400:  #6E6E7A;   /* disabled text on dark */
  --ink-300:  #9A9AA6;   /* secondary text on dark */
  --ink-200:  #C7C7D0;   /* tertiary */
  --ink-100:  #E7E7EC;   /* faint dividers on light */
  --ink-50:   #F4F4F6;   /* off-white surface */
  --cream:    #F4F2ED;   /* warm cream / "Milk" — Studio1's most-used light surface (from Figma) */
  --milk:     var(--cream); /* brand alias */
  --charcoal: #1A1B1E;   /* warm charcoal surface (from Figma) */
  --black:    #0E0F11;   /* true near-black */
  --white:    #FFFFFF;

  /* ---- Fuchsia (primary accent / CTA) — Studio1 raspberry red ---- */
  --fuchsia-900: #92003B;  /* deepest maroon — dark fuchsia (from Figma) */
  --fuchsia-700: #B3123F;
  --fuchsia-600: #E2235A;  /* press */
  --fuchsia-500: #ED2457;  /* core brand primary */
  --fuchsia-400: #FF4E7A;  /* hover */
  --fuchsia-300: #FF85A3;
  --fuchsia-100: #FFD6E0;
  --fuchsia-tint: rgba(237, 36, 87, 0.12);
  /* Figma source value for the brand pink is #FD3164 — current --fuchsia-500
     keeps the approved #ED2457; swap here if you want the exact Figma hue. */

  /* ---- Lime (secondary accent / highlights) — soft chartreuse ---- */
  --lime-bright: #E1FF63;  /* brighter lime variant (from Figma) */
  --lime-700: #9DB63C;
  --lime-600: #B8D152;  /* press */
  --lime-500: #D0EB6F;  /* core brand secondary */
  --lime-400: #DEF291;
  --lime-300: #E9F7B4;
  --lime-100: #F5FBDB;
  --lime-tint: rgba(208, 235, 111, 0.16);

  /* ---- Support / semantic status ---- */
  --success: #2FD27A;
  --warning: #FFB020;
  --danger:  #FF4D4D;
  --info:    #3DA8FF;

  /* ============================================================
     Semantic aliases — reference these in components
     ============================================================ */

  /* Surfaces (dark-first, the brand's native mode) */
  --surface-page:    var(--ink-950);
  --surface-raised:  var(--ink-900);
  --surface-card:    var(--ink-800);
  --surface-overlay: var(--ink-700);
  --surface-inverse: var(--white);
  --surface-muted:   var(--ink-50);

  /* Text */
  --text-strong:    var(--white);
  --text-body:      var(--ink-200);
  --text-muted:     var(--ink-300);
  --text-disabled:  var(--ink-400);
  --text-on-accent:    var(--ink-1000);  /* dark text — for light accents (lime) */
  --text-on-primary:   var(--white);     /* white text — on fuchsia red */
  --text-on-secondary: var(--ink-1000);  /* dark text — on lime */
  --text-inverse:   var(--ink-950);   /* on light surfaces */

  /* Accents */
  --accent-primary:        var(--fuchsia-500);
  --accent-primary-hover:  var(--fuchsia-400);
  --accent-primary-press:  var(--fuchsia-600);
  --accent-secondary:      var(--lime-500);
  --accent-secondary-hover:var(--lime-400);
  --accent-secondary-press:var(--lime-600);

  /* Borders & lines */
  --border-subtle:  var(--ink-700);
  --border-default: var(--ink-600);
  --border-strong:  var(--ink-500);
  --border-accent:  var(--fuchsia-500);
  --focus-ring:     var(--lime-500);

  /* Links */
  --link:       var(--fuchsia-400);
  --link-hover: var(--fuchsia-300);
}