/* ============================================================
   WHALE DIGITAL — Color tokens
   A deep-ocean brand: near-black "ink", a cyan "whale" brand hue,
   an orange "signal" accent for CTAs, and warm paper surfaces.
   Restraint is the rule — orange is used sparingly for action only.
   ============================================================ */

:root {
  /* ---- Base palette : Ink (deep ocean) ---- */
  --ink-900: #07090C;   /* abyss / hero black */
  --ink-800: #0B0F14;   /* primary dark surface */
  --ink-700: #11161D;   /* raised dark surface */
  --ink-600: #1A222B;   /* dark card */
  --ink-500: #2A3540;   /* dark border / hairline */
  --ink-400: #475663;   /* muted text on dark */

  /* ---- Base palette : Paper (warm light) ---- */
  --paper-0:  #FFFFFF;  /* pure card */
  --paper-50: #FAF9F6;  /* page background (warm off-white) */
  --paper-100:#F4F2EC;  /* sunken / alt section */
  --paper-200:#ECE9E1;  /* hairline on light */
  --paper-300:#DAD6CB;  /* stronger border */

  /* ---- Neutral text (stone) ---- */
  --stone-900:#15181C;  /* primary text on light */
  --stone-700:#3A4048;  /* secondary text */
  --stone-500:#6B7280;  /* muted / captions */
  --stone-400:#9AA0A8;  /* placeholder */

  /* ---- Brand : Ocean blue (Whale) ---- */
  --cyan-700:#0A4A70;   /* deepest ocean */
  --cyan-600:#0C5C8C;
  --cyan-500:#1072A8;   /* primary brand — ocean blue */
  --cyan-400:#2E92C4;
  --cyan-300:#7CC4E6;   /* light ocean — emphasis on dark */

  /* ---- Accent : Cosmic orange (action only) ---- */
  --orange-700:#B5430C;
  --orange-600:#D8530F;
  --orange-500:#F0611C;  /* primary CTA — cosmic orange */
  --orange-400:#FB8B4D;
  --orange-300:#FDB082;
  --orange-50: #FDEEE3;

  /* ---- Semantic status ---- */
  --green-500:#1F9D6B;
  --amber-500:#E0A500;
  --red-500:  #E5484D;
  --blue-500: #2A6FDB;

  /* ============================================================
     SEMANTIC ALIASES  — use these in components, not raw scales
     ============================================================ */

  /* Surfaces */
  --bg-page:        var(--paper-50);
  --bg-alt:         var(--paper-100);
  --surface-card:   var(--paper-0);
  --surface-sunken: var(--paper-100);
  --surface-dark:   var(--ink-800);
  --surface-dark-2: var(--ink-600);

  /* Text */
  --text-strong:    var(--stone-900);
  --text-body:      var(--stone-700);
  --text-muted:     var(--stone-500);
  --text-placeholder: var(--stone-400);
  --text-on-dark:   #EDEFF2;
  --text-on-dark-muted: #9BA6B2;
  --text-inverse:   #FFFFFF;

  /* Brand + accent roles */
  --brand:          var(--cyan-500);
  --brand-strong:   var(--cyan-600);
  --accent:         var(--orange-500);
  --accent-hover:   var(--orange-600);
  --accent-active:  var(--orange-700);
  --accent-soft:    var(--orange-50);
  --on-accent:      #FFFFFF;

  /* Lines */
  --border:         var(--paper-200);
  --border-strong:  var(--paper-300);
  --border-dark:    var(--ink-500);

  /* Focus */
  --ring:           var(--cyan-500);

  /* Status */
  --success: var(--green-500);
  --warning: var(--amber-500);
  --danger:  var(--red-500);
  --info:    var(--blue-500);

  /* Hero gradient stops (mesh of ocean depths) */
  --hero-stop-1: #1072A8;
  --hero-stop-2: #0C5C8C;
  --hero-stop-3: #0A3A56;
  --hero-stop-4: #F0611C;
}