/* =============================================================================
   Theme variables (§2.4). One attribute — data-theme on <body> — switches the
   whole palette. All colors are OKLCH.

   World: Swiss typographic. White paper, black ink, greys for what is secondary,
   and ONE red: the place you are and the thing that needs you. Structure comes
   from type size, weight and rules — never from cards, fills or shadows.
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/archivo-latin-ext.c5e41aa17045.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/archivo-latin.cd56e2ec63d7.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

:root {
  /* spacing rhythm — one scale for the whole app */
  --hh-space-1: 0.25rem;
  --hh-space-2: 0.5rem;
  --hh-space-3: 0.75rem;
  --hh-space-4: 1rem;
  --hh-space-5: 1.5rem;
  --hh-space-6: 2rem;
  --hh-space-8: 3rem;
  --hh-space-12: 5rem;

  /* the type ladder — five steps, nothing outside it */
  --hh-fs-1: 0.75rem;                          /* 12 · captions, column heads   */
  --hh-fs-2: 0.875rem;                         /* 14 · body, controls          */
  --hh-fs-3: 1.125rem;                         /* 18 · section titles, names   */
  --hh-fs-4: 1.75rem;                          /* 28 · page titles             */
  --hh-fs-5: clamp(2.75rem, 1.6rem + 4.2vw, 4rem); /* 44–64 · the one figure  */

  /* chrome metrics — the navbar is on every page, so its height is a token.
     --hh-main-fill is what a full-height page inside .hh-main may occupy once the
     navbar and .hh-main's own padding are taken off: use it instead of 100dvh. */
  --hh-nav-h: 56px;
  --hh-main-fill: calc(100dvh - var(--hh-nav-h) - var(--hh-space-6) - var(--hh-space-12));
  --hh-measure: 1200px;

  /* square corners: the page is cut, not moulded */
  --hh-radius-sm: 0;
  --hh-radius: 0;
  --hh-radius-lg: 0;
  --hh-radius-pill: 999px;

  /* rules: the only structural device */
  --hh-rule-heavy: 2px;
  --hh-rule: 1px;

  /* type */
  --hh-font-sans: "Archivo", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --hh-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* semantic z-index scale — never arbitrary 999s */
  --hh-z-dropdown: 1000;
  --hh-z-sticky: 1100;
  --hh-z-modal-backdrop: 1200;
  --hh-z-modal: 1300;
  --hh-z-toast: 1400;
  --hh-z-tooltip: 1500;

  /* motion — short, ease-out, no bounce */
  --hh-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --hh-dur-fast: 0.12s;
  --hh-dur: 0.2s;

  /* ===== THE BRAND SWAP POINT =====================================
     Rebrand any project built on this base by changing these two
     values. The signal ramp (active place, what needs you, the one
     primary call, selection) derives from this hue + chroma in both
     themes. HomeHub: Swiss red (h 27). Examples:
       blue h 255 · green h 150 · orange h 50
     ================================================================ */
  --hh-accent-h: 27;
  --hh-accent-c: 0.215;
}

/* ---- Light (default): white paper, black ink ---- */
:root,
[data-theme="light"] {
  color-scheme: light;

  --hh-bg: oklch(1 0 0);
  --hh-surface: oklch(1 0 0);
  --hh-surface-2: oklch(0.972 0 0);        /* hover, quiet fill */
  --hh-surface-3: oklch(0.935 0 0);
  --hh-border: oklch(0.885 0 0);           /* hairline between rows */
  --hh-border-strong: oklch(0.72 0 0);     /* input outlines */
  --hh-rule-color: oklch(0.17 0 0);        /* the heavy rule that opens a section */

  --hh-ink: oklch(0.17 0 0);               /* primary text */
  --hh-ink-soft: oklch(0.40 0 0);          /* secondary text — ~9:1 */
  --hh-muted: oklch(0.52 0 0);             /* tertiary/placeholder — ≥4.6:1 */

  /* signal ramp — derived from the seed above */
  --hh-accent:        oklch(0.575 var(--hh-accent-c) var(--hh-accent-h)); /* red text ≥4.6:1 */
  --hh-accent-strong: oklch(0.52 var(--hh-accent-c) var(--hh-accent-h));
  --hh-accent-soft:   oklch(0.955 0.025 var(--hh-accent-h));
  --hh-accent-ink:    oklch(1 0 0);
  --hh-accent-line:   var(--hh-accent);

  /* the primary button is ink, not red: red is reserved for signal */
  --hh-primary: var(--hh-ink);
  --hh-primary-hover: oklch(0.32 0 0);
  --hh-primary-ink: oklch(1 0 0);

  --hh-danger: oklch(0.52 0.2 27);
  --hh-danger-soft: oklch(0.96 0.02 27);
  --hh-danger-ink: oklch(1 0 0);
  --hh-success: oklch(0.48 0.11 150);
  --hh-warning: oklch(0.62 0.13 70);

  --hh-shadow-sm: none;
  --hh-shadow: 0 2px 8px oklch(0 0 0 / 0.08);
  --hh-shadow-lg: 0 12px 32px oklch(0 0 0 / 0.14);

  --hh-overlay: oklch(0.17 0 0 / 0.38);
}

/* ---- Dark: the same sheet, inverted ---- */
[data-theme="dark"] {
  color-scheme: dark;

  --hh-bg: oklch(0.165 0 0);
  --hh-surface: oklch(0.165 0 0);
  --hh-surface-2: oklch(0.205 0 0);
  --hh-surface-3: oklch(0.25 0 0);
  --hh-border: oklch(0.29 0 0);
  --hh-border-strong: oklch(0.45 0 0);
  --hh-rule-color: oklch(0.94 0 0);

  --hh-ink: oklch(0.95 0 0);
  --hh-ink-soft: oklch(0.79 0 0);
  --hh-muted: oklch(0.66 0 0);

  --hh-accent:        oklch(0.68 0.19 var(--hh-accent-h));
  --hh-accent-strong: oklch(0.72 0.17 var(--hh-accent-h));
  --hh-accent-soft:   oklch(0.27 0.06 var(--hh-accent-h));
  --hh-accent-ink:    oklch(0.165 0 0);
  --hh-accent-line:   var(--hh-accent);

  --hh-primary: var(--hh-ink);
  --hh-primary-hover: oklch(0.82 0 0);
  --hh-primary-ink: oklch(0.165 0 0);

  --hh-danger: oklch(0.68 0.18 27);
  --hh-danger-soft: oklch(0.27 0.06 27);
  --hh-danger-ink: oklch(0.165 0 0);
  --hh-success: oklch(0.72 0.12 150);
  --hh-warning: oklch(0.78 0.12 75);

  --hh-shadow-sm: none;
  --hh-shadow: 0 2px 10px oklch(0 0 0 / 0.5);
  --hh-shadow-lg: 0 14px 40px oklch(0 0 0 / 0.6);

  --hh-overlay: oklch(0 0 0 / 0.6);
}