/*
 * Spirit of Christmas -- theme definitions (Section 15).
 * Every theme defines the same set of CSS custom properties; components in
 * base.css only ever reference var(--...), never a literal color, so a new
 * theme is just a new block here (Section 7: no inline styles, no
 * hardcoded values in components).
 *
 * Palette and component language follow the same theme-token approach used
 * by the org's other internal tools (dark sticky header, accent-driven nav,
 * Barlow Condensed display type over Inter body text) so staff moving
 * between internal apps get a consistent look. Colors themselves are this
 * app's own -- only the *pattern* (token set, header style, table style) is
 * shared.
 *
 * Themes: light, dark, blue, green, red, purple, teal, and a high-contrast
 * ADA-compliant variant. Default is set via data-theme on <html>; the
 * selector in the header (theme-switcher.js) updates it and posts the
 * choice back to /theme so it persists to the logged-in user's profile.
 *
 * --brand-teal-color and --brand-ink-color are sampled directly from
 * FofFK_logo.jpg (the Friends of Foster Kids logo) -- see
 * public/assets/img/FofFK_logo.jpg. Unlike every other token here they're
 * deliberately identical across all 8 themes: they're the org's fixed
 * brand identity, not something that should shift with the reader's theme
 * choice. Adjust both here, in one place, if the logo's colors ever change.
 */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

:root,
[data-theme="light"] {
  --color-bg:            #f0f2f5;
  --color-bg-elevated:   #ffffff;
  --color-bg-inset:      #dde1e7;
  --color-fg:            #111827;
  --color-fg-muted:      #4b5563;
  --color-fg-subtle:     #64748b;
  --color-border:        #000000;
  --color-border-muted:  #6b7280;
  --color-primary:       #1565c0;
  --color-primary-fg:    #ffffff;
  --color-primary-hover: #0d47a1;
  --color-accent:        #c05400;
  --color-accent-hover:  #9c4400;
  --color-accent-bg:     #fff1e6;
  --color-danger:        #991b1b;
  --color-danger-bg:     #fee2e2;
  --color-success:       #166534;
  --color-success-bg:    #dcfce7;
  --color-warning:       #92400e;
  --color-warning-bg:    #fef3c7;
  --color-info:          #075985;
  --color-info-bg:       #e0f2fe;
  --color-focus-ring:    #1565c0;
  --color-link:          #1565c0;
  /* v0.6.5: the Siblings household icon (View::childIconSuffix(), base.css .household-icon) is a CSS mask painted in this
     colour. The artwork's own navy (measured median of its pixels) on the light-background themes; the theme's text colour
     on dark and high-contrast, so the figure keeps the same contrast as text on every background. */
  --color-household-icon: rgb(22, 60, 96);
  /* v0.6.5: the 3px frame round the wish lists a donor already holds on the Sponsor Requests assignment page (base.css
     .sponsor-assign-row--mine). Black on every light-background theme, a light colour on the dark theme; this app's
     high-contrast theme has a light background too, so it is black there as well (the frame must show against the page). */
  --color-assigned-frame: #000000;
  --color-done-bg: #facc15;
  --color-done-fg: #1c1917;
  --color-done-border: #854d0e;
  --color-done-hover-bg: #eab308;
  --color-filter-button-bg: #ffffff;
  --color-filter-button-fg: #1a1a1a;
  --color-filter-button-border: #8794a3;
  --color-filter-button-hover-bg: #eef1f4;
  --color-plus-sign: #ffffff;
  --color-plus-sign-outline: rgba(0, 0, 0, 0.6);
  --color-tab-active-bg: #333333;
  --color-tab-icon-plate: #ffffff;
  --color-header-bg:     #111827;
  --color-header-fg:     #ffffff;
  --color-nav-highlight: #fb923c;
  --shadow-sm: 0 1px 4px rgba(0,0,0,.12);
  --shadow-md: 0 4px 14px rgba(0,0,0,.14);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.18);
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px;
  --font-display: 'Barlow Condensed', system-ui, sans-serif;
  --font-body: 'Inter', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --brand-teal-color: #1cb9da;
  --brand-ink-color:  #545454;
  /* Wish-list tabs enhancement (2026-09-07): one accent color per
     household member (up to 8 sibling slots), a left-edge stripe on that
     child's own tab and its content header (base.css's tab-accent-0..7) --
     8 hues evenly spaced 45deg apart around the wheel (red/orange/
     yellow-green/green/cyan/blue/violet/magenta), same saturation/
     lightness formula across all 8 within a theme so they read as one
     coherent set, tuned per theme for this theme's own background
     rather than reused verbatim from another theme. Bar is
     "distinguishable from each other and from this theme's own
     bg/border," not full text-contrast compliance -- these are thin
     stripes, no tab label text sits on top of them. The yellow-green
     slot (90deg) gets a few extra points of lightness reduction in
     every theme below -- yellow tones read as washed-out/low-contrast
     at the same lightness the other 7 hues use.
     Slot order (2026-09-07 revision): tab-accent-N is keyed to a
     child's *position* in the household's tab row (index % 8,
     templates/review/audit*.php -- position, not the child's own
     identity, and stable across renders since that position itself
     comes from a SQL ORDER BY county_child_number, not anything that
     could reshuffle between page loads), so two adjacent tabs are
     exactly two consecutive slot numbers. Slots are deliberately NOT
     in the 45deg-apart hue sequence itself (0/45/90/135/.../315) --
     that would put only 45deg between every pair of *adjacent tabs*,
     the minimum possible separation and exactly the "two similar blues
     next to each other" problem this ordering exists to avoid. Instead
     each slot is 3 hue-steps (135deg) from the next: 0, 135, 270, 45,
     180, 315, 90, 225 -- a step of 3 is coprime with 8, so this visits
     all 8 hues exactly once before repeating, and 135deg is the
     largest gap achievable this way (a step of 1 or 7 gives the
     original 45deg problem back; a step of 4 isn't coprime with 8 and
     only ever visits 2 of the 8 hues). This guarantees every adjacent
     pair -- slots 0-1, 1-2, ..., 6-7, and even the 7-0 wrap -- sits
     exactly 135deg apart, the same guarantee at every position
     regardless of how many siblings (2-8) are in the household. */
  --tab-accent-0: hsl(0, 62%, 42%);
  --tab-accent-1: hsl(135, 62%, 42%);
  --tab-accent-2: hsl(270, 62%, 42%);
  --tab-accent-3: hsl(45, 62%, 42%);
  --tab-accent-4: hsl(180, 62%, 42%);
  --tab-accent-5: hsl(315, 62%, 42%);
  --tab-accent-6: hsl(90, 62%, 35%);
  --tab-accent-7: hsl(225, 62%, 42%);
  /* "Physical tab" refinement (2026-09-07): a recessed "track" the tabs
     sit inside, distinct from both the page background (--color-bg) and
     the active tab's own background (also --color-bg -- see the
     seamless-connection rule in base.css) so the tabs read as sitting in
     a container rather than floating on the page. Value is a consistent
     45%-of-the-way blend from --color-bg toward this theme's own
     --color-bg-inset, computed by hand the same way as every other
     literal value in this file (no color-mix() anywhere here) -- NOT
     --color-bg-inset verbatim, which is tuned for small elements (hover
     rows, badges) and reads as too saturated a jump for a track spanning
     the full tab-bar width. Same 45% ratio in every theme below for a
     consistent depth of "recessed" across all 8.
     --tab-track-outline is none in every theme except high_contrast --
     see that theme's own comment for why it alone also gets a full
     border around the track. */
  --tab-track-bg: #e7eaef;
  --tab-track-outline: none;
  /* Inactive-tab border fix (2026-09-07): an inactive tab's own fill is
     transparent (base.css), so with only the track-bg contrast to go on,
     adjacent inactive tabs were blending into each other and into the
     track itself -- hard to tell where one tab ends and the next (or the
     track) begins. Aliased to --color-border rather than a new literal:
     that token is already this app's own "strong, unambiguous structural
     line" color in every theme (the tab bar's own shared bottom border,
     high-contrast's --tab-track-outline above), so reusing it keeps the
     inactive-tab border visually consistent with those rather than
     introducing a second, differently-tuned "border color" concept. A
     dedicated custom property (not a raw var(--color-border) in base.css)
     per the request, so this can still be retuned independently later
     without touching --color-border's other, unrelated uses. */
  --tab-inactive-border: var(--color-border);
}

[data-theme="dark"] {
  --color-bg:            #0f1117;
  --color-bg-elevated:   #1e2232;
  --color-bg-inset:      #2d3350;
  --color-fg:            #f1f5f9;
  --color-fg-muted:      #cbd5e1;
  --color-fg-subtle:     #94a3b8;
  --color-border:        #ffffff;
  --color-border-muted:  #4b5680;
  --color-primary:       #60a5fa;
  --color-primary-fg:    #08111f;
  --color-primary-hover: #93c5fd;
  --color-accent:        #fb923c;
  --color-accent-hover:  #f97316;
  --color-accent-bg:     #2a1500;
  --color-danger:        #f87171;
  --color-danger-bg:     #1f0505;
  --color-success:       #4ade80;
  --color-success-bg:    #052e16;
  --color-warning:       #fbbf24;
  --color-warning-bg:    #1c1000;
  --color-info:          #38bdf8;
  --color-info-bg:       #001e30;
  --color-focus-ring:    #60a5fa;
  --color-link:          #60a5fa;
  --color-household-icon: var(--color-fg);
  --color-assigned-frame: #f1f5f9;
  --color-done-bg: #facc15;
  --color-done-fg: #1c1917;
  --color-done-border: #fde047;
  --color-done-hover-bg: #fde047;
  --color-filter-button-bg: #ffffff;
  --color-filter-button-fg: #1a1a1a;
  --color-filter-button-border: #8794a3;
  --color-filter-button-hover-bg: #eef1f4;
  --color-plus-sign: #ffffff;
  --color-plus-sign-outline: rgba(0, 0, 0, 0.6);
  --color-tab-active-bg: #475063;
  --color-tab-icon-plate: #ffffff;
  --color-header-bg:     #0a0c14;
  --color-header-fg:     #f1f5f9;
  --color-nav-highlight: #fb923c;
  --shadow-sm: 0 1px 4px rgba(0,0,0,.45);
  --shadow-md: 0 4px 14px rgba(0,0,0,.55);
  --shadow-lg: 0 10px 32px rgba(0,0,0,.65);
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px;
  --font-display: 'Barlow Condensed', system-ui, sans-serif;
  --font-body: 'Inter', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --brand-teal-color: #1cb9da;
  --brand-ink-color:  #545454;
  /* Wish-list tabs per-household-member accent colors -- see :root's own
     comment above for the full reasoning. Brighter/lighter than :root's
     own set (higher L) so they stay visible against this theme's
     near-black background instead of reading as too dark to tell apart. */
  --tab-accent-0: hsl(0, 65%, 65%);
  --tab-accent-1: hsl(135, 65%, 65%);
  --tab-accent-2: hsl(270, 65%, 65%);
  --tab-accent-3: hsl(45, 65%, 65%);
  --tab-accent-4: hsl(180, 65%, 65%);
  --tab-accent-5: hsl(315, 65%, 65%);
  --tab-accent-6: hsl(90, 65%, 60%);
  --tab-accent-7: hsl(225, 65%, 65%);
  /* --tab-track-bg follows the same 45%-blend-toward-bg-inset formula as
     every theme -- see :root's own comment for the full reasoning. */
  --tab-track-bg: #1a1d2b;
  --tab-track-outline: none;
  /* --tab-inactive-border aliases --color-border, same as every theme --
     see :root's own comment for the full reasoning. */
  --tab-inactive-border: var(--color-border);
}

[data-theme="blue"] {
  --color-bg:            #f0f4fb;
  --color-bg-elevated:   #ffffff;
  --color-bg-inset:      #bfdbfe;
  --color-fg:            #0d1b2e;
  --color-fg-muted:      #1e3a5f;
  --color-fg-subtle:     #4d6d90;
  --color-border:        #1565c0;
  --color-border-muted:  #1976d2;
  --color-primary:       #1565c0;
  --color-primary-fg:    #ffffff;
  --color-primary-hover: #0d47a1;
  --color-accent:        #1565c0;
  --color-accent-hover:  #0d47a1;
  --color-accent-bg:     #dbeafe;
  --color-danger:        #991b1b;
  --color-danger-bg:     #fee2e2;
  --color-success:       #166534;
  --color-success-bg:    #dcfce7;
  --color-warning:       #78350f;
  --color-warning-bg:    #fef3c7;
  --color-info:          #075985;
  --color-info-bg:       #e0f2fe;
  --color-focus-ring:    #1565c0;
  --color-link:          #1565c0;
  --color-household-icon: rgb(22, 60, 96);
  --color-assigned-frame: #000000;
  --color-done-bg: #facc15;
  --color-done-fg: #1c1917;
  --color-done-border: #854d0e;
  --color-done-hover-bg: #eab308;
  --color-filter-button-bg: #ffffff;
  --color-filter-button-fg: #1a1a1a;
  --color-filter-button-border: #8794a3;
  --color-filter-button-hover-bg: #eef1f4;
  --color-plus-sign: #ffffff;
  --color-plus-sign-outline: rgba(0, 0, 0, 0.6);
  --color-tab-active-bg: #333333;
  --color-tab-icon-plate: #ffffff;
  --color-header-bg:     #0d47a1;
  --color-header-fg:     #ffffff;
  --color-nav-highlight: #bfdbfe;
  --shadow-sm: 0 1px 4px rgba(0,0,80,.10);
  --shadow-md: 0 4px 14px rgba(0,0,80,.13);
  --shadow-lg: 0 10px 30px rgba(0,0,80,.16);
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px;
  --font-display: 'Barlow Condensed', system-ui, sans-serif;
  --font-body: 'Inter', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --brand-teal-color: #1cb9da;
  --brand-ink-color:  #545454;
  /* Wish-list tabs per-household-member accent colors -- see :root's own
     comment for the full reasoning. */
  --tab-accent-0: hsl(0, 58%, 42%);
  --tab-accent-1: hsl(135, 58%, 42%);
  --tab-accent-2: hsl(270, 58%, 42%);
  --tab-accent-3: hsl(45, 58%, 42%);
  --tab-accent-4: hsl(180, 58%, 42%);
  --tab-accent-5: hsl(315, 58%, 42%);
  --tab-accent-6: hsl(90, 58%, 35%);
  --tab-accent-7: hsl(225, 58%, 42%);
  /* --tab-track-bg follows the same 45%-blend-toward-bg-inset formula as
     every theme -- see :root's own comment for the full reasoning. */
  --tab-track-bg: #dae9fc;
  --tab-track-outline: none;
  /* --tab-inactive-border aliases --color-border, same as every theme --
     see :root's own comment for the full reasoning. */
  --tab-inactive-border: var(--color-border);
}

[data-theme="green"] {
  --color-bg:            #f1f7f2;
  --color-bg-elevated:   #ffffff;
  --color-bg-inset:      #bbf7d0;
  --color-fg:            #052e16;
  --color-fg-muted:      #1a4d1e;
  --color-fg-subtle:     #2e6b35;
  --color-border:        #388e3c;
  --color-border-muted:  #2e7d32;
  --color-primary:       #166534;
  --color-primary-fg:    #ffffff;
  --color-primary-hover: #14532d;
  --color-accent:        #166534;
  --color-accent-hover:  #14532d;
  --color-accent-bg:     #dcfce7;
  --color-danger:        #991b1b;
  --color-danger-bg:     #fee2e2;
  --color-success:       #166534;
  --color-success-bg:    #dcfce7;
  --color-warning:       #78350f;
  --color-warning-bg:    #fef3c7;
  --color-info:          #075985;
  --color-info-bg:       #e0f2fe;
  --color-focus-ring:    #166534;
  --color-link:          #14532d;
  --color-household-icon: rgb(22, 60, 96);
  --color-assigned-frame: #000000;
  --color-done-bg: #facc15;
  --color-done-fg: #1c1917;
  --color-done-border: #854d0e;
  --color-done-hover-bg: #eab308;
  --color-filter-button-bg: #ffffff;
  --color-filter-button-fg: #1a1a1a;
  --color-filter-button-border: #8794a3;
  --color-filter-button-hover-bg: #eef1f4;
  --color-plus-sign: #ffffff;
  --color-plus-sign-outline: rgba(0, 0, 0, 0.6);
  --color-tab-active-bg: #333333;
  --color-tab-icon-plate: #ffffff;
  --color-header-bg:     #14532d;
  --color-header-fg:     #ffffff;
  --color-nav-highlight: #bbf7d0;
  --shadow-sm: 0 1px 4px rgba(0,50,0,.10);
  --shadow-md: 0 4px 14px rgba(0,50,0,.13);
  --shadow-lg: 0 10px 30px rgba(0,50,0,.16);
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px;
  --font-display: 'Barlow Condensed', system-ui, sans-serif;
  --font-body: 'Inter', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --brand-teal-color: #1cb9da;
  --brand-ink-color:  #545454;
  /* Wish-list tabs per-household-member accent colors -- see :root's own
     comment for the full reasoning. */
  --tab-accent-0: hsl(0, 55%, 38%);
  --tab-accent-1: hsl(135, 55%, 38%);
  --tab-accent-2: hsl(270, 55%, 38%);
  --tab-accent-3: hsl(45, 55%, 38%);
  --tab-accent-4: hsl(180, 55%, 38%);
  --tab-accent-5: hsl(315, 55%, 38%);
  --tab-accent-6: hsl(90, 55%, 32%);
  --tab-accent-7: hsl(225, 55%, 38%);
  /* --tab-track-bg follows the same 45%-blend-toward-bg-inset formula as
     every theme -- see :root's own comment for the full reasoning. */
  --tab-track-bg: #d9f7e3;
  --tab-track-outline: none;
  /* --tab-inactive-border aliases --color-border, same as every theme --
     see :root's own comment for the full reasoning. */
  --tab-inactive-border: var(--color-border);
}

[data-theme="red"] {
  --color-bg:            #fdf0f0;
  --color-bg-elevated:   #ffffff;
  --color-bg-inset:      #fecaca;
  --color-fg:            #2c0a0a;
  --color-fg-muted:      #7f1d1d;
  --color-fg-subtle:     #8a6868;
  --color-border:        #b91c1c;
  --color-border-muted:  #991b1b;
  --color-primary:       #991b1b;
  --color-primary-fg:    #ffffff;
  --color-primary-hover: #7f1d1d;
  --color-accent:        #991b1b;
  --color-accent-hover:  #7f1d1d;
  --color-accent-bg:     #fee2e2;
  --color-danger:        #991b1b;
  --color-danger-bg:     #fee2e2;
  --color-success:       #166534;
  --color-success-bg:    #dcfce7;
  --color-warning:       #78350f;
  --color-warning-bg:    #fef3c7;
  --color-info:          #075985;
  --color-info-bg:       #e0f2fe;
  --color-focus-ring:    #991b1b;
  --color-link:          #991b1b;
  --color-household-icon: rgb(22, 60, 96);
  --color-assigned-frame: #000000;
  --color-done-bg: #facc15;
  --color-done-fg: #1c1917;
  --color-done-border: #854d0e;
  --color-done-hover-bg: #eab308;
  --color-filter-button-bg: #ffffff;
  --color-filter-button-fg: #1a1a1a;
  --color-filter-button-border: #8794a3;
  --color-filter-button-hover-bg: #eef1f4;
  --color-plus-sign: #ffffff;
  --color-plus-sign-outline: rgba(0, 0, 0, 0.6);
  --color-tab-active-bg: #333333;
  --color-tab-icon-plate: #ffffff;
  --color-header-bg:     #7f0000;
  --color-header-fg:     #ffffff;
  --color-nav-highlight: #fecaca;
  --shadow-sm: 0 1px 4px rgba(80,0,0,.10);
  --shadow-md: 0 4px 14px rgba(80,0,0,.13);
  --shadow-lg: 0 10px 30px rgba(80,0,0,.16);
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px;
  --font-display: 'Barlow Condensed', system-ui, sans-serif;
  --font-body: 'Inter', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --brand-teal-color: #1cb9da;
  --brand-ink-color:  #545454;
  /* Wish-list tabs per-household-member accent colors -- see :root's own
     comment for the full reasoning. */
  --tab-accent-0: hsl(0, 55%, 40%);
  --tab-accent-1: hsl(135, 55%, 40%);
  --tab-accent-2: hsl(270, 55%, 40%);
  --tab-accent-3: hsl(45, 55%, 40%);
  --tab-accent-4: hsl(180, 55%, 40%);
  --tab-accent-5: hsl(315, 55%, 40%);
  --tab-accent-6: hsl(90, 55%, 33%);
  --tab-accent-7: hsl(225, 55%, 40%);
  /* --tab-track-bg follows the same 45%-blend-toward-bg-inset formula as
     every theme -- see :root's own comment for the full reasoning. */
  --tab-track-bg: #fddfdf;
  --tab-track-outline: none;
  /* --tab-inactive-border aliases --color-border, same as every theme --
     see :root's own comment for the full reasoning. */
  --tab-inactive-border: var(--color-border);
}

[data-theme="purple"] {
  --color-bg:            #f5f0fb;
  --color-bg-elevated:   #ffffff;
  --color-bg-inset:      #e9d5ff;
  --color-fg:            #1a0a28;
  --color-fg-muted:      #6a4a84;
  --color-fg-subtle:     #7a5a96;
  --color-border:        #6a1b9a;
  --color-border-muted:  #7b1fa2;
  --color-primary:       #6a1b9a;
  --color-primary-fg:    #ffffff;
  --color-primary-hover: #4a0072;
  --color-accent:        #6a1b9a;
  --color-accent-hover:  #4a0072;
  --color-accent-bg:     #f3e5f5;
  --color-danger:        #991b1b;
  --color-danger-bg:     #fee2e2;
  --color-success:       #166534;
  --color-success-bg:    #dcfce7;
  --color-warning:       #78350f;
  --color-warning-bg:    #fef3c7;
  --color-info:          #075985;
  --color-info-bg:       #e0f2fe;
  --color-focus-ring:    #6a1b9a;
  --color-link:          #6a1b9a;
  --color-household-icon: rgb(22, 60, 96);
  --color-assigned-frame: #000000;
  --color-done-bg: #facc15;
  --color-done-fg: #1c1917;
  --color-done-border: #854d0e;
  --color-done-hover-bg: #eab308;
  --color-filter-button-bg: #ffffff;
  --color-filter-button-fg: #1a1a1a;
  --color-filter-button-border: #8794a3;
  --color-filter-button-hover-bg: #eef1f4;
  --color-plus-sign: #ffffff;
  --color-plus-sign-outline: rgba(0, 0, 0, 0.6);
  --color-tab-active-bg: #333333;
  --color-tab-icon-plate: #ffffff;
  --color-header-bg:     #3b0764;
  --color-header-fg:     #ffffff;
  --color-nav-highlight: #e9d5ff;
  --shadow-sm: 0 1px 4px rgba(50,0,80,.10);
  --shadow-md: 0 4px 14px rgba(50,0,80,.13);
  --shadow-lg: 0 10px 30px rgba(50,0,80,.16);
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px;
  --font-display: 'Barlow Condensed', system-ui, sans-serif;
  --font-body: 'Inter', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --brand-teal-color: #1cb9da;
  --brand-ink-color:  #545454;
  /* Wish-list tabs per-household-member accent colors -- see :root's own
     comment for the full reasoning. */
  --tab-accent-0: hsl(0, 55%, 42%);
  --tab-accent-1: hsl(135, 55%, 42%);
  --tab-accent-2: hsl(270, 55%, 42%);
  --tab-accent-3: hsl(45, 55%, 42%);
  --tab-accent-4: hsl(180, 55%, 42%);
  --tab-accent-5: hsl(315, 55%, 42%);
  --tab-accent-6: hsl(90, 55%, 35%);
  --tab-accent-7: hsl(225, 55%, 42%);
  /* --tab-track-bg follows the same 45%-blend-toward-bg-inset formula as
     every theme -- see :root's own comment for the full reasoning. */
  --tab-track-bg: #f0e4fd;
  --tab-track-outline: none;
  /* --tab-inactive-border aliases --color-border, same as every theme --
     see :root's own comment for the full reasoning. */
  --tab-inactive-border: var(--color-border);
}

/* Teal has no counterpart in the reference palette; derived in the same
   pattern as the other themes (dark saturated header, vivid surface2). Its
   --color-primary is pinned to --brand-teal-color itself (by request) rather
   than the darker #0f766e originally picked for AA+ text contrast, so
   --color-primary-fg is the theme's own dark ink (--color-fg) instead of
   white -- white on #1cb9da is only ~2.3:1, below WCAG AA's 4.5:1. */
[data-theme="teal"] {
  --color-bg:            #f0f9f8;
  --color-bg-elevated:   #ffffff;
  --color-bg-inset:      #99f6e4;
  --color-fg:            #062b28;
  --color-fg-muted:      #115e59;
  --color-fg-subtle:     #0f766e;
  --color-border:        #0f766e;
  --color-border-muted:  #14b8a6;
  --color-primary:       var(--brand-teal-color);
  --color-primary-fg:    var(--color-fg);
  --color-primary-hover: #115e59;
  --color-accent:        #0d9488;
  --color-accent-hover:  #0f766e;
  --color-accent-bg:     #ccfbf1;
  --color-danger:        #991b1b;
  --color-danger-bg:     #fee2e2;
  --color-success:       #166534;
  --color-success-bg:    #dcfce7;
  --color-warning:       #78350f;
  --color-warning-bg:    #fef3c7;
  --color-info:          #075985;
  --color-info-bg:       #e0f2fe;
  --color-focus-ring:    #0f766e;
  --color-link:          #0f766e;
  --color-household-icon: rgb(22, 60, 96);
  --color-assigned-frame: #000000;
  --color-done-bg: #facc15;
  --color-done-fg: #1c1917;
  --color-done-border: #854d0e;
  --color-done-hover-bg: #eab308;
  --color-filter-button-bg: #ffffff;
  --color-filter-button-fg: #1a1a1a;
  --color-filter-button-border: #8794a3;
  --color-filter-button-hover-bg: #eef1f4;
  --color-plus-sign: #ffffff;
  --color-plus-sign-outline: rgba(0, 0, 0, 0.6);
  --color-tab-active-bg: #333333;
  --color-tab-icon-plate: #ffffff;
  --color-header-bg:     #042f2e;
  --color-header-fg:     #ffffff;
  --color-nav-highlight: #5eead4;
  --shadow-sm: 0 1px 4px rgba(0,50,45,.10);
  --shadow-md: 0 4px 14px rgba(0,50,45,.13);
  --shadow-lg: 0 10px 30px rgba(0,50,45,.16);
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px;
  --font-display: 'Barlow Condensed', system-ui, sans-serif;
  --font-body: 'Inter', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --brand-teal-color: #1cb9da;
  --brand-ink-color:  #545454;
  /* Wish-list tabs per-household-member accent colors -- see :root's own
     comment for the full reasoning. */
  --tab-accent-0: hsl(0, 55%, 38%);
  --tab-accent-1: hsl(135, 55%, 38%);
  --tab-accent-2: hsl(270, 55%, 38%);
  --tab-accent-3: hsl(45, 55%, 38%);
  --tab-accent-4: hsl(180, 55%, 38%);
  --tab-accent-5: hsl(315, 55%, 38%);
  --tab-accent-6: hsl(90, 55%, 32%);
  --tab-accent-7: hsl(225, 55%, 38%);
  /* --tab-track-bg follows the same 45%-blend-toward-bg-inset formula as
     every theme -- see :root's own comment for the full reasoning. */
  --tab-track-bg: #c9f8ef;
  --tab-track-outline: none;
  /* --tab-inactive-border aliases --color-border, same as every theme --
     see :root's own comment for the full reasoning. */
  --tab-inactive-border: var(--color-border);
}

/*
 * High-contrast ADA variant: pure black/white, no mid-tone grays for text,
 * thicker focus indicators. Every pairing below meets or exceeds WCAG 2.1
 * AA (4.5:1 for text, 3:1 for UI components) -- most exceed AAA (7:1).
 */
[data-theme="high_contrast"] {
  --color-bg:            #f0f0f0;
  --color-bg-elevated:   #ffffff;
  --color-bg-inset:      #c8c8c8;
  --color-fg:            #000000;
  --color-fg-muted:      #000000;
  --color-fg-subtle:     #1a1a1a;
  --color-border:        #000000;
  --color-border-muted:  #000000;
  --color-primary:       #0000cc;
  --color-primary-fg:    #ffffff;
  --color-primary-hover: #00008b;
  --color-accent:        #0000cc;
  --color-accent-hover:  #00008b;
  --color-accent-bg:     #c8c8ff;
  --color-danger:        #991b1b;
  --color-danger-bg:     #ff8080;
  --color-success:       #003300;
  --color-success-bg:    #80ff80;
  --color-warning:       #4a2500;
  --color-warning-bg:    #ffe860;
  --color-info:          #000066;
  --color-info-bg:       #8080ff;
  --color-focus-ring:    #0000ff;
  --color-link:          #0000ee;
  --color-household-icon: var(--color-fg);
  --color-assigned-frame: #000000;
  --color-done-bg: #facc15;
  --color-done-fg: #1c1917;
  --color-done-border: #854d0e;
  --color-done-hover-bg: #eab308;
  --color-filter-button-bg: #ffffff;
  --color-filter-button-fg: #1a1a1a;
  --color-filter-button-border: #8794a3;
  --color-filter-button-hover-bg: #eef1f4;
  --color-plus-sign: #ffffff;
  --color-plus-sign-outline: rgba(0, 0, 0, 0.6);
  --color-tab-active-bg: #333333;
  --color-tab-icon-plate: #ffffff;
  --color-header-bg:     #000000;
  --color-header-fg:     #ffffff;
  --color-nav-highlight: #ffff00;
  --shadow-sm: 0 2px 6px rgba(0,0,0,.40);
  --shadow-md: 0 4px 16px rgba(0,0,0,.50);
  --shadow-lg: 0 10px 32px rgba(0,0,0,.60);
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px;
  --font-display: 'Barlow Condensed', system-ui, sans-serif;
  --font-body: 'Inter', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --brand-teal-color: #1cb9da;
  --brand-ink-color:  #545454;
  /* Wish-list tabs per-household-member accent colors -- see :root's own
     comment for the full reasoning. Higher saturation and lower lightness
     than every other theme's own set -- this theme's whole ethos is bold,
     unambiguous color separation over subtlety, and its own --shadow-sm
     above is a known-weaker active-tab signal here (base.css's own
     comment on that), so these 8 stripes carry comparatively more of the
     per-child-identification weight in this theme than in the other 7. */
  --tab-accent-0: hsl(0, 85%, 32%);
  --tab-accent-1: hsl(135, 85%, 32%);
  --tab-accent-2: hsl(270, 85%, 32%);
  --tab-accent-3: hsl(45, 85%, 32%);
  --tab-accent-4: hsl(180, 85%, 32%);
  --tab-accent-5: hsl(315, 85%, 32%);
  --tab-accent-6: hsl(90, 85%, 28%);
  --tab-accent-7: hsl(225, 85%, 32%);
  /* --tab-track-bg follows the same 45%-blend-toward-bg-inset formula as
     every theme -- see :root's own comment for the full reasoning; a
     supporting signal here, not the primary one. --tab-track-outline is
     NOT none in this theme alone: a full border around the track, on top
     of the color fill and the active/inactive height difference
     (base.css), because this theme's whole premise is not depending on a
     subtle background-shade difference to communicate structure. */
  --tab-track-bg: #dedede;
  --tab-track-outline: 2px solid var(--color-border);
  /* --tab-inactive-border aliases --color-border (pure black here), same
     as every theme -- see :root's own comment for the full reasoning.
     Unlike --tab-track-bg above (a supporting signal only in this theme),
     this border carries real weight here: --color-border's maximum
     contrast in this theme is exactly what makes it "strong enough to be
     unmistakable" per the request, with no separate high-contrast-only
     override needed the way --tab-track-outline required one. */
  --tab-inactive-border: var(--color-border);
}