/*
 * CHANGE LOG
 * -----------------------------------------------------------------------------
 * SEQ | AUTHOR | DESCRIPTION
 * -----------------------------------------------------------------------------
 * 1 | maintainer@emeraldcoastsystemsgroup.com | The oshal design standard tokens (docs/ux/design-standard.md §2.11; Roger, 2026-11-06: "crisp ... not random blurred edge buttons"). One block derives every --ds-* token from the active portal theme, so all 20 themes and every package skin get an opaque surface, opaque hairlines, a control line of at least 3:1, the six-size type scale, the 4/8 spacing, the radius scale and three elevations, with no edit to a theme file. D1 is opaque (reference products, §9): the old tokens that 102 store files paint with (--bg-card, --glass-bg, --text-muted, the card shadow and the accent glow) resolve to the standard on body, so menus, sheets, cards and panels painted with them are opaque and nothing glows; the eleven translucent theme cards are also worn opaque on <html>, so a page that aliases the card colour on its root is opaque too. Glass (--ds-bar, --ds-bar-filter) is for the top and bottom bars only. The planned control of §4.10 (DS-45) is drawn here too, so every themed page greys a [data-ds-not-yet] the same way.
 */

/* oshal design standard tokens (DS). Derived from the active portal theme; one block serves every theme and skin. */
:where(:root, [data-theme]) {
  /* Surfaces: opaque */
  --ds-page:          var(--bg-primary);
  --ds-surface:       var(--bg-primary);                                                 /* fallback, overridden below */
  --ds-surface-2:     color-mix(in srgb, var(--text-primary) 6%,  var(--ds-surface));    /* secondary fill, tracks */
  --ds-surface-3:     color-mix(in srgb, var(--text-primary) 12%, var(--ds-surface));    /* hover, pressed, selected row */
  /* Panels (unused, D1 is opaque) and bars: the only translucent surfaces */
  --ds-panel-glass:   color-mix(in srgb, var(--ds-surface) 72%, transparent);
  --ds-panel-filter:  blur(20px) saturate(140%);
  --ds-bar:           color-mix(in srgb, var(--ds-page) 86%, transparent);
  --ds-bar-filter:    blur(20px) saturate(160%);
  --ds-scrim:         rgb(0 0 0 / 0.40);
  /* Lines: opaque, never alpha */
  --ds-hairline:      color-mix(in srgb, var(--text-primary) 14%, var(--ds-page));      /* dividers, float edges */
  --ds-edge:          color-mix(in srgb, var(--text-primary) 20%, var(--ds-surface));   /* edges and dividers on a surface */
  --ds-line-control:  light-dark(color-mix(in srgb, var(--text-primary) 56%, var(--ds-page)),
                                 color-mix(in srgb, var(--text-primary) 44%, var(--ds-page))); /* >= 3:1 */
  /* Ink */
  --ds-ink:           var(--text-primary);
  --ds-ink-2:         color-mix(in srgb, var(--text-primary) 78%, var(--ds-page));      /* >= 4.5:1 on every fill */
  --ds-ink-disabled:  color-mix(in srgb, var(--text-primary) 45%, var(--ds-page));
  /* Accent and status */
  --ds-accent:        var(--accent-primary);
  --ds-accent-ink:    color-mix(in srgb, var(--accent-primary) 66%, var(--text-primary)); /* links, >= 4.5:1 on every fill */
  --ds-on-accent:     var(--text-on-accent);
  --ds-focus:         var(--accent-primary);
  --ds-ok: var(--status-success); --ds-warn: var(--status-warning); --ds-bad: var(--status-error); --ds-info: var(--status-active);
  /* Elevation: three levels, nothing else */
  --ds-elev-base: none;
  --ds-elev-bar: 0 1px 0 var(--ds-hairline);
  --ds-elev-float: 0 2px 6px rgb(0 0 0 / 0.08), 0 12px 32px rgb(0 0 0 / 0.16);
  /* Radius, space, sizes */
  --ds-radius-s: 6px; --ds-radius-m: 10px; --ds-radius-l: 14px; --ds-radius-xl: 20px; --ds-radius-full: 999px;
  --ds-space-1: 4px; --ds-space-2: 8px; --ds-space-3: 12px; --ds-space-4: 16px; --ds-space-5: 24px; --ds-space-6: 32px; --ds-space-7: 48px;
  --ds-gutter: 16px; --ds-target: 44px; --ds-control-h: 44px; --ds-bar-h: 56px; --ds-row-h: 48px; --ds-concierge: 48px;
  /* Type */
  --ds-font: system-ui, sans-serif; --ds-mono: ui-monospace, monospace;
  --ds-text-meta:    400 12px/16px var(--ds-font);
  --ds-text-help:    400 14px/20px var(--ds-font);
  --ds-text-body:    400 16px/24px var(--ds-font);
  --ds-text-heading: 600 18px/24px var(--ds-font);
  --ds-text-title:   700 24px/32px var(--ds-font);
  --ds-text-hero:    700 32px/40px var(--ds-font);
  /* Motion */
  --ds-dur-fast: 120ms; --ds-dur: 200ms; --ds-dur-sheet: 280ms; --ds-ease: cubic-bezier(0.2, 0, 0, 1);
}
@supports (color: rgb(from red r g b / 1)) {
  :where(:root, [data-theme]) { --ds-surface: rgb(from var(--bg-card, var(--bg-primary)) r g b / 1); }
}
@media (min-width: 1040px) and (pointer: fine) {
  :where(:root, [data-theme]) { --ds-gutter: 24px; --ds-control-h: 36px; --ds-bar-h: 48px; --ds-text-body: 400 15px/22px var(--ds-font); }
}
@media (prefers-reduced-motion: reduce) { :where(:root, [data-theme]) { --ds-dur-fast: 0ms; --ds-dur: 0ms; --ds-dur-sheet: 0ms; } }
@media (prefers-reduced-transparency: reduce) {
  :where(:root, [data-theme]) { --ds-bar: var(--ds-page); --ds-bar-filter: none; --ds-panel-glass: var(--ds-surface); --ds-panel-filter: none; }
}

/* Old tokens painted by 102 store files now resolve to the standard, so every package changes in one step. Set on body,
   so the theme's own values on <html> stay the input of the --ds-* tokens above. D1 is opaque, so a menu or sheet
   painted with --bg-card is opaque too. */
:where(body) {
  --bg-card: var(--ds-surface);
  --bg-card-hover: var(--ds-surface-3);
  --glass-bg: var(--ds-bar); --glass-bg-heavy: var(--ds-bar);
  --glass-border: var(--ds-edge);
  --card-shadow: none; --accent-glow: transparent;
  --text-muted: var(--ds-ink-2); --text-secondary: var(--ds-ink-2);
}

/* D1 for pages that alias the card token on their root, as surface-themes.css taught them to (":root { --panel:
   var(--bg-card) }": 62 store pages in 40 packages on store main 5d00315f). Such an alias resolves on <html>, where the
   body block above cannot reach, so the eleven themes whose card colour is translucent wear it opaque on <html> itself:
   the same red, green and blue, at full opacity, which is exactly the --ds-surface the derivation above computes. The
   theme files stay untouched; surface-glass.test.cjs fails any theme whose card colour on <html> is not opaque. */
html[data-theme="midnight"] { --bg-card: rgb(28 28 48); }
html[data-theme="daylight"] { --bg-card: rgb(255 255 255); }
html[data-theme="ocean"] { --bg-card: rgb(16 28 50); }
html[data-theme="sakura"] { --bg-card: rgb(42 18 32); }
html[data-theme="forest"] { --bg-card: rgb(20 34 16); }
html[data-theme="gray"] { --bg-card: rgb(34 39 46); }
html[data-theme="black"] { --bg-card: rgb(18 18 18); }
html[data-theme="light-blue"] { --bg-card: rgb(255 255 255); }
html[data-theme="aurora"] { --bg-card: rgb(18 42 52); }
html[data-theme="graphite"] { --bg-card: rgb(32 36 44); }
html[data-theme="amber"] { --bg-card: rgb(52 34 18); }

/* A planned control (§4.10, DS-45): a function both reference products offer that oshal has not built yet, shown where
   they put it, plainly greyed, labelled "Not available yet", doing nothing when pressed. Solid, opacity 1, never the
   accent; the ink is --ds-ink-disabled (2:1 to under 4.5:1). planned-control.js builds and guards it. */
:where([data-ds-not-yet]) {
  color: var(--ds-ink-disabled) !important;
  background: var(--ds-surface-2) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
  cursor: not-allowed;
}
:where([data-ds-not-yet]) :is(svg, img, i) { color: inherit; opacity: 1; }
:where([data-ds-not-yet]) .ds-not-yet-note { font: var(--ds-text-meta); color: inherit; margin-left: var(--ds-space-2); }