/* ─────────────────────────────────────────────────────────────
   The Career Portfolio — Color tokens
   Brand palette: Navy, Coral, Gold, Teal, Cream.
   Warm, human, encouraging — never sterile/corporate.
   ───────────────────────────────────────────────────────────── */
:root {
  /* ── Brand core ── */
  --navy:  #07233D;   /* primary ink, headlines, the TCP mark */
  --coral: #F85643;   /* energy + primary action — "Clarify" dot */
  --gold:  #F3C969;   /* warmth + highlight — "Build" dot */
  --teal:  #1A8199;   /* trust + calm — "Communicate" dot */
  --cream: #F8F1E1;   /* the page itself — warm paper */

  /* ── Navy ramp (cool ink / surfaces) ── */
  --navy-900: #04182A;
  --navy-800: #07233D;  /* = --navy */
  --navy-700: #143A57;
  --navy-600: #2B5273;
  --navy-500: #4A6B89;
  --navy-400: #7088A1;
  --navy-300: #A3B3C3;
  --navy-200: #CDD6E0;
  --navy-100: #E6EAF0;

  /* ── Coral ramp ── */
  --coral-700: #C23322;
  --coral-600: #E0412F;
  --coral-500: #F85643;  /* = --coral */
  --coral-400: #FA7A6B;
  --coral-300: #FCA89E;
  --coral-100: #FDE3DE;

  /* ── Gold ramp ── */
  --gold-700: #C99A2E;
  --gold-600: #E2B344;
  --gold-500: #F3C969;  /* = --gold */
  --gold-400: #F7D88C;
  --gold-300: #FAE7B6;
  --gold-100: #FDF4DC;

  /* ── Teal ramp ── */
  --teal-700: #0F5A6B;
  --teal-600: #156B80;
  --teal-500: #1A8199;  /* = --teal */
  --teal-400: #4DA2B5;
  --teal-300: #8AC4D1;
  --teal-100: #DBEDF1;

  /* ── Cream / neutral paper ── */
  --cream-300: #EFE4CC;  /* deeper paper, hairlines on cream */
  --cream-200: #F4EBD7;
  --cream-100: #F8F1E1;  /* = --cream */
  --cream-50:  #FBF7EE;  /* lightest wash */
  --white:     #FFFFFF;

  /* ── Functional / status ── */
  --success: #2E8B6F;
  --success-bg: #DDF0E8;
  --warning: #D99A1F;
  --warning-bg: #FBF0D2;
  --error:   #C23322;
  --error-bg: #FCE3DE;
  --info:    #1A8199;
  --info-bg: #DBEDF1;

  /* ─────────────────────────────────────────────
     Semantic aliases — author UI against THESE.
     ───────────────────────────────────────────── */

  /* Surfaces */
  --surface-page:    var(--cream-100);   /* default app background */
  --surface-card:    var(--white);       /* cards, sheets, panels */
  --surface-sunken:  var(--cream-200);   /* wells, insets */
  --surface-inverse: var(--navy-800);    /* dark sections, footers */
  --surface-accent:  var(--navy-800);    /* brand-forward blocks */

  /* Text */
  --text-strong:   var(--navy-800);  /* headlines, primary copy */
  --text-body:     #21384C;          /* default reading text */
  --text-muted:    var(--navy-500);  /* captions, meta, hints */
  --text-faint:    var(--navy-400);  /* disabled, watermark */
  --text-on-dark:  var(--cream-50);  /* copy on navy */
  --text-on-accent:var(--white);     /* copy on coral/teal */
  --text-link:     var(--teal-600);

  /* Borders */
  --border-subtle: var(--cream-300);
  --border-default:#E2D9C4;
  --border-strong: var(--navy-200);
  --border-focus:  var(--teal-500);

  /* Brand actions */
  --action-primary:        var(--coral-500);
  --action-primary-hover:  var(--coral-600);
  --action-primary-press:  var(--coral-700);
  --action-secondary:      var(--navy-800);
  --action-secondary-hover:var(--navy-700);

  /* The three pillars (logo dots) */
  --pillar-clarify:     var(--coral);   /* Clarify your direction */
  --pillar-build:       var(--gold);    /* Build your portfolio */
  --pillar-communicate: var(--teal);    /* Communicate your value */

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