/* jhacal-design-tokens.css — 042026.1.66 */
/* =====================================================
   JHACAL DESIGN SYSTEM - SHARED TOKENS v1.0
   "Just Having A Crack At Life"

   Unified design tokens for all JHACAL AAC applications
   Based on Speak-Easy Facade design (R20.20+)

   This file contains all shared CSS custom properties
   that are common across all JHACAL applications.

   [g60 Session 56] L11-3 contrast remediation per
   L11-3-Contrast-Ratios-2026-Q2.md §6: --text-3 lightened (dark) /
   darkened (light) so tertiary text passes WCAG 2.2 AA 4.5:1; new
   --accent-text + --accent-text-hover tokens introduced for link
   *text* (existing --accent kept for button fills + UI strokes which
   only need 3:1); --color-danger lightened so error toasts pass AA.
   See COMPLETED.md Session 56 for the per-pair before/after ratios.

   [g66 Session 62] L10-2 Phase 1 — high-contrast token overrides.
   The shared-ui.css HC baseline (L10-1, g32) repaints pages via
   `body.jhacal-high-contrast` selectors with `!important`. That works
   but it blocks per-app theming. This block introduces the token-swap
   approach (the Speak-Simply pattern) at the design-token layer:
   apps that consume the shared tokens (--bg-1/2/3, --text-1/2/3,
   --border, --accent, --accent-text, --color-danger, etc.) now flip
   automatically under `body.jhacal-high-contrast` without needing
   per-app CSS. Phase 2 (later deploys) will migrate per-app local
   tokens (e.g. launcher's --bg/--surface/--text) onto the shared set.
   See AUDIT_2026-Q2.md §L10-2 and COMPLETED.md Session 62.
   ===================================================== */

:root {
  /* ===== BRAND COLORS (from JHACAL logo) ===== */
  --jhacal-gold: #f6c177;
  --jhacal-gold-light: #ffb74d;
  --jhacal-gold-dark: #ff9800;
  --jhacal-gradient: linear-gradient(135deg, #f6c177 0%, #ff9800 50%, #f6c177 100%);

  /* ===== DARK THEME PALETTE (default) ===== */
  --bg-1: #1f2328;           /* Darkest background */
  --bg-2: #272b31;           /* Medium background */
  --bg-3: #313740;           /* Lightest background (tiles, inputs) */
  --text-1: #f6f7f9;         /* Primary text */
  --text-2: #b9c0c7;         /* Secondary text */
  --text-3: #98a1ac;         /* Tertiary text (labels, hints) — [g60 L11-3 §5.1] lightened from #7d8590 to pass AA 4.5:1 on bg-1/bg-2/bg-3 */
  --border: #3d444d;         /* Standard borders */
  --accent: #0d6efd;         /* Primary action color (blue) — used for fills + UI strokes (3:1 gate). For link TEXT use --accent-text. */
  --accent-hover: #0b5ed7;   /* Accent hover state — fills only */
  --accent-text: #6ea8fe;    /* [g60 L11-3 §5.3] Link text colour on dark bg — passes AAA 7.29:1 on bg-1 */
  --accent-text-hover: #9ec5fe; /* [g60 L11-3 §5.4] Link text hover on dark bg */

  /* ===== SEMANTIC COLORS ===== */
  --color-success: #28a745;
  --color-warning: #ffc107;
  --color-danger: #ea868f;   /* [g60 L11-3 §5.5] Lightened from #dc3545 to pass AA 4.5:1 (yields 5.74 on bg-1) */
  --color-info: #17a2b8;

  /* ===== SHADOWS & EFFECTS ===== */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.35);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.5);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* ===== LAYOUT ===== */
  --content-width: 1120px;
  --content-width-narrow: 960px;
  --content-width-tiny: 820px;

  /* ===== TYPOGRAPHY ===== */
  --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-tile: Georgia, 'Times New Roman', Times, serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.88rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.14rem;
  --font-size-xl: 1.3rem;
  --font-size-2xl: 1.6rem;

  /* ===== TILES ===== */
  --tile-min-height: 54px;
  --tile-min-height-sm: 40px;
  --tile-font-size: 1.05rem;
  --tile-font-size-sm: 0.92rem;
  --tile-padding: 6px 8px;

  /* ===== BUTTONS ===== */
  --btn-height: 40px;
  --btn-padding: 4px 10px;
  --btn-font-size: 0.9rem;

  /* ===== SPACING ===== */
  --spacing-xs: 4px;
  --spacing-sm: 6px;
  --spacing-md: 8px;
  --spacing-lg: 12px;
  --spacing-xl: 16px;
  --spacing-2xl: 24px;

  /* ===== TRANSITIONS ===== */
  --transition-fast: 0.12s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;

  /* ===== ACCESSIBILITY ===== */
  --focus-ring: 0 0 0 3px rgba(13, 110, 253, 0.3);
  --focus-ring-gold: 0 0 0 3px rgba(246, 193, 119, 0.3);
}

/* ===== LIGHT THEME ===== */
/* [g60 Session 56] L11-3 §5.2 / §5.6: --text-3 darkened from #848c96 to #6a737d
   so it passes AA 4.5:1 against bg-1/bg-2/bg-3 (was failing all three with 3.20 / 3.00 / 2.86).
   --accent-text override added at #0a58ca so link TEXT on light bg passes AA 5.44:1
   (the existing --accent #0d6efd is kept for button fills which only need 3:1 UI gate).
   --accent-text-hover stays at the dark-mode value (overridden here for completeness). */
[data-theme="light"] {
  --bg-1: #f7f8fa;
  --bg-2: #eef1f4;
  --bg-3: #e8ecef;
  --text-1: #121417;
  --text-2: #5b6570;
  --text-3: #6a737d;          /* [g60 L11-3 §5.2] darkened from #848c96 */
  --border: #cfd6dd;
  --accent: #0d6efd;
  --accent-hover: #0b5ed7;
  --accent-text: #0a58ca;     /* [g60 L11-3 §5.6] darker than --accent so link text passes AA 5.44:1 */
  --accent-text-hover: #084298;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg-1: #f7f8fa;
    --bg-2: #eef1f4;
    --bg-3: #e8ecef;
    --text-1: #121417;
    --text-2: #5b6570;
    --text-3: #6a737d;        /* [g60 L11-3 §5.2] mirror the explicit-light-theme override above */
    --border: #cfd6dd;
    --accent-text: #0a58ca;   /* [g60 L11-3 §5.6] match light theme link-text contrast */
    --accent-text-hover: #084298;
  }
}

/* ===== HIGH-CONTRAST TOKEN OVERRIDES (L10-2 Phase 1, g66) ===== */
/* Applied when the shared settings modal adds `jhacal-high-contrast`
   to <body>. Token-swap strategy: zero !important — ordinary cascade
   wins because apps consume these as `var(--bg-1)` etc., which re-
   resolves to the HC values as soon as the class is present.

   Colour choices match the suite-wide HC baseline in shared-ui.css
   (black bg / white fg / high-vis yellow accents). --text-3 is kept
   white rather than a grey so tertiary text remains readable in HC.
   --border goes to pure white so UI edges are unmistakable.
   --color-danger stays a saturated red (#ff6b7a) that passes AA on
   #000 without being too bright. */
body.jhacal-high-contrast {
  --bg-1: #000;
  --bg-2: #111;
  --bg-3: #1a1a1a;
  --text-1: #fff;
  --text-2: #fff;
  --text-3: #fff;
  --border: #fff;
  --accent: #ffeb3b;            /* high-vis yellow — matches shared-ui.css HC links/focus */
  --accent-hover: #fff176;
  --accent-text: #ffeb3b;
  --accent-text-hover: #fff59d;
  --color-success: #7cff7c;
  --color-warning: #ffeb3b;
  --color-danger: #ff6b7a;
  --color-info: #7cdcff;
  --focus-ring: 0 0 0 3px #ffeb3b;
  --focus-ring-gold: 0 0 0 3px #ffeb3b;
}