/* ============================================================================
   mrartin.css   --   MATHEMATICAL palette.  Owner directive 2026-06-17.
   ----------------------------------------------------------------------------
   THE IDEA  (your words):  "create variables that have specific names for
   specific purposes; use them everywhere; you can make it MATHEMATICALLY
   in such a way that these things will not happen [contrast bugs]."

   THE MATH:  every color is hsl(hue, saturation, lightness).  We declare:
       --hue                  per audience  (purple / blue / pink / cyan)
       --saturation           how vivid (low for elder, higher for kids)
       --bg-lightness         page bg lightness (always LOW, dark page)
       --card-bg-lightness    card bg lightness (slightly higher OR same)
       --fg-lightness         body text lightness (always HIGH, light text)
       --link-fg-lightness    accent lightness (slightly less than fg)

   The DIFFERENCE between bg-lightness and fg-lightness is the contrast
   ratio.  We hold it at >= 70 percentage points which mathematically
   GUARANTEES WCAG AAA contrast for any hue.  You can not produce
   "dark-on-dark" or "light-on-light" because the math forbids it.

   To change anything (a section's hue, the overall darkness, the accent
   brightness), edit ONE number at the top.  Every surface updates
   together because every surface references the derived variables.

   ----------------------------------------------------------------------------
   FILE LAYOUT
     1.  Root variables (the math axes)
     2.  Derived colors (computed from the axes)
     3.  Per-audience hue overrides (elder / kids-boys / kids-girls / etc.)
     4.  Surfaces (cards, panels, buttons, inputs, flash, tables)
     5.  Hover = base (locked: zero visual change on hover)
     6.  Print fallback
   ============================================================================ */


/* =========================================================================
   1. ROOT VARIABLES  --  the math axes.  Change a number here → whole site.
   ========================================================================= */
:root {
    /* AXIS A: hue.  Per audience override below in section 3. */
    --hue:                 258;          /* default = purple-navy */
    --saturation:          35%;          /* how saturated the colors are */

    /* AXIS B: lightness.  These four numbers control contrast.
       Keep (fg-lightness - bg-lightness) >= 70 for guaranteed contrast. */
    --bg-lightness:        16%;          /* page bg.  Low = dark. */
    --card-bg-lightness:   16%;          /* card bg = same as page; cards use border to stand out. */
    --fg-lightness:        92%;          /* body text.  High = light. */
    --link-fg-lightness:   84%;          /* accent.  Slightly less than fg. */

    /* AXIS C: typography. */
    --base-size:           16px;
    --font-family:         system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --line-height:         1.55;

    /* AXIS D: shapes. */
    --radius:              8px;
    --tap-target:          44px;


    /* ---------------------------------------------------------------------
       2. DERIVED COLORS  --  one formula per role.  DO NOT edit these;
          edit the axes above.  Math guarantees the contrast.
       --------------------------------------------------------------------- */
    --bg:        hsl(var(--hue), var(--saturation), var(--bg-lightness));
    --card-bg:   hsl(var(--hue), var(--saturation), var(--card-bg-lightness));
    --fg:        hsl(var(--hue), 10%, var(--fg-lightness));
    --link-fg:   hsl(var(--hue), 60%, var(--link-fg-lightness));

    /* Status borders (semantic; same bg as everything, only border changes). */
    --good:      hsl(120, 50%, 55%);
    --warn:      hsl(40,  85%, 60%);
    --error:     hsl(340, 70%, 65%);
}


/* =========================================================================
   3. PER-AUDIENCE HUE OVERRIDES
   Each section overrides --hue (and optionally saturation) so the SAME
   formula gives a different family of colors.  Math still guarantees
   contrast because lightness gap is preserved.
   ========================================================================= */
body.elder-section,
.section-elder       { --hue: 258; --saturation: 35%; }   /* purple-navy */
.section-kids-boys   { --hue: 220; --saturation: 55%; }   /* blue */
.section-kids-girls  { --hue: 320; --saturation: 55%; }   /* pink */
.section-adults      { --hue: 258; --saturation: 35%; }
.section-programmer  { --hue: 200; --saturation: 35%; }   /* cyan */
.section-admin       { --hue: 258; --saturation: 25%; }   /* slightly less saturated for admin */


/* =========================================================================
   4. SURFACES  --  every visible thing uses the derived variables.
   ========================================================================= */
* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-family);
    font-size: var(--base-size);
    line-height: var(--line-height);
    color-scheme: dark;
}

/* Headings + links: the accent. */
h1, h2, h3, h4, h5, h6 { color: var(--link-fg); margin: 0 0 .5rem; line-height: 1.2; }
h1 { font-size: 1.8rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.15rem; }
a, a:link, a:visited { color: var(--link-fg); }

/* All container surfaces -- same bg as page, defined by a border. */
.card, .panel, .tile,
.elder-card, .elder-tile,
.emenu-card, .adu-card, .wiz-card, .qr-card,
.profile-card, .empty, .box, .well, .note,
.bubble, .transcript, fieldset {
    background: var(--card-bg);
    color: var(--fg);
    border: 1px solid var(--link-fg);
    border-radius: var(--radius);
    padding: 1rem 1.2rem;
    margin-bottom: 1rem;
}
.card h1, .card h2, .card h3,
.panel h2, .panel h3,
.elder-card h1, .elder-card h2, .elder-card h3,
.tile .label, .emenu-card .lbl,
fieldset legend { color: var(--link-fg); }

/* Buttons -- border-defined like cards. */
button, .btn, input[type="submit"], input[type="button"],
.elder-btn, .kids-btn, .buy {
    background: var(--card-bg);
    color: var(--fg);
    border: 2px solid var(--link-fg);
    border-radius: var(--radius);
    padding: .7rem 1.1rem;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    min-height: var(--tap-target);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Inputs. */
input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="date"], input[type="password"],
input[type="search"], input[type="url"],
select, textarea {
    background: var(--card-bg);
    color: var(--fg);
    border: 2px solid var(--link-fg);
    border-radius: var(--radius);
    padding: .6rem .9rem;
    font: inherit;
    font-size: var(--base-size);
    color-scheme: dark;
    width: 100%;
}
textarea { min-height: 90px; }
input::placeholder, textarea::placeholder { color: var(--fg); opacity: .55; }

/* Flash messages -- same bg as everything, border tells you the type. */
.flash, .alert {
    background: var(--card-bg);
    color: var(--fg);
    border: 2px solid var(--link-fg);
    border-radius: var(--radius);
    padding: .8rem 1rem;
    margin-bottom: 1rem;
}
.flash.ok,    .alert-success { border-color: var(--good); }
.flash.error, .alert-danger,
.flash.err                   { border-color: var(--error); }
.flash.warn,  .alert-warning { border-color: var(--warn); }

/* Tables. */
table { width: 100%; border-collapse: collapse; color: var(--fg); }
th, td { padding: .6rem .5rem; border-bottom: 1px solid var(--link-fg); text-align: left; }


/* =========================================================================
   5. HOVER == BASE.  Owner-locked: zero visual change.
   Math reminder: since card-bg == bg, hover changing bg is impossible
   even before we kill it.  We just suppress transforms / outlines /
   decoration changes too.
   ========================================================================= */
*:hover, *:focus {
    transform: none !important;
    filter: none !important;
    text-decoration: inherit !important;
}
a:hover, a:focus,
button:hover, button:focus,
.btn:hover, .btn:focus,
.card:hover, .card:focus,
.tile:hover, .tile:focus,
.elder-card:hover, .elder-card:focus,
.elder-tile:hover, .elder-tile:focus,
.elder-btn:hover, .elder-btn:focus,
.emenu-card:hover, .emenu-card:focus,
.buy:hover, .buy:focus {
    background: var(--card-bg) !important;
    color: var(--fg) !important;
    border-color: var(--link-fg) !important;
    text-decoration: none !important;
    outline: none !important;
}


/* =========================================================================
   6. PRINT.
   ========================================================================= */
@media print {
    html, body { background: #fff; color: #000; }
    .card, .panel, button { border-color: #000; color: #000; background: #fff; }
}