/* ═══════════════════════════════════════════════════════════════════════════
   HIS World — design tokens for the parent-facing app.
   ═══════════════════════════════════════════════════════════════════════════

   WHAT THIS IS. Every colour, typeface, radius and easing the parent-facing
   app uses, in one place. Twenty-one pages used to declare their own :root and
   then hardcode the same values again beside it — 441 literal hex and 476 rgba
   uses between them. Nothing disagreed, but nothing could be changed either.

   ONE PALETTE. A second (blue) palette was built, compared on staging and
   rejected; the switcher that offered the two of them is gone with it. What is
   left is the palette the app has always had, in the one place it now lives.
   Pages say var(--token) and nothing else, so a value changes here and changes
   everywhere.

   WHO READS IT. Every parent page, the front door (index.php, plan 1.5) and
   the café (plan 1.6). The staff console has its own stylesheet,
   assets/staff.css. The two offline screens (offline.html and the service
   worker's codes page) carry their own colours so they draw with nothing
   else loaded. There is no dark palette: the app is light whatever the phone
   is set to (color-scheme, at the end of :root).

   THREE KINDS OF TOKEN, and the distinction still earns its keep even with one
   palette, because it says what a value is allowed to mean:

     1. PALETTE      — what the app looks like.
     2. SEMANTIC     — what happened. Error red means error; a "payment failed"
                       that looked calm would be a bug, not a style.
     3. STRUCTURAL   — where things are. Safe-area insets and bar heights are
                       layout, and appearance may not touch layout.

   THE -rgb PAIRS. Roughly half the app's colour use is a tint —
   rgba(42,58,46,0.06) for a hairline, 0.07 for a button wash. A hex token
   cannot carry an alpha, so each colour that gets washed also publishes its
   channels. color-mix() would read better but wants Safari 16.4+, and these
   are phones we do not choose.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {

    /* ── grounds ── */
    --ground-white:       #FFFFFF;
    --ground-white-rgb:   255,255,255;
    --ground-mid:         #FAFAF8;
    --ground-mid-rgb:     250,250,248;
    --ground-deep:        #F3F4F0;
    --ground-deep-rgb:    243,244,240;
    --ground-raised:      #FCFBF9;
    --ground-sunk:        #F4F7F2;

    /* ── ink ── */
    --ink-primary:        #2A3A2E;
    --ink-primary-rgb:    42,58,46;
    --ink-secondary:      #5C6B60;
    --ink-secondary-rgb:  92,107,96;
    --ink-muted:          #8A9690;
    --ink-muted-rgb:      138,150,144;
    --ink-deep:           #1A2B1F;
    --ink-pressed:        #1F2C22;
    --ink-disabled:       #CBD2CB;

    /* ── the primary action ── */
    --btn-bg:             var(--ink-primary);
    --btn-bg-press:       var(--ink-deep);
    --btn-bg-rgb:         42,58,46;

    /* ── accents ── */
    --accent:             #C97B5E;
    --accent-rgb:         201,123,94;
    --accent-deep:        #8B4E33;
    --accent-soft:        #FCE8E4;
    --support:            #7A9B7E;
    --support-rgb:        122,155,126;
    --support-deep:       #5A8A60;
    --support-soft:       #E4EFE6;
    --neutral-soft:       #F0EDE8;

    /* ── tinted tiles, one per tile ── */
    /* ── ACTIVITY HUES ──
       Twelve slots, not twelve names. includes/activities.php says which hue
       an activity takes, so adding one is a line there and nothing here.

       Hues 1 to 4 are exactly what Gymnastics, Football, Tennis and Swimming
       have always rendered: the four that already existed keep their colours
       to the byte. The other eight come from the avatar palette, which is the
       one set of ten colours in this theme already proven to sit together.

       Two activities may share a hue. Twelve tints that all stay
       distinguishable in one warm palette is a losing game, and a tile is a
       label rather than a legend. */
    --tile-hue-1-bg:      #EAE7E3;              --tile-hue-1-ink:   #6B7280;
    --tile-hue-2-bg:      var(--support-soft);  --tile-hue-2-ink:   var(--support-deep);
    --tile-hue-3-bg:      var(--support-soft);  --tile-hue-3-ink:   var(--support);
    --tile-hue-4-bg:      var(--accent-soft);   --tile-hue-4-ink:   var(--accent);
    --tile-hue-5-bg:      #F1E9F3;              --tile-hue-5-ink:   #A37BB1;
    --tile-hue-6-bg:      #F6EFE2;              --tile-hue-6-ink:   #B08A3E;
    --tile-hue-7-bg:      #E6EEF5;              --tile-hue-7-ink:   #5B7DB1;
    --tile-hue-8-bg:      #F5E6EC;              --tile-hue-8-ink:   #B15B7D;
    --tile-hue-9-bg:      #E4F0F3;              --tile-hue-9-ink:   #5B9CB1;
    --tile-hue-10-bg:     #ECF3E6;              --tile-hue-10-ink:  #7DB15B;
    --tile-hue-11-bg:     #E4F1EC;              --tile-hue-11-ink:  #4E9A85;
    --tile-hue-12-bg:     #F3E9E4;              --tile-hue-12-ink:  #8B4E33;
    --tile-other-bg:      var(--neutral-soft);
    --tile-other-ink:     var(--ink-primary);
    --tile-cart-bg:       var(--accent-soft);
    --tile-cart-ink:      var(--accent);
    --tile-credits-bg:    var(--neutral-soft);
    --tile-credits-ink:   var(--ink-primary);
    --tile-reserved-bg:   var(--support-soft);
    --tile-reserved-ink:  var(--support-deep);
    --tile-book-bg:       var(--accent-soft);
    --tile-book-ink:      var(--accent);
    --tile-help-bg:       var(--tile-hue-7-bg);
    --tile-help-ink:      var(--tile-hue-7-ink);
    --tile-checkin-bg:    var(--neutral-soft);
    --tile-checkin-ink:   var(--ink-primary);

    /* ── what the school's logo sits on: its navy lettering needs white
       behind it. The check-in QR draws its own white. ── */
    --plate:              #FFFFFF;
    --plate-rgb:          255,255,255;
    /* ── the school's own marks: the wordmark's blue I and gold, on the
       front door. The logo's colours, not the app's palette. ── */
    --brand-blue:         #1B3A93;
    --brand-gold:         #F5B01A;
    /* The school's navy: the front door's Sign in, headline and links, which
       the owner chose — navy and gold — from mockups on 2026-09-25. The
       front door only; the app beyond it keeps its own button. ── */
    --brand-navy:         #16234A;
    --brand-navy-lift:    #1D3C90;   /* the top of the Sign in button's face */
    --brand-navy-rgb:     22,35,74;
    /* ── a pressed or alarmed fill, under white text; the same value as
       its -deep text colour. ── */
    --accent-press:       #8B4E33;
    --support-press:      #5A8A60;
    --error-press:        #B91C1C;
    /* ── warm glass, the sign-in cards ── */
    --glass-rgb:          255,250,245;
    --weather-card:       rgb(255 255 255);
    --weather-line:       rgb(144 144 144 / 28%);

    /* ── lines and lift ── */
    --line-soft:          #F3F4F0;
    --line-soft-rgb:      243,244,240;
    --line:               rgba(42,58,46,0.08);
    --line-strong:        rgba(42,58,46,0.15);
    --shadow-portal:      0 6px 20px rgba(201,123,94,0.35);

    /* ── type ── */
    --font:               'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display:       var(--font);
    /* The café's display face (D_Cafe/), for its name and headings, and on
       Reserved the Advanced Reservations heading and its two italic lines
       (the owner's pick, mockup A); every other page keeps --font-display.
       Loaded non-blocking only by a page that draws it (the café itself;
       Reserved through his_font_head(HIS_SERIF_FONT_HREF)), with Georgia
       while it arrives. */
    --font-serif:         'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --display-weight:     300;
    --display-spacing:    -0.5px;

    /* ── shape ── */
    --radius-sm:          12px;
    --radius-md:          16px;
    --radius-lg:          20px;
    --radius-xl:          24px;
    --radius-full:        999px;

    /* ── motion ── */
    --ease-spring:        cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── avatar slots ── */
    --av-1:               #7A9B7E;
    --av-2:               #C97B5E;
    --av-3:               #8B4E33;
    --av-4:               #5B7DB1;
    --av-5:               #A37BB1;
    --av-6:               #B19A5B;
    --av-7:               #5B9CB1;
    --av-8:               #B15B7D;
    --av-9:               #7DB15B;
    --av-10:              #5BB196;

    /* ── SEMANTIC — say what happened, not what the app looks like ──
       --terra-* and --sage-* are older names for the two accents, kept because
       two hundred rules still say them.

       --wa is WhatsApp's own green, on the support page's Message-us button: a
       brand mark, not our palette.

       ── STRUCTURAL — where things are ── */
    --terra-primary:      var(--accent);
    --terra-deep:         var(--accent-deep);
    --sage-primary:       var(--support);
    --error:              #DC2626;
    --error-rgb:          220,38,38;
    --error-deep:         #B91C1C;
    --error-darker:       #7F1D1D;
    --error-soft:         #FEF2F2;
    --error-line:         #FECACA;
    --pass:               #16A34A;
    --pass-rgb:           22,163,74;
    --pass-soft:          #F0FDF4;
    --pass-line:          #BBF7D0;
    --wa:                 #25D366;
    --wa-rgb:             37,211,102;
    --safe-top:           env(safe-area-inset-top, 0px);
    --safe-bottom:        env(safe-area-inset-bottom, 0px);
    --bottom-bar-h:       60px;

    /* Light, whatever the phone is set to (AGENTS.md). "only" also tells a
       browser or web view that would darken a page by itself not to. */
    color-scheme: only light;
}


/* ───────────────────────────────────────────────────────────────────────────
   Avatar slots resolve here so no page has to know the mapping.

   accounts.initials_bg_color stores a literal hex, chosen at registration from
   ten values. The database is not touched and never needs to be: PHP maps
   whatever is stored onto a slot number, the markup emits .av-slot-N, and the
   ten values live here. They are exactly the ten the database holds, so every
   existing avatar renders in the colour it always has — the indirection is
   what let a second palette recolour avatars without a migration, and it is
   worth keeping for the next time something needs to.
   ─────────────────────────────────────────────────────────────────────────── */
.av-slot-1  { background: var(--av-1); }
.av-slot-2  { background: var(--av-2); }
.av-slot-3  { background: var(--av-3); }
.av-slot-4  { background: var(--av-4); }
.av-slot-5  { background: var(--av-5); }
.av-slot-6  { background: var(--av-6); }
.av-slot-7  { background: var(--av-7); }
.av-slot-8  { background: var(--av-8); }
.av-slot-9  { background: var(--av-9); }
.av-slot-10 { background: var(--av-10); }


/* ───────────────────────────────────────────────────────────────────────────
   TINTED TILES — the small square behind an icon: an activity on the
   dashboard, an entry in the centre-button menu.

   Eleven names for what is, in this palette, five pairs — the cart and the
   swimming card share the accent, credits and check-in share the neutral.
   Kept separate rather than collapsed back to five classes, because the naming
   describes what the tile IS rather than which colour it happens to take, and
   collapsing them would put the colour back into the PHP that emits them.
   ─────────────────────────────────────────────────────────────────────────── */
.tile-hue-1  { background: var(--tile-hue-1-bg); color: var(--tile-hue-1-ink); }
.tile-hue-2  { background: var(--tile-hue-2-bg); color: var(--tile-hue-2-ink); }
.tile-hue-3  { background: var(--tile-hue-3-bg); color: var(--tile-hue-3-ink); }
.tile-hue-4  { background: var(--tile-hue-4-bg); color: var(--tile-hue-4-ink); }
.tile-hue-5  { background: var(--tile-hue-5-bg); color: var(--tile-hue-5-ink); }
.tile-hue-6  { background: var(--tile-hue-6-bg); color: var(--tile-hue-6-ink); }
.tile-hue-7  { background: var(--tile-hue-7-bg); color: var(--tile-hue-7-ink); }
.tile-hue-8  { background: var(--tile-hue-8-bg); color: var(--tile-hue-8-ink); }
.tile-hue-9  { background: var(--tile-hue-9-bg); color: var(--tile-hue-9-ink); }
.tile-hue-10 { background: var(--tile-hue-10-bg); color: var(--tile-hue-10-ink); }
.tile-hue-11 { background: var(--tile-hue-11-bg); color: var(--tile-hue-11-ink); }
.tile-hue-12 { background: var(--tile-hue-12-bg); color: var(--tile-hue-12-ink); }
.tile-other      { background: var(--tile-other-bg);      color: var(--tile-other-ink); }
.tile-cart       { background: var(--tile-cart-bg);       color: var(--tile-cart-ink); }
.tile-credits    { background: var(--tile-credits-bg);    color: var(--tile-credits-ink); }
.tile-reserved   { background: var(--tile-reserved-bg);   color: var(--tile-reserved-ink); }
.tile-book       { background: var(--tile-book-bg);       color: var(--tile-book-ink); }
.tile-help       { background: var(--tile-help-bg);       color: var(--tile-help-ink); }
.tile-checkin    { background: var(--tile-checkin-bg);    color: var(--tile-checkin-ink); }

/* ───────────────────────────────────────────────────────────────────────────
   PASSWORD TOGGLE — one implementation for every password field, driven by
   assets/auth.js. The first component rule in this sheet, and deliberately:
   three pages carried their own 13 px text button, 35×15 px to tap, which
   is why "Show" worked on some taps and not others.
   ─────────────────────────────────────────────────────────────────────────── */
.password-wrap { position: relative; }
.password-wrap > input { padding-right: 84px; }
.pw-toggle {
    position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
    min-width: 44px; min-height: 44px; padding: 0 10px;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border: 0; background: transparent; color: var(--ink-muted);
    font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
    border-radius: var(--radius-sm);
    touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none;
}
.pw-toggle:hover, .pw-toggle:focus-visible { color: var(--ink-primary); outline: none; }
.pw-toggle:focus-visible { box-shadow: 0 0 0 2px rgba(var(--ink-primary-rgb), 0.18); }
.pw-toggle.is-on { color: var(--ink-primary); }
.pw-toggle.is-on .pw-eye { opacity: 0.45; }
.pw-note { display: none; align-items: center; gap: 10px; margin-top: 6px; font-size: 12px; color: var(--ink-muted); line-height: 1.4; }
.pw-note.is-on { display: flex; }
.pw-note-clear {
    flex-shrink: 0; min-height: 32px; padding: 0 12px; border-radius: var(--radius-full);
    border: 1px solid var(--line); background: var(--ground-white); color: var(--ink-primary);
    font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}