/* ==========================================================================
   Cryo Recovery — design tokens
   Sampled from the supplied logo artwork. Single source of truth.
   Never hard-code a hex value anywhere else in the theme.
   ========================================================================== */

:root {
  /* ---- brand palette ---- */
  --cryo-navy:        #041F41;   /* 40% of logo ink — primary */
  --cryo-navy-mid:    #0A3356;   /* 15% */
  --cryo-slate:       #2A6580;   /*  6% */
  --cryo-teal:        #159BAE;   /* 25% — accent */
  --cryo-teal-deep:   #107684;   /* derived, not sampled: --cryo-teal with hue and saturation
                                    held and lightness dropped 24%, until it is safe behind
                                    white text and safe as text on light. See table below. */
  --cryo-teal-light:  #84BFCA;   /* 11% */

  /* ---- surfaces ---- */
  --cryo-bg:          #FBFCFD;
  --cryo-bg-tint:     #E8EFF4;
  --cryo-bg-edge:     #C3D6E3;
  --cryo-white:       #FFFFFF;

  /* ---- text ----
     Contrast measured against --cryo-bg (WCAG 2.1):
       navy 16.00:1 · navy-mid 12.61:1 · slate 6.25:1   all pass body AA
       teal        3.23:1  large text only (24px+, or 18.66px+ bold)
       teal-deep   5.10:1  passes body AA — use this for teal-coloured text
       teal-light  1.99:1  decorative only, never text

     Behind WHITE text:
       teal        3.32:1  FAILS body AA — do not use as a button fill with small labels
       teal-deep   5.32:1  passes
       navy       16.44:1  passes

     So: --cryo-teal is for icons, rules, large display type and decoration.
         --cryo-teal-deep is for anything with small text on or in it. */
  --cryo-text:        var(--cryo-navy);
  --cryo-text-muted:  #4A6478;
  --cryo-text-invert: var(--cryo-white);
  --cryo-link:        var(--cryo-slate);
  --cryo-link-hover:  var(--cryo-navy);

  /* ---- lines and shadow ---- */
  --cryo-line:        #DBE3EA;
  --cryo-line-strong: #BACBD8;
  --cryo-shadow-sm:   0 1px 2px rgba(4, 31, 65, .06), 0 2px 8px rgba(4, 31, 65, .04);
  --cryo-shadow-md:   0 2px 6px rgba(4, 31, 65, .08), 0 12px 28px rgba(4, 31, 65, .07);

  /* ---- type ---- */
  --cryo-font-sans:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Display stack approximates the geometric sans of the wordmark. If a closer match is wanted,
     self-host Jost or Outfit into assets/fonts/ and prepend it here — do NOT link Google Fonts,
     see the note in inc/enqueue.php. */
  --cryo-font-display: "Jost", "Century Gothic", Futura, "Avenir Next", "Segoe UI", system-ui, sans-serif;

  --cryo-fs-xs:   0.8125rem;
  --cryo-fs-sm:   0.9375rem;
  --cryo-fs-base: 1.0625rem;
  --cryo-fs-lg:   clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --cryo-fs-h3:   clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --cryo-fs-h2:   clamp(1.625rem, 1.35rem + 1.2vw, 2.25rem);
  --cryo-fs-h1:   clamp(2.125rem, 1.6rem + 2.4vw, 3.25rem);

  --cryo-lh-tight: 1.18;
  --cryo-lh-snug:  1.35;
  --cryo-lh-base:  1.65;

  /* Wide tracking is the single most recognisable thing about the wordmark. */
  --cryo-track-wide: 0.18em;
  --cryo-track-mid:  0.06em;

  /* ---- space ---- */
  --cryo-s1: 0.5rem;
  --cryo-s2: 1rem;
  --cryo-s3: 1.5rem;
  --cryo-s4: 2.5rem;
  --cryo-s5: 4rem;
  --cryo-s6: 6rem;

  /* ---- shell ---- */
  --cryo-content: 40rem;   /* ~65ch measure */
  --cryo-wide:    73.75rem;
  --cryo-gutter:  clamp(1.25rem, 4vw, 2.5rem);

  --cryo-radius:    6px;
  --cryo-radius-lg: 14px;

  --cryo-focus: 3px solid var(--cryo-teal);
  --cryo-focus-offset: 2px;

  --cryo-ease: cubic-bezier(.2, .7, .3, 1);
  --cryo-dur:  180ms;
}

/* Honour the OS setting for reduced motion at the token level, so every transition that
   references --cryo-dur collapses at once rather than being patched component by component. */
@media (prefers-reduced-motion: reduce) {
  :root { --cryo-dur: 1ms; }
}