/* Onisiro Universal Theme Contract (Phase 2D-pre.2)
   -------------------------------------------------------------------------
   Framework-agnostic semantic theme tokens — the SAME contract the authenticated
   app-kit (Tailwind) shell uses, exposed on :root / [data-theme] so non-app-kit
   renderers (public, guest/auth, legacy string, inline) can converge WITHOUT being
   forced onto the .app-kit-root DOM. This file is intentionally NOT attached to any
   renderer in this prerequisite slice; later slices <link> it one family at a time.

   Light is the default; the dark override re-points the same tokens to the approved
   Zinc dark palette. BOTH structural canvases are fixed semantic colours (light #FFFFFF,
   dark #09090B) and can never be replaced by tenant branding — branding is limited to
   approved logo/mark/accent affordances. Compatibility aliases resolve to the semantic
   tokens — there is no second palette. */

:root {
  /* Light semantic tokens. The structural canvas is a FIXED colour, not brand-derived. */
  --app-bg: #FFFFFF;
  --app-surface: #FFFFFF;
  --app-surface-raised: #F8FAFC;
  --app-border: #E2E8F0;
  --app-border-strong: #64748B;
  --app-text: #0F172A;
  --app-muted: #475569;
  --app-focus: #2563EB;

  /* Brand accent (primary action / selected nav / brand mark). Amber/orange is the
     approved accent; tenant branding may override ONLY via the sanitised --tenant-accent
     with a contrast-aware foreground — never the structural or financial tokens. */
  --app-accent: var(--tenant-accent, #EF6E15);
  --app-accent-foreground: var(--tenant-accent-foreground, #111827);

  /* Financial status — light foregrounds tuned to >=4.5:1 on white; bg/border are
     emerald/rose/amber-500 at 10%/20% opacity (theme-independent tints). */
  --app-positive: #047857; --app-positive-bg: rgba(16,185,129,.10); --app-positive-border: rgba(16,185,129,.20);
  --app-negative: #BE123C; --app-negative-bg: rgba(244,63,94,.10);  --app-negative-border: rgba(244,63,94,.20);
  --app-warning:  #B45309; --app-warning-bg:  rgba(245,158,11,.10); --app-warning-border:  rgba(245,158,11,.20);

  /* Back-compat aliases -> one authoritative semantic value per role (no competing palette). */
  --app-text-muted: var(--app-muted);
  --bg: var(--app-bg); --surface: var(--app-surface); --surface2: var(--app-surface-raised);
  --line: var(--app-border); --text: var(--app-text); --muted: var(--app-muted); --focus-ring: var(--app-focus);
  --accent: var(--app-accent); --color-accent: var(--app-accent);

  color-scheme: light;
}

[data-theme="dark"] {
  /* Approved Zinc dark palette. --app-bg is a FIXED literal (never brand-derived) so
     tenant branding cannot replace the dark canvas. Essential boundaries/focus use
     --app-border-strong / --app-focus (>=3:1); --app-border is decorative only. */
  --app-bg: #09090B;
  --app-surface: #18181B;
  --app-surface-raised: #27272A;
  --app-border: #27272A;
  --app-border-strong: #71717A;
  --app-text: #F4F4F5;
  --app-muted: #A1A1AA;
  --app-focus: #60A5FA;
  --app-accent: var(--tenant-accent, #F59E0B);
  --app-accent-foreground: var(--tenant-accent-foreground, #111827);

  /* Dark status foregrounds (tints/borders are theme-independent, defined above). */
  --app-positive: #34D399;
  --app-negative: #FB7185;
  --app-warning:  #FBBF24;

  color-scheme: dark;
}

/* ---------------------------------------------------------------------------
   WO27 — the theme menu.
   A menu button with three choices, not a cycling toggle: three options hidden
   behind repeated presses are three options nobody can see, reaching one can
   take two page-flashing clicks, and a screen reader hears only the state it is
   in rather than what it could be.
   Loaded from onisiro-theme.css because every shell already links it, so the
   menu looks the same in the app, the admin area and the public site.
   --------------------------------------------------------------------------- */
.onisiro-theme-menu-wrap { position: relative; display: inline-block; }

.onisiro-theme-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1200;
    min-width: 200px;
    padding: 6px;
    margin: 0;
    list-style: none;
    border-radius: 12px;
    background: var(--app-surface, #ffffff);
    border: 1px solid var(--line, rgba(0, 0, 0, .12));
    box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
}

.onisiro-theme-menu[hidden] { display: none; }

.onisiro-theme-menu__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    /* 24px is the stated minimum; the padding takes the real target well past it. */
    min-height: 40px;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.onisiro-theme-menu__item:hover,
.onisiro-theme-menu__item:focus-visible {
    background: var(--app-surface-raised, rgba(0, 0, 0, .06));
}

/* The accent TOKEN, with no literal fallback: the accent contract allows the amber literal
   only inside a --tenant-accent boundary fallback, and a second copy here would be a place
   the brand colour could drift out of step. */
.onisiro-theme-menu__item:focus-visible { outline: 2px solid var(--app-accent); outline-offset: -2px; }

/* The check is not the only signal: aria-checked carries it for assistive
   technology, and the icon column keeps the rows aligned whether ticked or not. */
.onisiro-theme-menu__tick { width: 1em; flex: 0 0 1em; text-align: center; }
.onisiro-theme-menu__item[aria-checked="true"] { font-weight: 700; }

/* At 320px the menu must not run off the edge. */
@media (max-width: 380px) {
    .onisiro-theme-menu { right: auto; left: 0; min-width: 0; width: max-content; max-width: calc(100vw - 32px); }
}