/* ==========================================================================
   Can't Miss Talent — Design Tokens
   Source of truth: DESIGN-cant-miss-talent.md, Appendix A
   Motion tokens: CMT-Website-Design-Prompt.md, Section K
   Do not add values that do not appear in one of those two documents.
   ========================================================================== */

:root {
  /* --- Brand: sampled directly from the logo files ----------------------- */
  --cmt-signal-red:      #C62128;  /* primary accent, light surfaces        */
  --cmt-flare-red:       #E2464D;  /* primary accent, base Ink surface      */
  --cmt-ink:             #141414;  /* primary text / inverse canvas         */
  --cmt-paper-cream:     #FAF9F5;  /* default canvas                        */
  --cmt-mist:            #E3E8EE;  /* utility surface                       */
  --cmt-slate:           #64748D;  /* metadata, light surfaces, 16px+ only  */
  --cmt-graphite:        #3A3A39;  /* body copy, light surfaces             */
  --cmt-white:           #FFFFFF;  /* spotlight card, reversed type         */

  /* --- Derived: interactive states & surfaces ---------------------------- */
  --cmt-flare-red-light: #EC6A70;  /* red TEXT on #202020 / #2A2A2A         */
  --cmt-red-deep:        #A81A20;  /* red hover, light                      */
  --cmt-red-press:       #8B1418;  /* red active, light                     */
  --cmt-red-tint:        #F8E4E4;  /* flat alert / selected-row plate       */
  --cmt-paper-deep:      #F2F1EC;  /* alternating band                      */
  --cmt-rule:            #D8D7D3;  /* hairline, light                       */
  --cmt-ink-lift:        #202020;  /* elevated card, dark                   */
  --cmt-ink-panel:       #2A2A2A;  /* inset surface, dark                   */
  --cmt-rule-ink:        #333333;  /* hairline, dark                        */
  --cmt-slate-light:     #8E9AAE;  /* metadata, dark surfaces               */

  /* --- Type -------------------------------------------------------------- */
  --font-display: "Archivo Black", "Archivo Expanded", "Helvetica Neue", Impact, sans-serif;
  --font-sans:    "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Label + numeric utility role. Newsreader replaces the former monospace label face here (client called it
     "too techy"), dropping the system from four families to three.
     Uppercase, tracked 0.18em, tabular lining figures — see base.css. */
  --font-label:   "Newsreader", Georgia, "Times New Roman", serif;
  --font-serif:   "Newsreader", Georgia, "Times New Roman", serif;

  /* --- Spacing: 4px base, 8px rhythm. Ten values, nothing between. ------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* --- Radius: five values, no more -------------------------------------- */
  --radius-sm:   8px;    /* inputs, badges, nested images   */
  --radius-md:   12px;   /* cards, tables, panels           */
  --radius-lg:   16px;   /* contained slabs                 */
  --radius-pill: 999px;  /* all buttons and pills           */
  --radius-full: 50%;    /* avatars, icon buttons, bullseye */

  /* --- Layout ------------------------------------------------------------ */
  --container-editorial: 1240px;
  --container-slab:      1440px;
  --measure:             68ch;
  --nav-height:          72px;

  /* --- Motion (Section K) ------------------------------------------------ */
  --dur-instant: 100ms;   /* color/opacity only         */
  --dur-fast:    150ms;   /* hover, focus, buttons      */
  --dur-base:    250ms;   /* section reveals            */
  --dur-slow:    400ms;   /* hero lines                 */
  --dur-count:  1200ms;   /* stat count-up              */
  --dur-ticker:   60s;    /* logo marquee               */

  --ease-entrance: cubic-bezier(0, 0, 0.3, 1);
  --ease-standard: cubic-bezier(0.2, 0, 0.38, 0.9);
  --ease-hero:     cubic-bezier(0.05, 0.7, 0.1, 1);

  --stagger: 80ms;   /* max 4 steps */
}

/* ==========================================================================
   Ink mode — applied per-section with .on-ink, not as a global theme toggle.
   "Paper Cream is the default; Ink is a deliberate choice, not a preference
   toggle." — DESIGN-cant-miss-talent.md §1
   ========================================================================== */

.on-ink {
  --surface:        var(--cmt-ink);
  --surface-lift:   var(--cmt-ink-lift);
  --surface-panel:  var(--cmt-ink-panel);
  --text-heading:   var(--cmt-paper-cream);
  --text-body:      var(--cmt-paper-cream);
  --text-meta:      var(--cmt-slate-light);
  --accent:         var(--cmt-flare-red);
  --accent-text:    var(--cmt-flare-red-light);
  --hairline:       var(--cmt-rule-ink);
  --focus-ring:     var(--cmt-flare-red);
}

:root,
.on-cream {
  --surface:        var(--cmt-paper-cream);
  --surface-lift:   var(--cmt-white);
  --surface-panel:  var(--cmt-mist);
  --text-heading:   var(--cmt-ink);
  --text-body:      var(--cmt-graphite);
  --text-meta:      var(--cmt-slate);
  --accent:         var(--cmt-signal-red);
  --accent-text:    var(--cmt-signal-red);
  --hairline:       var(--cmt-rule);
  --focus-ring:     var(--cmt-signal-red);
}