/* ============================================================================
   Kery design tokens
   Derived from Kery Solutions Brand Guide v1.1. The brand PDF is the source of
   truth; see references/brand-guide.md. Where this file and the guide disagree,
   the guide wins and this file is the thing to fix.

   LIGHT ONLY. Kery does not ship a dark mode. The brand is built on clarity and
   brightness, and RUNAWAY has confirmed that light-only is a deliberate brand
   decision, not a gap. Do not add a dark theme, a prefers-color-scheme block, or
   a theme toggle. See "Locking the light theme" below.

   Drop this in whole. Use the semantic tokens (--surface, --text, --accent) in
   component CSS rather than the raw brand values.
   ========================================================================= */

:root {
  /* Tell the UA this page is light. Without it, a viewer in dark mode gets
     dark-ified form controls, scrollbars, and canvas against our light
     surfaces. This is what makes "light only" actually hold. */
  color-scheme: light;

  /* --- Raw brand palette. Never edit these. ------------------------------ */
  --kery-ember:    #F25811;
  --kery-terra:    #99330C;
  --kery-graphite: #222222;
  --kery-stone:    #ECECEC;
  --kery-stone-1:  #F1F2F2;
  --kery-stone-2:  #DFDFDF;
  --kery-stone-3:  #A9A9A8;
  --kery-stone-4:  #666666;
  --kery-white:    #FFFFFF;

  /* Secondary palette: six hues, three tones. Tone 1 darkest, 3 lightest.
     Mix only within a hue (tone-on-tone). Never across hues. */
  --kery-verdant-1: #03684B;  --kery-verdant-2: #428E67;  --kery-verdant-3: #B3D1B7;
  --kery-blue-1:    #1F4690;  --kery-blue-2:    #4877B0;  --kery-blue-3:    #ADC7DE;
  --kery-purple-1:  #3C3276;  --kery-purple-2:  #6262B0;  --kery-purple-3:  #AEADDE;
  --kery-violet-1:  #621D6E;  --kery-violet-2:  #9A3CA9;  --kery-violet-3:  #E09BE9;
  --kery-red-1:     #7E0D01;  --kery-red-2:     #B51917;  --kery-red-3:     #FF857D;
  --kery-yellow-1:  #CC8C19;  --kery-yellow-2:  #FFBD3B;  --kery-yellow-3:  #FFE6A6;

  /* --- Surfaces ---------------------------------------------------------- */
  --surface:        var(--kery-white);
  --surface-sunken: var(--kery-stone);     /* page and panel backgrounds */
  --surface-raised: var(--kery-white);     /* cards */
  --surface-header: var(--kery-stone-1);   /* card and table headers */

  /* --- Text --------------------------------------------------------------
     Per the brand guide's neutral palette: Graphite is primary text, Stone-4
     is secondary text, Stone-3 is muted labels. */
  --text:           var(--kery-graphite);
  --text-secondary: var(--kery-stone-4);
  --text-muted:     var(--kery-stone-3);
  --text-on-accent: var(--kery-white);     /* guide: white on Ember, Terra, and tone-1 darks */

  /* --- Lines -------------------------------------------------------------
     Guide: Stone-2 is "dividers, borders". */
  --border:         var(--kery-stone-2);
  --border-subtle:  rgba(34, 34, 34, 0.08);
  --hover-tint:     rgba(34, 34, 34, 0.04);

  /* --- Accent ------------------------------------------------------------
     Guide: Ember is the primary brand orange for CTAs, accents, and focus
     rings. Terra is the dark red-brown for danger states and gradients. */
  --accent:         var(--kery-ember);
  --accent-hover:   var(--kery-terra);
  --accent-tint:    rgba(242, 88, 17, 0.08);
  --focus-ring:     rgba(242, 88, 17, 0.18);

  /* --- Status / secondary accents (digital) ------------------------------
     Straight from the guide's UI token block. */
  --status-success: #1D8468;               /* guide's digital success green */
  /* FLAG (carried from the brand guide): --status-success #1D8468 matches
     neither PDF Verdant-1 (#03684B) nor Verdant-2 (#428E67). Confirm with
     RUNAWAY whether the UI success green should be retuned to a PDF tone. */
  --status-info:    var(--kery-blue-1);    /* guide: Info (Blue-1) */
  --status-accent:  var(--kery-violet-2);  /* guide: Accent (Violet-2) */
  --status-danger:  var(--kery-terra);     /* guide: Terra is danger states */
  --status-warning: var(--kery-yellow-1);

  /* --- Typography -------------------------------------------------------- */
  --font: "TT Firs Text", "Segoe UI", Arial, sans-serif;

  /* Brand type scale in pt, for print and documents. */
  --h1: 92pt;  --h2: 64pt;  --h3: 48pt;  --h4: 36pt;  --h5: 30pt;  --h6: 24pt;
  --subtitle-1: 20pt; --subtitle-2: 18pt;
  --body-1: 16pt; --body-2: 14pt; --caption: 12pt;

  /* Screen scale in rem. The print scale is built for A4 and is far too large
     for a viewport; these are the same hierarchy retuned for screen. */
  --screen-h1: 3.0rem;   --screen-h2: 2.25rem;  --screen-h3: 1.75rem;
  --screen-h4: 1.375rem; --screen-h5: 1.125rem; --screen-h6: 1rem;
  --screen-body: 1rem;   --screen-small: 0.875rem; --screen-caption: 0.75rem;

  --lh-tight: 1.15;  --lh-heading: 1.3;  --lh-body: 1.5;
  --ls-tight: -0.02em; --ls-snug: -0.01em; --ls-normal: 0;

  /* --- Space, radius, elevation ------------------------------------------ */
  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem;  --space-6: 2rem;    --space-8: 3rem;    --space-10: 4rem;

  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-pill: 100px;

  --shadow-sm: 0 1px 2px rgba(34, 34, 34, 0.06);
  --shadow-md: 0 2px 8px rgba(34, 34, 34, 0.08);
  --shadow-lg: 0 8px 24px rgba(34, 34, 34, 0.12);
}

/* ============================================================================
   Locking the light theme

   A published artifact renders inside a viewer that may be set to dark. Kery is
   light only, so the page commits to a single look rather than styling both.
   `color-scheme: light` above handles UA-drawn chrome. These two rules make
   sure the page's own ground and text never inherit a dark default.

   Do NOT add a `prefers-color-scheme: dark` block to "be polite" to dark-mode
   users. Committing to one look is the deliberate choice; a half-applied dark
   theme is what actually produces unreadable pages.
   ========================================================================= */

html { background: var(--surface); }

body {
  font-family: var(--font);
  font-weight: 400;
  font-size: var(--screen-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--surface);
}

/* ============================================================================
   Base
   ========================================================================= */

h1, h2, h3, h4, h5, h6 {
  font-weight: 500;          /* TT Firs Medium is the brand default weight */
  line-height: var(--lh-heading);
  color: var(--text);
}

h1 { font-size: var(--screen-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
h2 { font-size: var(--screen-h2); letter-spacing: var(--ls-snug); }
h3 { font-size: var(--screen-h3); letter-spacing: var(--ls-snug); }
h4 { font-size: var(--screen-h4); }
h5 { font-size: var(--screen-h5); }
h6 { font-size: var(--screen-h6); }

strong, b {
  /* Only Medium (500) and Regular (400) ship. The default 700 makes the browser synthesise a
     smeared fake bold, which is very visible in a PDF. Do not remove this. */
  font-weight: 500;
}

a { color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--focus-ring);
}

/* Headings are sentence case. This is a brand rule, not a preference; it is
   enforced in the markup, not here, because text-transform cannot know which
   words are proper nouns. */