/* Hyke Studio — the brand token stylesheet, copied verbatim from the brand package's tokens.css, plus the one token the
 * approved designs add to it: --hs-hitchhyke, the parent brand's green.
 *
 * Linked from exactly two base templates — the public site's `_base.html` (every public and
 * documentation page) and Section 31's admin base — and redeclared nowhere else. Light is the
 * default everywhere (plan Decision 278): the dark values below apply only under an explicit
 * `html[data-theme="dark"]`, which a page carries only when the person picked Dark (or Device, on a
 * dark device) on its Light / Dark / Device switch (Decision 387). Nothing here follows the device's
 * own setting.
 *
 * Owning section(s): §35
 */

/* Hyke Studio — colour tokens
   Full specification: hyke-studio-brand.md
   Every ratio below is measured against that token's own background.
   Amber is the only token that keeps the same hex in both themes. */

:root {
  /* ground */
  --hs-ground:        #F3F0E9;  /* floor, top */
  --hs-ground-deep:   #D2CCBD;  /* floor, front edge */
  --hs-surface:       #FFFDF8;  /* cards, the bench */
  --hs-surface-sunk:  #F5F1E7;  /* field fills, inset panels */
  --hs-line:          #E3DFD4;  /* hairlines */

  /* ink */
  --hs-ink:           #16150F;  /* headings            17.9:1 */
  --hs-ink-body:      #3A382F;  /* body                11.5:1 */
  --hs-ink-muted:     #66625A;  /* captions, labels     5.9:1 */

  /* identity and action */
  --hs-amber:         #E09A12;  /* FILLS AND RINGS ONLY 2.3:1 */
  --hs-amber-ink:     #8A6209;  /* amber as text        5.4:1 */
  --hs-action:        #1A1917;  /* primary button      17.2:1 */
  --hs-on-action:     #FFFDF8;
  --hs-good:          #2E7D4F;  /*                      4.9:1 */
  --hs-bad:           #B3291C;  /*                      6.3:1 */

  /* type */
  --hs-font-sans: 'Archivo', system-ui, sans-serif;
  --hs-font-mono: 'Azeret Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* shape */
  --hs-r-chip:   5px;
  --hs-r-field:  7px;
  --hs-r-button: 9px;
  --hs-r-tile:  12px;
  --hs-r-card:  15px;

  --hs-lift: 0 22px 44px -22px rgba(52, 44, 26, 0.45);

  /* the parent brand: the "by Hitchhyke" lock-up's green, as the approved designs declare it (not in the brand package) */
  --hs-hitchhyke:       #007749;
}

html[data-theme="dark"] {
  --hs-ground:        #121110;  /* ceiling */
  --hs-ground-lit:    #262319;  /* the lit horizon */
  --hs-surface:       #1E1C17;
  --hs-surface-sunk:  #16140F;
  --hs-line:          #333028;

  --hs-ink:           #FBF8EF;  /*                    16.0:1 */
  --hs-ink-body:      #DCD7C9;  /*                    11.8:1 */
  --hs-ink-muted:     #A39D8C;  /*                     6.3:1 */

  --hs-amber:         #E09A12;  /* text-safe on dark   7.1:1 */
  --hs-action:        #F7F3E8;  /*                    15.4:1 */
  --hs-on-action:     #17160F;
  --hs-good:          #5FBF85;  /*                     7.5:1 */
  --hs-bad:           #F0776B;  /*                     6.1:1 */

  --hs-lift: 0 22px 48px -20px rgba(0, 0, 0, 0.75);

  --hs-hitchhyke:       #2FB980;
}

/* The floor. Light and dark are the same room, lit differently. */
.hs-floor {
  background-color: #EDE9E0;
  background-image:
    radial-gradient(130% 78% at 50% 28%,
      rgba(255,253,247,0.98) 0%, rgba(255,253,247,0.35) 46%, rgba(255,253,247,0) 68%),
    linear-gradient(180deg, #F3F0E9 0%, #EFEBE3 48%, #E6E1D5 60%, #D2CCBD 100%);
}

html[data-theme="dark"] .hs-floor {
  background-color: #1B1915;
  background-image:
    radial-gradient(128% 76% at 50% 26%,
      rgba(102,92,70,0.55) 0%, rgba(102,92,70,0.16) 44%, rgba(102,92,70,0) 66%),
    linear-gradient(180deg, #121110 0%, #1B1915 44%, #262319 58%, #0D0C0A 100%);
}