/**
 * tokens.css — Design System CSS Custom Properties
 *
 * This file is the single source of truth for all design tokens.
 * NEVER hard-code colours, sizes, or spacing anywhere else in the CSS.
 *
 * See docs/DESIGN_SYSTEM.md for full rationale behind each value.
 */

:root {
  /* ── Palette: three UI colours + opacity variants ─────────────────────── */
  --color-ink-strong:     rgba(44, 74, 110, 1.00);  /* headings, icon fills       */
  --color-ink-base:       rgba(44, 74, 110, 0.80);  /* body text                  */
  --color-ink-muted:      rgba(44, 74, 110, 0.50);  /* secondary labels, captions */
  --color-ink-subtle:     rgba(44, 74, 110, 0.15);  /* borders, dividers, rules   */

  --color-primary:        #89C4D4;                  /* interactive elements       */
  --color-primary-soft:   rgba(137, 196, 212, 0.18);/* hover backgrounds          */
  --color-primary-focus:  rgba(137, 196, 212, 0.40);/* focus rings                */

  --color-surface-page:   #F4F8FA;                  /* page background            */
  --color-surface-raised: #FFFFFF;                  /* panels, cards              */
  --color-surface-sunken: #ECF3F7;                  /* inputs, date strip bg      */

  /* ── Assessment scores (functional — always shown with a text label) ──── */
  --color-score-0: #6BBF8E;   /* Yes            — pastel green     */
  --color-score-1: #F0C070;   /* Challenging    — pastel amber     */
  --color-score-2: #E8956B;   /* Safety Gear    — pastel orange    */
  --color-score-3: #D17575;   /* Only if must   — pastel red       */
  --color-score-4: #A84848;   /* No             — deep muted red   */

  /* ── Semantic notifications ─────────────────────────────────────────────── */
  --color-success: #6BBF8E;
  --color-warning: #F0C070;
  --color-error:   #D17575;
  --color-info:    #89C4D4;

  /* ── Typography ──────────────────────────────────────────────────────────── */
  --font-family: "Inter", system-ui, -apple-system, sans-serif;
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   21px;
  --text-xl:   28px;
  --text-2xl:  36px;

  /* ── Spacing (4px grid) ───────────────────────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Border radius ────────────────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:  12px;
  --radius-xl:  20px;
  --radius-full: 9999px;

  /* ── Elevation (blue-black tint only, never coloured shadows) ───────────── */
  --shadow-sm:  0 1px  3px rgba(44, 74, 110, 0.10);
  --shadow-md:  0 4px 12px rgba(44, 74, 110, 0.12);
  --shadow-lg:  0 8px 24px rgba(44, 74, 110, 0.15);

  /* ── Motion ───────────────────────────────────────────────────────────────── */
  --ease-default:   cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:  100ms;
  --duration-base:  200ms;
  --duration-slow:  300ms;

  /* ── Layout ───────────────────────────────────────────────────────────────── */
  --topbar-height-mobile:  48px;
  --topbar-height-desktop: 56px;
  --panel-width-tablet:   320px;
  --panel-width-desktop:  360px;
}

/* ── Hebrew: switch to Assistant for better RTL rendering ──────────────────────── */
:root:lang(he) {
  --font-family: 'Assistant', system-ui, -apple-system, sans-serif;
}