/* Smart Home Life: tokens.css
   Source of truth: DESIGN_BRIEF.md sections 3, 4, 5, 10 (version 1, 2026-10-30).
   This is the only file allowed to contain a color literal. Components use var(--token) only.
   Custom properties are unprefixed. Classes elsewhere are prefixed .shl-.

   Allowed media widths (em, literal values; custom properties cannot be used in media queries):
     35em    (560px)
     56.25em (900px)
     68.75em (1100px)

   Allowed container widths on shl-nav (rem). Each is MEASURED (G11, tools/check-header.mjs) and dated:
     mark-only width : 22rem    (2026-10-30: mobile pill with the lockup needs 329.8px + 16px spare; below this the house mark alone)
     CTA label width : 44rem    (2026-10-30: desktop pill with "Get the App" is 682.7px + 16px spare; below this "Get App")
     collapse value  : 42.5rem  (2026-10-30: desktop pill with "Get App" is 656.4px + 16px spare; below this the mobile pill)
     theme-in-menu   : 17.5rem  (2026-10-30: mobile pill with the mark and the theme toggle is 278.4px; below this the toggle moves into the menu, which keeps 200% text on a 320px phone inside the pill)
     Same in Chromium 141 and WebKit 26, both themes. Re-measure when the nav labels, logo or CTA change.

   Block order matters to tools/check-contrast.mjs: the first :root block is the dark color set,
   the first :root[data-theme="light"] block is the light color set. Keep braces out of the comments in them.
*/

/* ---------------------------------------------------------------- 3a. Color: dark (default) */
:root {
  color-scheme: dark;

  --ground: oklch(0.175 0.014 232);        /* #0A1216 */
  --surface: oklch(0.215 0.016 232);       /* #121B20 */
  --raised: oklch(0.255 0.017 232);        /* #1B242A */
  --hair: oklch(0.34 0.016 232);           /* #303A3F */
  --hair-strong: oklch(0.42 0.016 232);    /* #454F54 */
  --edge-hi: oklch(0.44 0.012 232);        /* #4C5458 */
  --control-edge: oklch(0.54 0.016 232);   /* #667176 */

  --ink: oklch(0.925 0.022 92);            /* #EBE6D6 */
  --ink-2: oklch(0.80 0.018 92);           /* #C2BEB1 */
  --ink-3: oklch(0.68 0.016 92);           /* #9C988D */

  --accent: #F55139;
  --accent-ink: #F55139;
  --on-accent: #0A1216;
  --focus: var(--accent);
  --selection: color-mix(in oklab, var(--accent) 20%, var(--ground));   /* #342120 */

  --shadow: oklch(0.08 0.01 232 / 0.5);
  --pill-fill: color-mix(in oklch, var(--surface) 88%, transparent);
  --pill-blur: blur(20px);
  --link-underline-w: 2px;
}

/* ---------------------------------------------------------------- 3a. Color: light */
:root[data-theme="light"] {
  color-scheme: light;

  --ground: oklch(0.968 0.005 232);        /* #F1F5F7 */
  --surface: oklch(0.992 0.003 232);       /* #FAFDFE */
  --raised: oklch(0.94 0.007 232);         /* #E7ECEF */
  --hair: oklch(0.87 0.008 232);           /* #CFD5D9 */
  --hair-strong: oklch(0.76 0.010 232);    /* #ABB2B6 */
  --edge-hi: var(--hair);
  --control-edge: oklch(0.62 0.012 232);   /* #7F888C */

  --ink: oklch(0.215 0.016 232);           /* #121B20 */
  --ink-2: oklch(0.42 0.014 232);          /* #464F53 */
  --ink-3: oklch(0.50 0.012 232);          /* #5D6569 */

  --accent: #F55139;
  --accent-ink: oklch(0.53 0.17 33);       /* #B9381F */
  --on-accent: #0A1216;
  --focus: var(--accent-ink);
  --selection: color-mix(in oklab, var(--accent) 20%, var(--ground));   /* #F8D7D2 */

  --shadow: oklch(0.3 0.02 232 / 0.18);
  --pill-fill: color-mix(in oklch, var(--surface) 88%, transparent);
}

/* ---------------------------------------------------------------- Print: always the light block (2b.7) */
@media print {
  :root,
  :root[data-theme="light"] {
    color-scheme: light;

    --ground: oklch(0.968 0.005 232);        /* #F1F5F7 */
    --surface: oklch(0.992 0.003 232);       /* #FAFDFE */
    --raised: oklch(0.94 0.007 232);         /* #E7ECEF */
    --hair: oklch(0.87 0.008 232);           /* #CFD5D9 */
    --hair-strong: oklch(0.76 0.010 232);    /* #ABB2B6 */
    --edge-hi: var(--hair);
    --control-edge: oklch(0.62 0.012 232);   /* #7F888C */

    --ink: oklch(0.215 0.016 232);           /* #121B20 */
    --ink-2: oklch(0.42 0.014 232);          /* #464F53 */
    --ink-3: oklch(0.50 0.012 232);          /* #5D6569 */

    --accent: #F55139;
    --accent-ink: oklch(0.53 0.17 33);       /* #B9381F */
    --on-accent: #0A1216;
    --focus: var(--accent-ink);
    --selection: color-mix(in oklab, var(--accent) 20%, var(--ground));   /* #F8D7D2 */

    --shadow: oklch(0.3 0.02 232 / 0.18);
    --pill-fill: color-mix(in oklch, var(--surface) 88%, transparent);
  }
}

/* ---------------------------------------------------------------- 3c. Variants */
@media (prefers-contrast: more) {
  :root,
  :root[data-theme="light"] {
    --ink-2: var(--ink);
    --ink-3: var(--ink-2);
    --hair: var(--hair-strong);
    --pill-fill: var(--surface);
    --link-underline-w: 2px;
  }
}

@media (prefers-reduced-transparency: reduce) {
  :root,
  :root[data-theme="light"] {
    --pill-fill: var(--surface);
    --pill-blur: none;
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root,
  :root[data-theme="light"] {
    --pill-fill: var(--surface);
    --pill-blur: none;
  }
}

/* Component selectors for forced colors (CTA, icon buttons, segment track, summary rows, current nav item)
   live in the component CSS. Only the token-level switches are here. */
@media (forced-colors: active) {
  :root,
  :root[data-theme="light"] {
    --focus: Highlight;
    --forced-edge: 1px solid ButtonText;
  }
  img { forced-color-adjust: none; }
}

/* ---------------------------------------------------------------- 4b. Fonts (self-hosted, Latin subset) */
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/figtree-var-latin.woff2?v=20261114a") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212;
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/hanken-grotesk-700-latin.woff2?v=20261114a") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212;
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/hanken-grotesk-600-latin.woff2?v=20261114a") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212;
}

/* Fallback metric overrides. Safari honors size-adjust but not the ascent and descent overrides. */
@font-face {
  font-family: "Hanken Fallback";
  font-weight: 700;
  src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 95.36%;
  ascent-override: 104.87%;
  descent-override: 31.78%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Hanken Fallback";
  font-weight: 600;
  src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 94.90%;
  ascent-override: 105.38%;
  descent-override: 31.93%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Figtree Fallback";
  font-weight: 400 600;
  src: local("Arial"), local("ArialMT");
  size-adjust: 101.09%;
  ascent-override: 93.98%;
  descent-override: 24.73%;
  line-gap-override: 0%;
}

/* ---------------------------------------------------------------- 4c. Type */
:root {
  --font-display: "Hanken Grotesk", "Hanken Fallback", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Figtree", "Figtree Fallback", ui-sans-serif, system-ui, sans-serif;

  --fs-display: clamp(2.375rem, 1.35rem + 4.4vw, 5.25rem);
  --fs-display-2: clamp(2rem, 1.3rem + 3vw, 3.75rem);
  --fs-h1: clamp(2.125rem, 1.45rem + 2.8vw, 3.5rem);
  --fs-h2: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);
  --fs-h3: clamp(1.375rem, 1.25rem + 0.55vw, 1.625rem);
  --fs-lede: clamp(1.1875rem, 1.08rem + 0.45vw, 1.375rem);
  --fs-body-lg: 1.125rem;
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-caption: 0.875rem;

  --lh-display: 1.02;
  --lh-display-2: 1.05;
  --lh-h1: 1.06;
  --lh-h2: 1.1;
  --lh-h3: 1.25;
  --lh-lede: 1.5;
  --lh-body-lg: 1.5;
  --lh-body: 1.6;
  --lh-small: 1.5;
  --lh-caption: 1.45;

  --tr-display: -0.035em;
  --tr-display-2: -0.03em;
  --tr-h1: -0.03em;
  --tr-h2: -0.022em;
  --tr-h3: -0.012em;
  --tr-lede: -0.005em;
  --tr-caption: 0.005em;

  --fw-display: 700;   /* Hanken: display, display-2, h1, h2 */
  --fw-h3: 600;        /* Hanken: h3 */
  --fw-body: 400;      /* Figtree: never above 600 */
  --fw-medium: 500;
  --fw-strong: 600;
}

/* ---------------------------------------------------------------- 3c. Screenshot ground: the same in both themes
   App screenshots are dark objects in both themes (C8), so their loading fill and alt text use the dark values,
   never the theme's --surface (a white slab in light theme before a lazy image loads, review 2026-11-01). */
:root {
  --shot-ground: oklch(0.215 0.016 232);   /* #121B20, dark --surface */
  --shot-ink: oklch(0.68 0.016 92);        /* #9C988D, dark --ink-3: 5.9 on --shot-ground */
}

/* ---------------------------------------------------------------- 3d. Device bezels (C8, owner ruling 2026-11-11)
   A device does not change colour with the page, so the body, its seam and the hinge are the same in both themes.
   Only the rim changes: on the dark ground a near-black body needs a lighter edge to be seen, on the light ground
   the body itself is the edge. Sizes are fractions of the bezel's own width, set in site.css. */
:root {
  --bezel: oklch(0.13 0.008 232);              /* device body, a step under the dark --ground */
  --bezel-edge: oklch(0.30 0.012 232);         /* inner line where the body meets the glass */
  --bezel-seam: oklch(0.34 0.014 232);         /* the Duo spine where it shows in the body */
  --bezel-hinge: oklch(0.08 0.01 232 / 0.55);  /* the fold line across an open Duo screen */
  --bezel-hinge-soft: oklch(0.08 0.01 232 / 0.28);
  --bezel-rim: oklch(0.42 0.016 232);          /* same value as dark --hair-strong */
  --bezel-shadow: oklch(0.08 0.01 232 / 0.5);
}
:root[data-theme="light"] {
  --bezel-rim: oklch(0.30 0.012 232);
  --bezel-shadow: oklch(0.3 0.02 232 / 0.22);
}
@media print {
  :root, :root[data-theme="light"] { --bezel-rim: oklch(0.30 0.012 232); --bezel-shadow: oklch(0.3 0.02 232 / 0); }
}

/* ---------------------------------------------------------------- 5. Space, grid, z-index */
:root {
  /* widths */
  --wrap: 1200px;
  --wrap-wide: 1320px;   /* hero device stage and Compare table only */
  --gutter: clamp(16px, 4vw, 40px);   /* inline padding: max(var(--gutter), env(safe-area-inset-left or right)) */
  --col-gap: clamp(16px, 2.4vw, 32px);
  --measure: 38rem;
  --measure-lede: 34rem;
  --measure-tight: 26rem;

  /* spacing (extends the app's 4pt Space scale) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;
  --sec-chapter: clamp(80px, 10vw, 144px);
  --sec-standard: clamp(56px, 7vw, 104px);
  --sec-tight: clamp(32px, 4vw, 56px);

  /* header geometry */
  --nav-top: 10px;
  --nav-top-safe: max(var(--nav-top), env(safe-area-inset-top));   /* the pill's real top */
  --nav-h: 56px;
  --nav-clear: calc(var(--nav-top-safe) + var(--nav-h) + 10px);    /* 76px with no inset: sticky offsets */
  --anchor-offset: calc(var(--nav-top-safe) + var(--nav-h) + 16px);   /* 82px with no inset: scroll-padding, scroll-margin */
  --page-top: calc(var(--nav-clear) + clamp(32px, 6vw, 80px));

  /* targets and radii (radii are the app's Radius scale) */
  --target: 44px;
  --target-row: 48px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 22px;
  --r-pill: 999px;
  --qr: 120px;          /* C4 QR tile, quiet zone included */
  --phone-max: 360px;   /* C8 iPhone bezel width cap; the img/shots sizes assume it */
  --duo-outer-max: 260px;  /* Home 7: iPhone Duo closed, a narrower device than the iPhone */
  --duo-open-max: 380px;   /* Home 7: iPhone Duo open in portrait */

  /* z-index */
  --z-base: 0;
  --z-raise: 10;
  --z-nav: 50;
  --z-panel: 51;
  --z-skip: 60;
}

html {
  overflow-x: clip;
  scroll-padding-top: var(--anchor-offset);
}

/* ---------------------------------------------------------------- 10a. Motion */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);        /* enter, press, panels, hero screen wake */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);    /* in-place shape change: chevron, theme icon */
  --ease-color: ease;                                /* color, background, border, underline */
  --dur-instant: 0ms;      /* table row hover, focus ring, skip link, segment swap */
  --dur-press: 120ms;
  --dur-hover: 160ms;
  --dur-chrome: 200ms;     /* scrolled pill, chevron, theme icon */
  --dur-panel-in: 200ms;
  --dur-panel-out: 140ms;
  --dur-fold: 160ms;
  --dur-theme: 220ms;
  --dur-page: 180ms;       /* cross-page crossfade in; out is 120ms */
  --dur-hero: 360ms;
  --dur-target: 900ms;     /* :target tint fade, background only */
  --dur-reduced: 100ms;    /* cap for any fade under reduced motion */
}