/* Media Bridge design tokens.

   The ONLY file allowed to name a colour (tests/test_design.py enforces it).
   Components read these custom properties and nothing else.

   Pairs are checked for WCAG AA in tests/test_design.py, in both themes:
   body and muted text on every surface, link text, text on each fill, and the
   3:1 needed by input borders and focus rings.

   Fill versus ink: --primary is a FILL (buttons, focus ring). On the gray page
   background it is only 4.3:1 as text, so text links use --primary-ink, the
   same blue a step darker. Same pattern for success, warning and danger. */

:root,
:root[data-theme="light"] {
  color-scheme: light;

  /* surfaces */
  --bg: #F0F2F5;
  --surface: #FFFFFF;
  --surface-muted: #F7F8FA;
  --surface-hover: #F2F3F5;
  --border: #DADDE1;
  --border-strong: #8A8D91;

  /* text */
  --text: #050505;
  --text-muted: #65676B;
  --text-on-fill: #FFFFFF;

  /* primary */
  --primary: #0866FF;
  --primary-hover: #0756D6;
  --primary-active: #064AB8;
  --primary-ink: #0759D6;
  --primary-surface: #EBF5FF;

  /* semantic */
  --success: #31A24C;
  --success-ink: #1E7B34;
  --success-surface: #E7F6EA;
  --warning: #F7B928;
  --warning-ink: #7A4F00;
  --warning-surface: #FFF5DB;
  --danger: #D3123A;
  --danger-hover: #B30F31;
  --danger-ink: #B5122E;
  --danger-surface: #FDECEE;

  --focus-ring: 0 0 0 3px #0866FF66;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow-raised: 0 2px 12px rgba(0, 0, 0, 0.12);
  --scrim: rgba(0, 0, 0, 0.4);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #18191A;
  --surface: #242526;
  --surface-muted: #2F3031;
  --surface-hover: #3A3B3C;
  --border: #3E4042;
  --border-strong: #7C7F84;

  --text: #E4E6EB;
  --text-muted: #B0B3B8;
  --text-on-fill: #FFFFFF;

  --primary: #0866FF;
  /* Hover darkens in dark mode too: a lighter blue loses white text's contrast. */
  --primary-hover: #0756D6;
  --primary-active: #064AB8;
  --primary-ink: #4A9CFF;
  --primary-surface: #1B2E4A;

  --success: #31A24C;
  --success-ink: #5DD879;
  --success-surface: #1F3326;
  --warning: #F7B928;
  --warning-ink: #F7C948;
  --warning-surface: #3A3020;
  --danger: #D3123A;
  --danger-hover: #E8294F;
  --danger-ink: #FF7A8A;
  --danger-surface: #3D1F24;

  --focus-ring: 0 0 0 3px #4A9CFF80;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-raised: 0 2px 12px rgba(0, 0, 0, 0.5);
  --scrim: rgba(0, 0, 0, 0.6);
}

:root {
  /* type */
  --font-sans: "Inter", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI",
    "Noto Sans Arabic", Tahoma, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: 0.75rem;   /* 12 */
  --text-sm: 0.875rem;  /* 14 */
  --text-base: 1rem;    /* 16 */
  --text-lg: 1.125rem;  /* 18 */
  --text-xl: 1.25rem;   /* 20 */
  --text-2xl: 1.5rem;   /* 24 */
  --text-3xl: 2rem;     /* 32 */
  --leading-tight: 1.3;
  --leading-body: 1.7;  /* Arabic needs more than Latin's usual 1.5 */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* space: a 4px scale */
  --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;

  /* shape */
  --radius-card: 8px;
  --radius-control: 6px;
  --radius-pill: 999px;
  --control-height: 44px; /* the minimum touch target */
  --page-max: 920px;
  --page-wide: 1400px;
  --page-medium: 720px;
  --page-narrow: 520px;
}