/* Dr. Chef design tokens: direction C "Retro Clinic".
   Brand colours come from the logo and packaging and must not change (DRCHEF_KNOWLEDGE_BASE.md §1).
   Tints and shades below are derived from those hues only. */

:root {
  /* Brand palette */
  --teal: #125058;
  --orange: #D05D28;
  --turquoise: #06B6B6;
  --aqua: #C1E2E7;
  --poster-orange: #F35901;
  --rust: #AF5026;
  --kebab: #D58F60;
  --steel: #D3DAE8;
  --white: #FFFFFF;

  /* Derived tints and shades */
  --teal-900: #0C3A40;
  --teal-600: #3D6E75;
  --teal-300: #8FB0B5;
  --teal-100: #DCE9EC;
  --teal-50: #F1F7F8;
  --orange-50: #FBEDE6;

  /* Semantic colours (contrast-checked by tools/check-contrast.mjs) */
  --color-bg: var(--white);
  --color-surface: var(--white);
  --color-surface-soft: var(--teal-50);
  --color-text: var(--teal);
  --color-text-muted: var(--teal-600);
  --color-text-on-dark: var(--white);
  --color-text-on-turquoise: var(--teal-900);
  --color-border: var(--teal);
  --color-border-soft: var(--teal-100);
  --color-accent: var(--orange);          /* fills and large text only */
  --color-accent-strong: var(--rust);     /* small text/links in accent colour, hover */
  --color-link: var(--rust);
  --color-focus: var(--orange);
  --color-success: var(--teal);
  --color-success-bg: var(--aqua);
  --color-error: var(--rust);
  --color-error-bg: var(--orange-50);

  /* Typography: one family for Arabic and Latin, echoing the bubble wordmark */
  --font: 'Baloo Bhaijaan 2', 'Segoe UI', Tahoma, system-ui, sans-serif;
  --weight-regular: 500;
  --weight-medium: 600;
  --weight-bold: 700;
  --weight-black: 800;

  /* Type scale: 18px base, ratio 1.25; display sizes are fluid */
  --text-xs: 0.8rem;      /* 14.4px */
  --text-s: 0.889rem;     /* 16px */
  --text-m: 1rem;         /* 18px */
  --text-l: 1.25rem;      /* 22.5px */
  --text-xl: 1.563rem;    /* 28px */
  --text-2xl: clamp(1.75rem, 1.2rem + 2.2vw, 2.44rem);     /* 31 → 44px */
  --text-3xl: clamp(2.1rem, 1.3rem + 3.4vw, 3.05rem);      /* 38 → 55px */
  --text-display: clamp(2.65rem, 1.4rem + 5.4vw, 5.1rem);  /* 48 → 92px */
  --leading-tight: 1.08;
  --leading-heading: 1.2;
  --leading-body: 1.65;

  /* Spacing (4px grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Shape: chunky borders and hard offset shadows are the retro signature */
  --border-w: 3px;
  --border: var(--border-w) solid var(--color-border);
  --radius-s: 12px;
  --radius-m: 18px;
  --radius-l: 28px;
  --radius-xl: 40px;
  --radius-pill: 999px;
  --shadow-x: 4px;                 /* flipped for RTL below so shadows fall "behind" the reading direction */
  --shadow-hard: var(--shadow-x) 4px 0 var(--teal);
  --shadow-hard-l: calc(var(--shadow-x) * 2) 8px 0 var(--teal);
  --shadow-pressed: calc(var(--shadow-x) / 4) 1px 0 var(--teal);

  /* Layout */
  --container: 1200px;
  --gutter: 16px;
  --header-h: 80px;
  --action-bar-h: 72px;

  /* Motion */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur-fast: 120ms;
  --dur-med: 220ms;

  /* Layers */
  --z-header: 50;
  --z-action-bar: 60;
  --z-overlay: 90;
  --z-toast: 100;
}

[dir="rtl"] {
  --shadow-x: -4px;
}