/* ============================================================
   Heirloom design tokens — canonical source.
   Every color, size and font in the product comes from here.
   Do not hardcode a hex value anywhere else.

   Light is the base. Dark redefines tokens only. The three-state
   pattern below matters: a viewer's OS may be dark while they have
   explicitly chosen light, so the media query is guarded.
   ============================================================ */

:root {
  /* --- Brand ------------------------------------------------ */
  --spruce:        #17332B;  /* anchor: headers, dark panels, primary buttons */
  --spruce-deep:   #0E211B;  /* pressed / hover on spruce */
  --lowsun:        #E8A94F;  /* accent ON DARK only */
  --lowsun-press:  #D9973C;
  --lowsun-deep:   #8F5A1C;  /* accent ON LIGHT: AA-compliant at label sizes (5.06:1 on --ground) */
  --water:         #3E6B70;  /* secondary: links, the mark's second line */

  /* --- Surfaces --------------------------------------------- */
  --ground:        #EEF1EE;  /* page background. Green-biased grey, never cream. */
  --surface:       #FFFFFF;
  --surface-sunk:  #E4E9E4;
  --rule:          #CFD8D1;
  --rule-soft:     #DFE5E0;

  /* --- Text ------------------------------------------------- */
  --ink:           #1B2420;  /* body. 13.4:1 on --ground */
  --ink-soft:      #3E4A44;
  --ink-muted:     #55635C;
  --ink-faint:     #7B8880;  /* decorative only, never body copy */
  --on-dark:       #EEF1EE;
  --on-dark-soft:  #B7C6BC;  /* 7.7:1 on --spruce */
  --on-dark-faint: #8FA298;  /* 5.1:1 on --spruce. Floor for text on dark. */

  /* --- Semantic. Separate from the accent. Never use --lowsun for state. --- */
  --state-confirmed: #2E6B4F;
  --state-pending:   #8F5A1C;
  --state-family:    #3E6B70;
  --state-attention: #A33A28;
  --state-confirmed-bg: #DEEBE2;
  --state-pending-bg:   #F7E6D6;
  --state-family-bg:    #DCE8EF;
  --state-attention-bg: #F6E2DE;

  /* --- Type ------------------------------------------------- */
  --font-display: Petrona, Georgia, "Times New Roman", serif;
  --font-body:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  --size-house:    2.5rem;   /* 40px — house names */
  --size-title:    1.75rem;  /* 28px — page titles */
  --size-heading:  1.125rem; /* 18px — section heads */
  --size-body:     1.0625rem;/* 17px — body. NEVER below 1rem/16px anywhere. */
  --size-body-min: 1rem;     /* 16px — hard floor */
  --size-label:    0.71875rem;/* 11.5px — uppercase mono labels ONLY */
  --size-data:     0.875rem; /* 14px — mono figures */

  --leading-tight: 1.15;
  --leading-head:  1.25;
  --leading-body:  1.6;
  --track-tight:  -0.015em;
  --track-label:   0.1em;

  /* --- Space & shape ---------------------------------------- */
  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;    --space-5: 1.5rem;  --space-6: 2rem;
  --space-7: 3rem;    --space-8: 4rem;    --space-9: 6rem;

  --radius-sm: 2px;
  --radius:    8px;
  --radius-lg: 12px;

  --tap-min: 44px;   /* minimum touch target. Calendar day cells included. */
  --measure: 66ch;   /* max width for running text */

  --shadow: 0 1px 2px rgba(23,51,43,.06), 0 6px 20px rgba(23,51,43,.05);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --spruce:        #CFE0D6;
    --spruce-deep:   #E4EAE5;
    --lowsun:        #E8A94F;
    --lowsun-deep:   #E8A94F;
    --water:         #7FB3B6;

    --ground:        #101815;
    --surface:       #18211D;
    --surface-sunk:  #131C18;
    --rule:          #2C3934;
    --rule-soft:     #232E29;

    --ink:           #E4EAE5;
    --ink-soft:      #C2CDC7;
    --ink-muted:     #A6B2AB;
    --ink-faint:     #7E8B84;

    --state-confirmed: #7CC49B;
    --state-pending:   #E0A063;
    --state-family:    #7FB3B6;
    --state-attention: #E08B78;
    --state-confirmed-bg: #1A2B22;
    --state-pending-bg:   #2C211A;
    --state-family-bg:    #1A252D;
    --state-attention-bg: #2E1E1A;

    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25);
  }
}

:root[data-theme="dark"] {
  --spruce:        #CFE0D6;
  --spruce-deep:   #E4EAE5;
  --lowsun:        #E8A94F;
  --lowsun-deep:   #E8A94F;
  --water:         #7FB3B6;

  --ground:        #101815;
  --surface:       #18211D;
  --surface-sunk:  #131C18;
  --rule:          #2C3934;
  --rule-soft:     #232E29;

  --ink:           #E4EAE5;
  --ink-soft:      #C2CDC7;
  --ink-muted:     #A6B2AB;
  --ink-faint:     #7E8B84;

  --state-confirmed: #7CC49B;
  --state-pending:   #E0A063;
  --state-family:    #7FB3B6;
  --state-attention: #E08B78;
  --state-confirmed-bg: #1A2B22;
  --state-pending-bg:   #2C211A;
  --state-family-bg:    #1A252D;
  --state-attention-bg: #2E1E1A;

  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25);
}

/* ============================================================
   Per-house palettes.

   An owner picks ONE of these six. It swaps the accent and a faint
   background tint and NOTHING ELSE — text colors, contrast ratios
   and semantic colors are fixed, which is what makes it safe to
   hand out. No color picker. No CSS field. Ever.

   Applied as <html data-house-palette="dusk">.
   ============================================================ */

[data-house-palette="golden"] { --house-accent: #E8A94F; --house-accent-deep: #8F5A1C; --house-dark: #17332B; --house-tint: #EEF1EE; }
[data-house-palette="dusk"]   { --house-accent: #C4643F; --house-accent-deep: #8A3F22; --house-dark: #2A2130; --house-tint: #F1EDEC; }
[data-house-palette="harbor"] { --house-accent: #3E6B70; --house-accent-deep: #2A4A4E; --house-dark: #132B33; --house-tint: #ECF0F1; }
[data-house-palette="pine"]   { --house-accent: #6E8B4A; --house-accent-deep: #4A6030; --house-dark: #1A2A1B; --house-tint: #EEF1EA; }
[data-house-palette="fog"]    { --house-accent: #8A8F93; --house-accent-deep: #55595C; --house-dark: #242A2E; --house-tint: #F0F1F2; }
[data-house-palette="ember"]  { --house-accent: #A8452F; --house-accent-deep: #7A2E1D; --house-dark: #2A1A16; --house-tint: #F2EDEB; }

/* Default so a house with no palette set still renders. */
:root { --house-accent: #E8A94F; --house-accent-deep: #8F5A1C; --house-dark: #17332B; --house-tint: #EEF1EE; }

/* ============================================================
   Base rules that are part of the system, not decoration.
   ============================================================ */

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--leading-body);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

h1, h2, .house-name { font-family: var(--font-display); letter-spacing: var(--track-tight); text-wrap: balance; }

.label {
  font-family: var(--font-mono);
  font-size: var(--size-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--lowsun-deep);
}

.data { font-family: var(--font-mono); font-size: var(--size-data); font-variant-numeric: tabular-nums; }

/* Every interactive element clears the tap floor. */
button, a.btn, [role="button"], .tappable { min-height: var(--tap-min); }

:focus-visible { outline: 2px solid var(--water); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}