/*
 * البوصلة المهنية · Brand tokens v1.0 (approved logo, 29 Sep 2026)
 * Single source of truth. Components use these variables only, never raw hex.
 * Contrast figures are WCAG 2.x ratios measured against --color-canvas (#F3F0EA).
 * Brand palette = 3 colours: off-white, light blue, dark blue. The blue ramp is
 * tints of those two. Status colours (danger/success/warning) are functional,
 * not brand colours, and appear only in feedback states.
 */
:root {
  /* Brand core */
  --color-canvas: #F3F0EA;        /* off-white page background (base) */
  --color-surface: #FFFFFF;       /* cards, inputs, sheets */
  --color-surface-tint: #E4ECF4;  /* light blue wash for sections and selected cards */
  --color-ink: #1F3A5C;           /* dark blue: headings, body text, primary buttons. 10.2:1 */
  --color-ink-strong: #0F1B2D;    /* deepest ink: hero headline, logo tail. 15.2:1 */
  --color-ink-soft: #5B6170;      /* slate: captions, helper text. 5.5:1 */

  /* Blue ramp (from the logo ring, light -> dark) */
  --color-blue-100: #A9C0D8;      /* light blue: fills, accents, chips. NOT for text (1.7:1) */
  --color-blue-200: #86A6C6;      /* decorative only (2.2:1) */
  --color-blue-300: #5A82AB;      /* large icons, borders on focus (3.5:1, non-text OK) */
  --color-blue-400: #3D6692;      /* links, secondary buttons text, progress line. 5.3:1 */
  --color-blue-500: #2C4F77;      /* primary button hover/pressed. 7.4:1 */
  --color-blue-600: #1F3A5C;      /* = --color-ink */

  /* Lines */
  --color-line: #D9D3C7;          /* hairline borders and dividers on canvas */
  --color-line-strong: #A9C0D8;   /* input borders on white, selected outlines */
  --color-focus: #3D6692;         /* 2px focus ring + 2px offset, always visible */

  /* Functional status (not brand) */
  --color-danger: #B42318;        /* errors, destructive actions. 5.8:1 */
  --color-danger-bg: #FBEAE8;
  --color-success: #1E6B45;       /* success, confirmed. 5.7:1 */
  --color-success-bg: #E6F2EC;
  --color-warning: #8A5A00;       /* hold timer low, notices. 5.2:1 */
  --color-warning-bg: #FBF1DD;

  /* Logo only. Never use in UI */
  --color-logo-gold: #C8A15A;     /* needle tip, inside the logo SVG only */

  /* On-colour text */
  --color-on-ink: #FFFFFF;        /* text on dark blue buttons. 11.6:1 */

  /* Website typography: Alyamama LOCKED by Aziz 6 Oct 2026 (supersedes Tajawal + Readex Pro). Code switch pending. */
  --font-arabic: "Alyamama", sans-serif;
  --font-latin: "Alyamama", sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 700; /* Arabic; English overrides to 600 */
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Type scale (mobile first; Arabic needs generous line height) */
  --text-xs: 0.8125rem;   /* 13px, legal/meta only */
  --text-sm: 0.9375rem;   /* 15px, captions */
  --text-base: 1.0625rem; /* 17px, body */
  --text-lg: 1.25rem;     /* 20px, card titles */
  --text-xl: 1.5rem;      /* 24px, section titles mobile */
  --text-2xl: 2rem;       /* 32px, page titles mobile */
  --text-3xl: 2.5rem;     /* 40px, hero mobile */
  --text-4xl: 3.25rem;    /* 52px, hero desktop */
  --leading-body: 1.8;
  --leading-heading: 1.35;

  /* Spacing (4px base) */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem;

  /* Shape and depth: calm, large radius, minimal shadow */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(15, 27, 45, 0.06), 0 4px 16px rgba(15, 27, 45, 0.05);
  --shadow-sheet: 0 -8px 32px rgba(15, 27, 45, 0.12);

  /* Layout */
  --container-max: 1200px;
  --container-text: 720px;
  --gutter-mobile: 16px;
  --tap-target-min: 44px;

  /* Motion: directional, short, respects reduced motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 240ms;
  --duration-slow: 400ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; }
}