/* ═══════════════════════════════════════════════════════════════════════════
   CADENCE 3 — DESIGN TOKENS
   ---------------------------------------------------------------------------
   Every token is named the way Tailwind v4 expects (--color-*, --font-*,
   --text-*, --spacing-*, --ease-*, --radius-*), but declared in :root so it
   works right now with no build step.

   PORTING TO NEXT.JS + TAILWIND v4 — this is the whole job:
     1. Put `@import "tailwindcss";` at the top of app/globals.css
     2. Change the `:root {` on line 20 below to `@theme {`
     3. Done. `--color-sky` now generates bg-sky / text-sky / border-sky,
        `--font-display` generates font-display, `--ease-brand` generates
        ease-brand, and so on.
   No second config file. No values to keep in sync.

   Brand values transcribed from "C3 Brand Guide.pptx" (July 2025) p.17,
   read from the deck's shape fills rather than its body text (the deck's own
   labels for the extension colors contain copy-paste errors).
   ═══════════════════════════════════════════════════════════════════════════ */

:root {   /* ← change to `@theme {` when moving to Tailwind v4 */

  /* ── Official: primary logo colors ─────────────────────────────────────── */
  --color-sky:        #4E9AD4;   /* Sky Blue          PMS 279C — THE accent */
  --color-sapphire:   #346AB4;   /* Electric Sapphire PMS 660C */

  /* ── Official: supportive ──────────────────────────────────────────────── */
  --color-indigo:     #1C4076;   /* Twilight Indigo */
  --color-gray:       #D2D2D2;   /* Med Gray */
  --color-ivory:      #F3F3F3;   /* Ivory Whisper */
  --color-charcoal:   #404040;   /* Charcoal */
  --color-midnight:   #1B262F;   /* Midnight Steel */

  /* ── Official: brand extension / "golden hour" grades ──────────────────── */
  /* Photographic overlays only. Never a button, never a link. */
  --color-lightblue:  #89C3FF;
  --color-slate:      #417487;
  --color-poppy:      #E55A2F;
  --color-gold:       #F69A37;

  /* ── Derived: dark canvas ladder, hue-locked to Midnight Steel ─────────── */
  /* The step between void and base was 4 points of luminance — technically an
     alternation, visually a single flat field. Widened so a section boundary
     is legible without needing a border. Still firmly in Midnight Steel's
     hue family; nothing here reads as grey. */
  --color-void:       #0A0E12;   /* page floor, hero, CTA */
  --color-base:       #121A24;   /* default section */
  --color-raised:     #1A242F;   /* cards */
  --color-line:       #26313D;   /* hairlines */
  --color-line-soft:  #1C2732;

  /* ── Derived: the one light canvas ─────────────────────────────────────── */
  --color-light:      #F3F3F3;
  --color-light-2:    #E8EDF2;
  --color-light-line: #D8DEE4;

  /* Baby blue family. Lived inline in .light--blue; promoted to tokens so the
     section variant and the testimonial card cannot drift apart. */
  /* P03: the six baby-blue sections take an off-white surface instead.
     Backgrounds only — their hairlines, navy ink and accent are unchanged, so
     the sections keep their tone without the blue fill. --color-white-2 is the
     cells/hovers step; at #FEFEFE a lighter step would be invisible. */
  --color-white:      #FEFEFE;   /* section surface, was --color-baby */
  --color-white-2:    #F4F4F4;   /* cells, hovers, was --color-baby-2 */
  /* P18.3: the contact form's white variant. Every other light surface on the
     site derives from --color-light-2 (#E8EDF2) and --color-light-line
     (#D8DEE4), both of which are blue-grey — which is where the blue Rigon
     objected to actually came from. R = G = B on all five of these, so no hue
     can creep into this section whatever the theme does with the rest:
     "do not use baby blue. form is white, and bg is another nuance of whte,
     grayish." */
  --color-form-bg:         #F1F1F1;   /* the section: greyish white */
  --color-form-card:       #FFFFFF;   /* the form: white */
  --color-form-line:       #E4E4E4;   /* card edge and hairlines */
  --color-form-field:      #F5F5F5;   /* inputs, recessed inside the white card */
  --color-form-field-line: #C9C9C9;   /* and their edge, which has to be seen */
  /* P05: the Strategy Before Services cards. Pure #FFFFFF, not --color-white
     (#FEFEFE) — the design specifies white cards floating on the dark field,
     where P03's off-white was chosen for full-bleed section surfaces. The blue
     is the design's own, brighter than --accent, and is the step description
     and number ink. The card ink is the same value as --color-void. */
  --color-step-card:  #FFFFFF;
  --color-step-ink:   #090D11;
  --color-step-blue:  #38A1E5;
  --color-baby:       #E9F1FB;   /* surface */
  --color-baby-2:     #DCE9F8;   /* cells, hovers */
  --color-baby-card:  #E2EDFA;   /* testimonial card — client-chosen */
  --color-baby-line:  #C7DBF1;
  --color-baby-edge:  #AFCBE9;   /* card edge, reads on ivory */
  --color-baby-rule:  #CFE0F3;
  --color-baby-ink:   #0E2438;   /* deep navy, not near-black */
  --color-baby-mid:   #40566B;
  --color-baby-accent:#2A5C9E;
  --color-light-rule: #D5DCE3;

  /* ── Text ──────────────────────────────────────────────────────────────── */
  --color-hi:           #FFFFFF;   /* headlines */
  --color-mid:          #A8B4C0;   /* body */
  --color-low:          #6C7A88;   /* eyebrows, meta */
  --color-on-light-hi:  #101820;
  --color-on-light-mid: #4A5762;

  /* ── Type ──────────────────────────────────────────────────────────────── */
  --font-display: 'Poppins', system-ui, sans-serif;  /* 500 / 600 only */
  --font-body:    'Inter', system-ui, sans-serif;    /* 300 / 500 only */

  /* Hero is bottom-aligned inside 100svh. If this grows much past 6.4vw the
     stack overflows upward into the fixed nav — see .hero padding-top. */
  --text-hero:    clamp(2.2rem, 4.7vw, 4.9rem);
  --text-h1:      clamp(2rem, 4.3vw, 4.4rem);
  --text-h2:      clamp(1.8rem, 3.4vw, 3.4rem);
  --text-h3:      clamp(1.15rem, 1.6vw, 1.65rem);
  --text-lead:    clamp(1.05rem, 1.35vw, 1.375rem);
  --text-base:    clamp(.95rem, 1.05vw, 1.0625rem);
  --text-eyebrow: .688rem;

  --tracking-tight:   -0.032em;
  --tracking-eyebrow:  0.2em;

  /* ── Space ─────────────────────────────────────────────────────────────── */
  /* Four steps, used everywhere. Nothing in app.css invents its own spacing.
     section — between sections. The dominant rhythm of the page.
     block   — between a section's header and its content.
     card    — padding inside cards, stats, plans, facts.
     stack   — between eyebrow → heading → lead inside a section header. */
  /* --density is a live control (settings panel). All four scale together, so
     the page keeps its proportions at any density. 1 = default. */
  --density: 1;
  --spacing-gutter:  calc(clamp(1.5rem, 4.5vw, 5.5rem)  * var(--density));
  --spacing-section: calc(clamp(7.5rem, 16vh, 15rem)    * var(--density));
  --spacing-block:   calc(clamp(3.25rem, 7vh, 5.5rem)   * var(--density));
  --spacing-card:    calc(clamp(1.9rem, 3.2vw, 3rem)    * var(--density));
  --spacing-stack:   calc(clamp(1.9rem, 2.6vw, 2.6rem)  * var(--density));
  --container-page:  1560px;

  /* ── Motion ────────────────────────────────────────────────────────────── */
  --ease-brand:    cubic-bezier(.16, 1, .3, 1);
  --ease-io:       cubic-bezier(.65, .05, .36, 1);
  --duration-slow: 1100ms;
  --duration-mid:  520ms;
  --duration-page: 460ms;
  /* P05: the Figma states 300ms ease-out for the step-card lift. Short enough
     to feel like a response rather than an animation. */
  --duration-hover: 300ms;

  /* Live control. 10px is the reviewed default; 2px restores the original
     near-square build. Everything that rounds reads from this one value. */
  --radius-brand: 10px;
}

/* ───────────────────────────────────────────────────────────────────────────
   SEMANTIC ALIASES
   app.css is written against these short names, so swapping the accent is a
   one-line change that never touches a component. Keep this block in :root
   even after the port — Tailwind reads @theme, CSS reads these.
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  --accent:      var(--color-sky);
  --accent-deep: var(--color-sapphire);
  --accent-warm: var(--color-gold);      /* image grade only */

  --step-card:    var(--color-step-card);
  --step-ink:     var(--color-step-ink);
  --step-blue:    var(--color-step-blue);
  --x-void:       var(--color-void);
  --x-base:       var(--color-base);
  --x-raised:     var(--color-raised);
  --x-line:       var(--color-line);
  --x-line-soft:  var(--color-line-soft);
  --x-light:      var(--color-light);
  --x-light-line: var(--color-light-line);

  /* ── Testimonial band ──────────────────────────────────────────────────
     Inverted against the rest of the site: a deep card on a soft-white
     ground, rather than a white card on dark. Tokenised because the card
     colour is the one thing likely to be argued about — swap
     --q-surface to --color-sapphire or --color-lightblue and the ink,
     rules and arrows all follow. Never hardcode a hex in .quote again;
     that is precisely what made 13 sections unthemeable at v5.1. */
  /* #E2EDFA, chosen by the client. Against the ivory band (#F3F3F3) it
     separates at only 1.07:1 — the card edge is doing nearly all the work of
     defining the card, so --q-line stays at the stronger #AFCBE9 rather than the
     softer baby hairline. Do not lighten the border to match the surface. */
  --q-surface: var(--color-baby-card);       /* the card — baby blue */
  --q-ink:     var(--color-baby-ink);        /* card heading / pull quote */
  --q-mid:     var(--color-baby-mid);        /* quote body + attribution */
  --q-line:    var(--color-baby-edge);       /* hairlines */
  /* Card header and arrows both sit at the section's own ink rather than at
     brand blue. #101820 is the same near-black the section H2 already uses, so
     the band reads as one temperature: black type, blue card, ivory ground.
     Blue is left to do one job here — the card surface. */
  --q-pull:    var(--color-on-light-hi);     /* the pull reads as the header */
  --q-edge:    var(--color-baby-accent);     /* hover edge */

  /* Arrows keep the site-wide .btn MOTION — outlined at rest, panel wiping up
     from below on hover — but the fill is tokenised so the slider control can
     be pitched to its own band. Set to the card surface, so hovering an arrow
     previews the colour of the thing it scrolls to.
     Only the colour is local; the transform, duration and easing all still
     come from .btn. Change --q-btn-fill and the ink follows. */
  --q-btn-fill:     var(--color-baby-card);   /* matches the cards */
  --q-btn-fill-ink: var(--color-on-light-hi); /* ink ON that fill */
  --q-btn-fill-edge:var(--color-baby-edge);   /* keeps an edge once filled */
  --x-light-rule: var(--color-light-rule);

  --t-hi:  var(--color-hi);
  /* P02: label and icon colour ON a primary-filled button. Always white, in
     every theme and on every surface. Kept as its own token rather than reusing
     --t-hi so a future change to headline colour cannot silently repaint every
     primary button. */
  --t-on-accent: #FFFFFF;
  --t-mid: var(--color-mid);
  --t-low: var(--color-low);
  --t-on-light-hi:  var(--color-on-light-hi);
  --t-on-light-mid: var(--color-on-light-mid);

  --f-display: var(--font-display);
  --f-body:    var(--font-body);

  --fs-hero:    var(--text-hero);
  --fs-h1:      var(--text-h1);
  --fs-h2:      var(--text-h2);
  --fs-h3:      var(--text-h3);
  --fs-lead:    var(--text-lead);
  --fs-body:    var(--text-base);
  --fs-eyebrow: var(--text-eyebrow);

  --gutter:    var(--spacing-gutter);
  --section-y: var(--spacing-section);
  --block:     var(--spacing-block);
  --card:      var(--spacing-card);
  --stack:     var(--spacing-stack);
  --maxw:      var(--container-page);

  --ease:      var(--ease-brand);
  --ease-io2:  var(--ease-io);
  --dur:       var(--duration-slow);
  --dur-fast:  var(--duration-mid);
  --dur-page:  var(--duration-page);
  --dur-hover: var(--duration-hover);
  --radius:    var(--radius-brand);
}