/* =========================================================================
   Open Home Device Database — Colors & Type tokens
   Direction: quiet, gridded, functional. "Less, but better."
   ========================================================================= */

/* Fonts:
   Inter Tight  — headings. One family, hierarchy via weight & size.
   Inter        — body, UI, controls.
   JetBrains Mono — code, IDs, hex values, raw protocol identifiers. */

/* Fonts loaded via Google Fonts in index.html (Inter Tight + Inter + JetBrains Mono) */

:root {
  /* ----------------------------------------------------------------------
     COLORS — Functional. Graphite ink on warm paper. One accent.
     Color is signal, not decoration.
     ---------------------------------------------------------------------- */

  /* Ink (graphite scale — replaces ha-blue as "primary") */
  --ink-50:  #f1f1ef;
  --ink-100: #d9d9d6;
  --ink-200: #b7b7b3;
  --ink-300: #8e8e89;
  --ink-400: #5e5e59;
  --ink-500: #2a2a27;   /* primary — graphite */
  --ink-600: #1d1d1b;
  --ink-700: #141413;
  --ink-800: #0c0c0b;
  --ink-900: #000000;

  --primary:        var(--ink-500);
  --primary-hover:  var(--ink-600);
  --primary-press:  var(--ink-700);
  --primary-soft:   var(--ink-50);

  /* Single accent — blue. Used for links (hover/active) and active/signal
     state. Do not use for general buttons or backgrounds. */
  --accent:        #1C6FD6;
  --accent-hover:  #1556AB;
  --accent-soft:   #e7f0fc;

  /* Neutrals — warm paper bias. Slight warmth in highlights, near-black ink. */
  --neutral-0:   #ffffff;
  --neutral-50:  #fafaf7;   /* paper */
  --neutral-100: #f1f0eb;
  --neutral-200: #e3e2dc;
  --neutral-300: #cac8c0;
  --neutral-400: #9b988f;
  --neutral-500: #6e6c64;
  --neutral-600: #4a4844;
  --neutral-700: #2e2d2a;
  --neutral-800: #1c1b1a;
  --neutral-900: #11100f;

  /* Surfaces — page is true white; sunken/section bands use warm paper. */
  --surface:           var(--neutral-0);
  --surface-sunken:    var(--neutral-50);
  --surface-raised:    var(--neutral-0);
  --surface-overlay:   var(--neutral-0);
  --surface-inverse:   var(--neutral-900);

  /* Tint ladder — used for hover, active, and inline backgrounds.
     Each step is a subtle shift away from the page color. These flip
     direction (lighter, not darker) in dark mode while keeping the
     visual hierarchy: soft → mid → strong. */
  --surface-tint-soft:   var(--neutral-50);   /* subtle hover, inline code, kbd */
  --surface-tint-mid:    var(--neutral-100);  /* active states, badges, placeholders */
  --surface-tint-strong: var(--neutral-200);  /* tonal button, raised tint */

  /* Foreground */
  --fg:           var(--neutral-900);
  --fg-strong:    #000;
  --fg-muted:     var(--neutral-600);
  --fg-subtle:    var(--neutral-500);
  --fg-disabled:  var(--neutral-400);
  --fg-inverse:   var(--neutral-0);
  --fg-on-primary: #ffffff;

  /* Borders — hairlines carry the weight. */
  --border:        var(--neutral-200);
  --border-strong: var(--neutral-300);
  --border-subtle: var(--neutral-100);
  --border-focus:  var(--ink-500);

  /* Links — quiet by default; hover & active take the accent. */
  --link:          var(--ink-600);
  --link-hover:    var(--accent);
  --link-visited:  var(--ink-500);
  --link-active:   var(--accent);

  /* Semantic — used sparingly. Success/warning sit close to neutral hue. */
  --success:       #3d6b3a;
  --success-soft:  #ecefe8;
  --success-strong:#28491f;

  --warning:       #a16207;
  --warning-soft:  #f5eedb;
  --warning-strong:#6b3f04;

  --error:         #a8261a;
  --error-soft:    #f6dedb;
  --error-strong:  #7a1b12;

  --info:          var(--ink-500);
  --info-soft:     var(--ink-50);
  --info-strong:   var(--ink-700);

  /* Trait/protocol chips — neutral by default. Use the dot for accent only. */
  --trait-zigbee:    var(--neutral-700);
  --trait-zwave:     var(--neutral-700);
  --trait-matter:    var(--neutral-700);
  --trait-wifi:      var(--neutral-700);
  --trait-bluetooth: var(--neutral-700);
  --trait-thread:    var(--neutral-700);
  --trait-local:     var(--neutral-700);
  --trait-cloud:     var(--neutral-500);

  /* ----------------------------------------------------------------------
     TYPE
     Inter Tight for headings, Inter for body. Hierarchy by weight + size.
     ---------------------------------------------------------------------- */
  --font-display:  "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-sans:     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:     "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale — modular ratio ~1.2 */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-38: 2.375rem;
  --fs-48: 3rem;

  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.55;
  --lh-loose:  1.7;

  --ls-tight:  -0.01em;
  --ls-normal: 0;
  --ls-wide:   0.04em;
  --ls-caps:   0.08em;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ----------------------------------------------------------------------
     SPACING — strict 4px grid; preferred increments are multiples of 8.
     ---------------------------------------------------------------------- */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   80px;
  --space-10:  96px;
  --space-11:  128px;
  --space-12:  160px;
  --space-13:  192px;

  /* Container padding — bumped ~1.5× from the prior 20/24 baseline. */
  --pad-card:    24px;
  --pad-section: 48px;

  /* RADIUS — 2px is the default. Larger sizes preserved for occasional use. */
  --radius-0:    0;
  --radius-1:    2px;
  --radius-2:    2px;   /* default on most controls */
  --radius-3:    2px;
  --radius-4:    4px;   /* images, larger surfaces */
  --radius-5:    8px;
  --radius-pill: 999px;

  /* SHADOW / ELEVATION — hairlines do the work. Only one elevation level. */
  --shadow-0: none;
  --shadow-1: 0 0 0 1px rgba(17, 16, 15, 0.06);
  --shadow-2: var(--shadow-1);
  --shadow-3: var(--shadow-1);
  --shadow-4: var(--shadow-1);
  --ring-focus: 0 0 0 2px var(--ink-500);

  /* Layout */
  --container-narrow: 720px;
  --container:        1080px;
  --container-wide:   1280px;
  --transition-fast:  120ms cubic-bezier(.2,.0,.2,1);
  --transition:       180ms cubic-bezier(.2,.0,.2,1);

  /* Nav background — solid, matches the page surface (no translucency). */
  --nav-bg: var(--surface);

  /* Tells the browser to render form controls, scrollbars, and built-in
     UI in the matching color scheme. */
  color-scheme: light;

  /* Scrim — single token for modal + bottom-sheet backdrops so they
     stay visually consistent. Flipped in the dark-mode block below. */
  --scrim: rgba(17, 22, 27, 0.55);
}

/* =========================================================================
   DARK MODE — applied when <html data-resolved-theme="dark">.

   A small boot script in <head> resolves the effective theme before paint:
     · explicit user choice ("light" / "dark") in localStorage, OR
     · OS preference via prefers-color-scheme as the default.
   It writes the result to `data-resolved-theme` on <html>. This lets the
   canvas sidebar override the OS preference for demo purposes while still
   defaulting to the user's system setting if nothing is chosen.

   Same warm-paper / graphite-ink character, inverted. The Braun-orange
   accent gets a small lift in lightness for legibility on dark.
   No new token names — every override targets a semantic token already
   in the system, so pages that use tokens correctly adapt automatically.
   ========================================================================= */
:root[data-resolved-theme="dark"] {
  color-scheme: dark;

  /* Surfaces — warm graphite, not pure black. Page is the darkest;
     sunken bands and raised cards step one shade lighter. */
  --surface:           var(--neutral-900);    /* page */
  --surface-sunken:    #181715;                /* between 800 and 900 */
  --surface-raised:    var(--neutral-800);     /* cards, popovers */
  --surface-overlay:   var(--neutral-800);
  --surface-inverse:   var(--neutral-50);

  /* Tint ladder — flipped: each step is lighter than the page, not darker. */
  --surface-tint-soft:   #1c1b19;
  --surface-tint-mid:    var(--neutral-800);
  --surface-tint-strong: var(--neutral-700);

  /* Foreground — warm paper inks on graphite. */
  --fg:           var(--neutral-100);
  --fg-strong:    var(--neutral-0);
  --fg-muted:     var(--neutral-400);
  --fg-subtle:    var(--neutral-500);
  --fg-disabled:  var(--neutral-600);
  --fg-inverse:   var(--neutral-900);
  --fg-on-primary: var(--neutral-900);          /* dark ink on light primary */

  /* Borders — dim warm hairlines that still read as a line. */
  --border:        var(--neutral-700);
  --border-strong: var(--neutral-600);
  --border-subtle: #232220;
  --border-focus:  var(--neutral-100);

  /* Primary — the "ink" button flips: paper-colored surface, ink text. */
  --primary:        var(--neutral-100);
  --primary-hover:  var(--neutral-0);
  --primary-press:  var(--neutral-50);
  --primary-soft:   #1f1e1c;

  /* Accent — blue, lifted in lightness so it reads cleanly on graphite. */
  --accent:        #5b9bf0;
  --accent-hover:  #7db0f5;
  --accent-soft:   #15273f;

  /* Links — quiet warm paper, accent on hover (same rule as light). */
  --link:          var(--neutral-100);
  --link-hover:    var(--accent);
  --link-visited:  var(--neutral-200);
  --link-active:   var(--accent);

  /* Semantic — brighter strong, much darker softs so text sits on them. */
  --success:       #7fb56e;
  --success-soft:  #1c2519;
  --success-strong:#b0d5a3;

  --warning:       #d8a73f;
  --warning-soft:  #2a2114;
  --warning-strong:#f0c970;

  --error:         #e57766;
  --error-soft:    #2f1814;
  --error-strong:  #f29b8b;

  --info:          var(--neutral-100);
  --info-soft:     #1f1e1c;
  --info-strong:   var(--neutral-0);

  /* Trait/protocol chips — neutral default, kept quiet on dark too. */
  --trait-zigbee:    var(--neutral-200);
  --trait-zwave:     var(--neutral-200);
  --trait-matter:    var(--neutral-200);
  --trait-wifi:      var(--neutral-200);
  --trait-bluetooth: var(--neutral-200);
  --trait-thread:    var(--neutral-200);
  --trait-local:     var(--neutral-200);
  --trait-cloud:     var(--neutral-400);

  /* Hairline shadow inverts — light edge on dark background. */
  --shadow-1: 0 0 0 1px rgba(255, 255, 255, 0.06);
  --shadow-2: var(--shadow-1);
  --shadow-3: var(--shadow-1);
  --shadow-4: var(--shadow-1);
  --ring-focus: 0 0 0 2px var(--neutral-100);

  /* Solid nav background, dark variant. */
  --nav-bg: var(--surface);

  /* Scrim — stronger on dark so the panel reads as lifted. */
  --scrim: rgba(0, 0, 0, 0.68);
}

/* =========================================================================
   HIGH CONTRAST — one switch, applied in both light and dark mode. Same
   token-override approach as dark mode: deepen the hairlines, pull muted text
   up to full ink, and thicken the focus ring. No new colors.
   ========================================================================= */
:root[data-contrast="high"] {
  --border:        var(--border-strong);
  --border-subtle: var(--border-strong);
  --fg-muted:      var(--fg);
  --fg-subtle:     var(--fg);
  --ring-focus:    0 0 0 3px var(--fg-strong);
}

/* =========================================================================
   REDUCE MOTION — user override of animation, independent of the OS media
   query. When on, collapse every animation and transition to near zero.
   ========================================================================= */
:root[data-reduce-motion="on"] *,
:root[data-reduce-motion="on"] *::before,
:root[data-reduce-motion="on"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

/* ----------------------------------------------------------------------
   Semantic type styles — hierarchy via weight + size, single family.
   ---------------------------------------------------------------------- */
html { color: var(--fg); background: var(--surface); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { font-size: var(--fs-16); line-height: var(--lh-normal); }

.h-display, h1.display { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-48); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.h1, h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-38); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); margin: 0; }
.h2, h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-30); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); margin: 0; }
.h3, h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-24); line-height: var(--lh-snug); margin: 0; }
.h4, h4 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-20); line-height: var(--lh-snug); margin: 0; }

.body-lg { font-size: var(--fs-18); line-height: var(--lh-loose); }
.body    { font-size: var(--fs-16); line-height: var(--lh-normal); }
.body-sm { font-size: var(--fs-14); line-height: var(--lh-normal); }
.caption { font-size: var(--fs-12); line-height: var(--lh-snug); color: var(--fg-muted); }
.meta    { font-size: var(--fs-13); line-height: var(--lh-snug); color: var(--fg-muted); }

.label   { font-size: var(--fs-13); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--fg-muted); }
.eyebrow { font-size: var(--fs-12); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--fg-muted); }

code, .mono { font-family: var(--font-mono); font-size: 0.92em; }
kbd { font-family: var(--font-mono); font-size: 0.85em; padding: 2px 6px; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: var(--radius-1); background: var(--surface-sunken); }

a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; text-decoration-color: var(--border-strong); }
a:visited { color: var(--link-visited); }
a:hover { color: var(--link-hover); text-decoration-color: currentColor; }

hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-6) 0; }