/* benning.vip — one design system, shared by every page.
 *
 * Before this file each page carried its own copy of the palette, and the copies
 * had drifted: five slightly different greens, two different sets of token names,
 * and a camera page on a dark theme of its own that shared nothing with the rest.
 * Everything visual now starts here, and a page only says how it differs.
 *
 * How a page uses it:
 *   <link rel="stylesheet" href="/css/app.css">
 * and then maps its own long-standing token names onto these, e.g.
 *   :root{ --acc: var(--bv-brand); --bg: var(--bv-bg); ... }
 * so the page's existing CSS keeps working and simply changes colour.
 *
 * Dark pages (the cameras, the sign-in card) add class="night" to <html> or to a
 * wrapper. That re-points the same token names at the dark end of the same scale,
 * so "dark" is this system at night rather than a second design.
 *
 * Rules this file keeps to:
 *   - One brand hue (170°). Light #0a7d6a, night #3fc8aa: the same colour, lit
 *     differently. Every contrast pairing below was measured, not eyeballed.
 *   - Only transform and opacity are animated.
 *   - Every interactive thing has hover, focus-visible and active states.
 *   - No CDN, no external font: the Content-Security-Policy forbids both.
 */

/* ── Type ──────────────────────────────────────────────────────────────────
   Self-hosted variable fonts. Declared once here rather than four times over,
   which also gives the camera page the family typeface for the first time. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/inter-var-latin-ext.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/inter-var-latin.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}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500 700;font-display:swap;src:url(/fonts/space-grotesk-var-latin-ext.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500 700;font-display:swap;src:url(/fonts/space-grotesk-var-latin.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{
  /* Paper. Warm, because the house is warm and a cold grey screen is not. */
  --bv-bg:#faf8f5;
  --bv-surface:#ffffff;
  --bv-surface-2:#f3f0ea;
  --bv-surface-3:#eae4da;
  --bv-line:#ded7ca;
  --bv-line-strong:#cbc3b4;

  /* Ink. Measured against the paper: 16.35, 7.41 and 4.59 to one. */
  --bv-ink:#1d1a16;
  --bv-ink-2:#575147;
  --bv-ink-3:#787067;

  /* Brand: one hue at 170°. 4.77 on paper, 5.05 white on it. */
  --bv-brand:#0a7d6a;
  --bv-brand-hover:#076456;
  --bv-brand-on:#ffffff;
  --bv-brand-wash:#edf7f4;
  --bv-brand-edge:#bfe4db;

  /* The one warm accent, at 29°: the lit window in the icon, and anything that
     wants attention without alarm. 4.57 on paper. */
  --bv-accent:#a7601d;
  --bv-accent-wash:#fdf6ee;

  /* Trouble. Kept apart from the accent so "warm" never reads as "wrong". */
  --bv-bad:#b3392c;
  --bv-bad-wash:#fbeceb;
  /* Good is the brand: when things are as they should be, they are on-brand. */
  --bv-ok:#0a7d6a;
  --bv-ok-wash:#edf7f4;

  /* Shadows are tinted with the ink, never neutral grey, and layered. */
  --bv-shadow-sm:0 1px 2px rgba(29,26,22,.05), 0 1px 1px rgba(29,26,22,.04);
  --bv-shadow:0 4px 12px -2px rgba(29,26,22,.10), 0 2px 4px -1px rgba(29,26,22,.05);
  --bv-shadow-lg:0 18px 40px -12px rgba(29,26,22,.20), 0 6px 14px -6px rgba(29,26,22,.10);
  --bv-shadow-brand:0 6px 16px -6px rgba(10,125,106,.45);

  /* One radius ramp. */
  --bv-r-sm:6px;
  --bv-r:10px;
  --bv-r-lg:14px;
  --bv-r-xl:18px;
  --bv-r-pill:999px;

  /* One spacing ramp. */
  --bv-1:4px; --bv-2:6px; --bv-3:8px; --bv-4:12px; --bv-5:16px;
  --bv-6:20px; --bv-7:24px; --bv-8:32px; --bv-9:40px; --bv-10:56px;

  /* One type scale. */
  --bv-font-display:'Space Grotesk','Inter',system-ui,sans-serif;
  --bv-font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --bv-font-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --bv-t-micro:11px;
  --bv-t-meta:12.5px;
  --bv-t-body:14px;
  --bv-t-lg:15.5px;
  --bv-t-h3:17px;
  --bv-t-h2:21px;
  --bv-t-h1:27px;
  --bv-t-hero:34px;
  --bv-track-tight:-.03em;   /* large display text only */
  --bv-track-caps:.08em;     /* the small capitalised labels */

  /* Motion: spring-ish, short, and only ever on transform/opacity. */
  --bv-ease:cubic-bezier(.2,.7,.3,1);
  --bv-fast:120ms;
  --bv-med:180ms;

  /* Chrome heights, shared so pages line up with each other. */
  --bv-bar-h:56px;
  --bv-tap:44px;          /* nothing interactive is smaller than this */

  /* The parts of the screen the phone keeps for itself: the status bar and the
     clock at the top, the home indicator at the bottom, the rounded corners at
     the sides. Every page asks for viewport-fit=cover, so the page is drawn
     underneath all of them and has to put its own chrome back inside these.
     Named rather than written as bare env() calls so a test can simulate a
     notch on a desktop browser and check the buttons are still reachable. */
  --bv-safe-top:env(safe-area-inset-top,0px);
  --bv-safe-right:env(safe-area-inset-right,0px);
  --bv-safe-bottom:env(safe-area-inset-bottom,0px);
  --bv-safe-left:env(safe-area-inset-left,0px);

  /* The night surfaces, named as constants so a light page can put one dark
     piece on itself - the dashboard's sidebar, the sign-in card - out of exactly
     the same material the camera page is made of. */
  --bv-night-bg:#101314;
  --bv-night-surface:#171b1d;
  --bv-night-surface-2:#1e2426;
  --bv-night-line:#2a3134;
  --bv-night-ink:#e9edec;
  --bv-night-ink-2:#9ba6a3;
  --bv-night-ink-3:#6d7875;
  --bv-night-brand:#3fc8aa;
  --bv-night-hover:rgba(255,255,255,.06);
  --bv-night-active:rgba(63,200,170,.16);

  /* The four sides of the family, and the line that belongs to more than one.
     These are the colours the guide publishes as its key, and the only place
     they are written down. Measured against the paper: all clear 3:1, which the
     old yellow did not. */
  --side-dadsDad:#9c3b2c;
  --side-dadsMom:#2f6ea8;
  --side-momsDad:#5f9c55;
  --side-momsMom:#9d7c16;
  --side-shared:#3a3630;

  color-scheme:light;
}

/* ── Night ─────────────────────────────────────────────────────────────────
   The same tokens, lit differently. Put class="night" on <html> for a page that
   lives in the dark (the cameras), or on a wrapper for one dark piece of an
   otherwise light page (the sign-in card). */
.night{
  --bv-bg:#101314;
  --bv-surface:#171b1d;
  --bv-surface-2:#1e2426;
  --bv-surface-3:#252c2f;
  --bv-line:#2a3134;
  --bv-line-strong:#3a4347;

  --bv-ink:#e9edec;
  --bv-ink-2:#9ba6a3;
  --bv-ink-3:#7b8784;   /* lifted from #6d7875, which read at 3.79:1 here */

  --bv-brand:#3fc8aa;
  --bv-brand-hover:#5ad6bb;
  --bv-brand-on:#062b24;
  --bv-brand-wash:rgba(63,200,170,.14);
  --bv-brand-edge:rgba(63,200,170,.34);

  --bv-accent:#e0964a;
  --bv-accent-wash:rgba(224,150,74,.14);

  --bv-bad:#e3705c;
  --bv-bad-wash:rgba(227,112,92,.15);
  --bv-ok:#3fc8aa;
  --bv-ok-wash:rgba(63,200,170,.14);

  --bv-shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --bv-shadow:0 4px 14px -2px rgba(0,0,0,.5);
  --bv-shadow-lg:0 20px 48px -12px rgba(0,0,0,.65);
  --bv-shadow-brand:0 6px 18px -8px rgba(63,200,170,.5);

  /* The same four sides, lifted to read on black. Every one clears 3:1 against
     the night background, and they stay as far apart from each other under the
     commoner kinds of colour blindness as the daylight set does. */
  --side-dadsDad:#e2685a;
  --side-dadsMom:#6ea8e0;
  --side-momsDad:#8fce83;
  --side-momsMom:#e7c765;
  --side-shared:#8b9490;

  color-scheme:dark;
}

/* ── Base ──────────────────────────────────────────────────────────────────
   Deliberately small. Each page keeps its own layout; these are the few things
   that should be true everywhere. */
::selection{background:var(--bv-brand-wash);color:var(--bv-brand-hover)}
.night ::selection{background:var(--bv-brand-wash);color:var(--bv-brand)}

/* One focus ring, on everything, in the brand colour. Keyboard users get a
   clear ring; mouse users never see it. */
:focus-visible{
  outline:2px solid var(--bv-brand);
  outline-offset:2px;
}

/* Scrollbars in the page's own colours rather than the browser's grey. */
*{scrollbar-width:thin;scrollbar-color:var(--bv-line-strong) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--bv-line-strong);border-radius:var(--bv-r-pill);border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--bv-ink-3);background-clip:content-box}

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

/* ── The mark ──────────────────────────────────────────────────────────────
   A house with a lit window: the same drawing as the installed app icon, so the
   thing in the corner of the page and the thing on the home screen agree. */
.ux-mark{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:34px;height:34px;border-radius:10px;
  background:linear-gradient(145deg,#12907a 0%,var(--bv-brand) 52%,#065a4c 100%);
  box-shadow:var(--bv-shadow-brand);
  color:#fff;
}
.ux-mark svg{width:20px;height:20px;display:block}
.ux-mark .win{fill:#f3b263;stroke:none}      /* the lit window */
.ux-mark.is-sm{width:26px;height:26px;border-radius:8px}
.ux-mark.is-sm svg{width:16px;height:16px}
.ux-mark.is-lg{width:56px;height:56px;border-radius:16px}
.ux-mark.is-lg svg{width:32px;height:32px}

/* The way back to the front page. Used by the admin panel's header; the other
   pages have their own, older back links that already match these tokens. */
.ux-back{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  min-height:38px;padding:0 11px;
  font-size:var(--bv-t-meta);font-weight:550;color:var(--bv-ink-2);
  background:transparent;border:1px solid var(--bv-line);border-radius:var(--bv-r);
  text-decoration:none;white-space:nowrap;
  transition:transform var(--bv-fast) var(--bv-ease);
}
.ux-back:hover{color:var(--bv-ink);border-color:var(--bv-line-strong);background:var(--bv-surface-2)}
.ux-back:active{transform:translateY(1px)}
.ux-back:focus-visible{outline:2px solid var(--bv-brand);outline-offset:2px}
.ux-back svg{width:14px;height:14px;flex:none}
@media (max-width:520px){ .ux-back .ux-back-text{display:none} .ux-back{padding:0 10px} }

/* Nothing else lives here yet on purpose. Shared classes were written for a bar,
   buttons and chips as well, and then cut again when it turned out no page had
   adopted them: every page loads this file, so unused rules are a cost paid on
   every visit for nothing. The pages' own buttons take their colour, radius and
   type from the tokens above, which is what actually makes them match. Add a
   class here when a second page needs it, not before. */

/* ── On a phone ─────────────────────────────────────────────────────────────
   Two floors, applied to the shared pieces: nothing you tap is under 44px, and
   nothing you read is under 12px. A finger is about 44px wide; that number is
   not a style choice. */
@media (max-width: 560px) {
  :root {
    /* The small print stops being small print. */
    --bv-t-micro: 11.5px;
    --bv-t-meta: 13px;
    --bv-t-body: 15px;
  }
  .ux-back, .ux-btn { min-height: var(--bv-tap); }
  .ux-back { padding: 0 14px; }
  .ux-mark.is-sm { width: 30px; height: 30px; }
}