/* ============================================================
   ONE ELEVEN — COLOR TOKENS
   Brand navy #233950 leads (authority + pedigree).
   Coral = the "art / human / creative" side.
   Teal  = the "science / digital / technology" side.
   Neutrals are warmed slightly for a personable, human feel.
   ============================================================ */

:root {
  /* ---- Brand Navy (primary) ---- */
  --navy-950: #0F1D2A;
  --navy-900: #16293A;
  --navy-800: #1E374F; /* ◀ THE BRAND NAVY */
  --navy-700: #294860;
  --navy-600: #365A76;
  --navy-500: #4D7290;
  --navy-400: #7591AB;
  --navy-300: #A3B6C8;
  --navy-200: #CAD6E0;
  --navy-100: #E5EBF0;
  --navy-50:  #F2F5F8;

  /* ---- Warm accent · brand RED-ORANGE #FF3C1D ("art / human / creative") ----
     Token family is named `coral` for its role; 500 is the exact brand value. */
  --coral-700: #B8240C;
  --coral-600: #E22F12;
  --coral-500: #FF3C1D; /* ◀ brand red-orange */
  --coral-400: #FF6A52;
  --coral-300: #FF9684;
  --coral-200: #FFC2B6;
  --coral-100: #FFE0DA;
  --coral-50:  #FFF2EF;

  /* ---- Cool accent · brand LIGHT BLUE #99D5E1 ("science / digital") ----
     Brand blue is light; it anchors the scale at 300, with darker shades
     derived so the family can carry white text on buttons/labels. */
  --teal-700: #1E6473;
  --teal-600: #2A7E90;
  --teal-500: #3D9DB0;
  --teal-400: #66BACB;
  --teal-300: #99D5E1; /* ◀ brand light blue */
  --teal-200: #BBE4EC;
  --teal-100: #DAF0F4;
  --teal-50:  #EEF8FA;

  /* ---- Neutrals · brand secondaries #42454A (charcoal) + #EBECEC (light) ---- */
  --paper:    #FAFBFB; /* default page background — clean near-white */
  --paper-2:  #F1F2F3; /* sunken / alternating sections */
  --paper-3:  #EBECEC; /* ◀ brand light gray — surfaces & dividers */
  --white:    #FFFFFF;
  --ink-900:  #1E2227; /* strongest text */
  --ink-700:  #42454A; /* ◀ brand charcoal — body text */
  --ink-500:  #6B6E73; /* muted */
  --ink-400:  #9A9DA1; /* subtle */
  --ink-300:  #C5C7C9;
  --line:     #E2E4E5; /* hairline */
  --line-cool:#D9E0E7; /* hairline on navy-tinted surfaces */
  --gray-charcoal: #42454A; /* brand secondary (dark) */
  --gray-light:    #EBECEC; /* brand secondary (light) */

  /* ---- Semantic palettes ---- */
  --green-600: #2E7D52;
  --green-500: #3DA06B;
  --green-100: #DEF1E6;
  --amber-600: #C9871A;
  --amber-500: #E8A93C;
  --amber-100: #FAEFD6;
  --red-600:   #C23A2B;
  --red-500:   #DE4A39;
  --red-100:   #FADCD7;
  --blue-600:  #2B6FB5;
  --blue-500:  #3D8BD9;
  --blue-100:  #DCEBFA;
}

/* ============================================================
   SEMANTIC ALIASES — reach for these in components.
   ============================================================ */
:root {
  /* Surfaces */
  --surface-page:     var(--paper);
  --surface-sunken:   var(--paper-2);
  --surface-card:     var(--white);
  --surface-inverse:  var(--navy-800);
  --surface-inverse-2:var(--navy-900);
  --surface-accent:   var(--coral-50);
  --surface-tech:     var(--teal-50);

  /* Text */
  --text-strong:   var(--navy-900);
  --text-body:     var(--ink-700);
  --text-muted:    var(--ink-500);
  --text-subtle:   var(--ink-400);
  --text-inverse:  var(--paper);
  --text-inverse-muted: var(--navy-300);
  --text-link:     var(--coral-600);
  --text-on-accent:var(--white);

  /* Brand roles */
  --brand:          var(--navy-800);
  --brand-strong:   var(--navy-900);
  --brand-soft:     var(--navy-100);
  --accent:         var(--coral-500);
  --accent-strong:  var(--coral-600);
  --accent-soft:    var(--coral-100);
  --tech:           var(--teal-500);
  --tech-strong:    var(--teal-600);
  --tech-soft:      var(--teal-100);

  /* Borders */
  --border:        var(--line);
  --border-strong: var(--navy-200);
  --border-focus:  var(--coral-500);

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

  /* Navy: --navy-800 (#233950) matches the supplied wordmark PNG exactly.
     The vector logo bucket uses a deeper navy (~#112C55) — available as an
     alternate; see --navy-ink below. */
  --navy-ink:  #112C55; /* deeper navy seen in the vector logo source */

  /* Focus ring */
  --ring: 0 0 0 3px color-mix(in srgb, var(--coral-500) 38%, transparent);
}