/* ──────────────────────────────────────────────────────────────
   Stevek apps: design tokens ("Porch light")
   Shared by apps.stevek.com, the family status view and the
   sign-in surfaces. Load before components.css.

   Theme: follows the device (prefers-color-scheme). An app can
   force one with <html data-theme="light|dark">; any element can
   carry data-theme to force a theme for its subtree.
   Light values live once; dark values twice (media query + attr),
   because plain CSS cannot share one block between both selectors.
   ────────────────────────────────────────────────────────────── */

:root,
[data-theme="light"] {
  color-scheme: light;

  /* Surfaces */
  --bg: #f6f3ec;              /* page: warm paper, as stevek.com */
  --surface: #ffffff;         /* tiles, cards, header */
  --surface-sunken: #efebe2;  /* markers, wells, row hover */
  --border: #ddd5c6;          /* hairlines between surfaces */
  --border-strong: #8f8676;   /* control outlines, hover (3:1 on bg) */

  /* Text */
  --text: #16202c;            /* ink */
  --text-muted: #555e6a;      /* secondary text, AA on bg and surface */
  --text-on-accent: #ffffff;

  /* Brand */
  --accent: #0f4a8a;          /* stevek.com blue: buttons, links, icons */
  --accent-hover: #0b3a6e;
  --accent-soft: #e4ecf6;     /* icon chips, selected rows */
  --accent-text: #0f4a8a;     /* links and icon strokes */
  --glow: #e8962e;            /* porch light: the keyhole in the mark, never text */

  /* Status (text colour / soft fill). Always pair with an icon and words. */
  --ok: #1b6e40;
  --ok-soft: #e1f1e6;
  --warn: #8a5300;
  --warn-soft: #fbeed6;
  --down: #b42318;
  --down-soft: #fbe3df;

  /* App colours: one pair per family app, for its icon square.
     --app-X is the square, --app-X-ink the glyph on it (>= 4.5:1).
     Admin tiles have no pair: they use the neutral square. */
  --app-movies: #b23c1e;      --app-movies-ink: #ffffff;    /* terracotta */
  --app-photos: #975600;      --app-photos-ink: #ffffff;    /* ochre */
  --app-home: #1f6c46;        --app-home-ink: #ffffff;      /* pine */
  --app-requests: #6a43b5;    --app-requests-ink: #ffffff;  /* violet */
  --app-status: #0f6c75;      --app-status-ink: #ffffff;    /* teal */
  --app-internet: #2a5fb0;    --app-internet-ink: #ffffff;  /* blue (status row only) */

  /* Mark and the sign-in button (the button inverts the page) */
  --mark-fill: #0f4a8a;
  --mark-detail: #e8962e;
  --signin-bg: #0f4a8a;
  --signin-bg-hover: #0b3a6e;
  --signin-text: #ffffff;
  --signin-mark-fill: #f6f3ec;
  --signin-mark-detail: #e8962e;

  --focus: #0f4a8a;
  --shadow-tile: 0 1px 2px rgb(22 32 44 / 0.06);
  --shadow-tile-hover: 0 8px 20px rgb(22 32 44 / 0.10), 0 1px 2px rgb(22 32 44 / 0.06);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #14120f;
    --surface: #1f1c18;
    --surface-sunken: #2a2621;
    --border: #3a342c;
    --border-strong: #7d7466;
    --text: #f2ede4;
    --text-muted: #b5ac9d;
    --text-on-accent: #0c1a2c;
    --accent: #9cc3f0;
    --accent-hover: #bad6f6;
    --accent-soft: #1f2b3a;
    --accent-text: #a8cbf3;
    --glow: #f2a64a;
    --ok: #74d39c;
    --ok-soft: #17301f;
    --warn: #f2bd5c;
    --warn-soft: #36290f;
    --down: #ff9384;
    --down-soft: #3d1a15;
    /* Dark: one step lighter, so the square still reads on brown-black */
    --app-movies: #c04626;      --app-movies-ink: #ffffff;
    --app-photos: #a35e00;      --app-photos-ink: #ffffff;
    --app-home: #24774f;        --app-home-ink: #ffffff;
    --app-requests: #7450c4;    --app-requests-ink: #ffffff;
    --app-status: #137580;      --app-status-ink: #ffffff;
    --app-internet: #3368bd;    --app-internet-ink: #ffffff;
    --mark-fill: #f2ede4;
    --mark-detail: #e8962e;
    --signin-bg: #f2ede4;
    --signin-bg-hover: #ffffff;
    --signin-text: #16202c;
    --signin-mark-fill: #0f4a8a;
    --signin-mark-detail: #e8962e;
    --focus: #9cc3f0;
    --shadow-tile: none;
    --shadow-tile-hover: 0 8px 24px rgb(0 0 0 / 0.45);
  }
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #14120f;
  --surface: #1f1c18;
  --surface-sunken: #2a2621;
  --border: #3a342c;
  --border-strong: #7d7466;
  --text: #f2ede4;
  --text-muted: #b5ac9d;
  --text-on-accent: #0c1a2c;
  --accent: #9cc3f0;
  --accent-hover: #bad6f6;
  --accent-soft: #1f2b3a;
  --accent-text: #a8cbf3;
  --glow: #f2a64a;
  --ok: #74d39c;
  --ok-soft: #17301f;
  --warn: #f2bd5c;
  --warn-soft: #36290f;
  --down: #ff9384;
  --down-soft: #3d1a15;
  /* Dark: one step lighter, so the square still reads on brown-black */
  --app-movies: #c04626;      --app-movies-ink: #ffffff;
  --app-photos: #a35e00;      --app-photos-ink: #ffffff;
  --app-home: #24774f;        --app-home-ink: #ffffff;
  --app-requests: #7450c4;    --app-requests-ink: #ffffff;
  --app-status: #137580;      --app-status-ink: #ffffff;
  --app-internet: #3368bd;    --app-internet-ink: #ffffff;
  --mark-fill: #f2ede4;
  --mark-detail: #e8962e;
  --signin-bg: #f2ede4;
  --signin-bg-hover: #ffffff;
  --signin-text: #16202c;
  --signin-mark-fill: #0f4a8a;
  --signin-mark-detail: #e8962e;
  --focus: #9cc3f0;
  --shadow-tile: none;
  --shadow-tile-hover: 0 8px 24px rgb(0 0 0 / 0.45);
}

/* ── Theme-independent scales ─────────────────────────────── */
:root {
  /* Type: the system stack, Avenir Next first for stevek.com continuity */
  --font: "Avenir Next", "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont,
    Roboto, "Helvetica Neue", Arial, "Liberation Sans", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --text-xs: 0.8125rem;   /* 13px: markers, timestamps */
  --text-sm: 0.875rem;    /* 14px: secondary text */
  --text-md: 1rem;        /* 16px: body, never smaller for sentences */
  --text-lg: 1.125rem;    /* 18px: tile names */
  --text-xl: 1.375rem;    /* 22px: section headings, status summary */
  --text-2xl: 1.75rem;    /* 28px: page heading */
  --text-3xl: 2.25rem;    /* 36px: sign-in heading on large screens */
  --leading-tight: 1.2;
  --leading: 1.5;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-strong: 600;
  --weight-bold: 700;

  /* Spacing: 4px steps */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* Radii */
  --radius-sm: 6px;       /* markers, small controls */
  --radius-md: 10px;      /* buttons, icon chips, inputs */
  --radius-lg: 14px;      /* tiles, cards */
  --radius-pill: 999px;

  /* Sizes */
  --tap-min: 48px;        /* every control at least this tall */
  --header-h: 64px;
  --page-max: 1040px;
  --page-pad: var(--space-6);
  --tile-min: 176px;      /* grid column minimum: 2 columns on a 390px phone */
  --tile-min-h: 152px;
  --tile-row-min: 300px;  /* compact admin rows */
  --tile-icon: 48px;
  --tile-glyph: 26px;
  --avatar: 36px;

  /* Focus ring: 3px, offset, the accent colour (visible on every surface) */
  --focus-width: 3px;
  --focus-offset: 3px;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 140ms;
}

@media (max-width: 599px) {
  :root {
    --page-pad: var(--space-4);
    --tile-min: 150px;
    --tile-min-h: 136px;
    --text-2xl: 1.5rem;
  }
}