/* ==========================================================================
   Ghaith Design System · tokens
   The brand has two colors: logo red #990000 and white.
   Every other value is a tint (mixed with white) or shade (deepened) of that red.
   No black, no blue, no other hue.
   ========================================================================== */
:root {
  /* ---- Red scale: from the logo ---- */
  --red-950: #2E0606;   /* text: the darkest shade of the red, used instead of black */
  --red-900: #4D0A0A;
  --red-800: #730000;   /* hover on the main red */
  --red-700: #990000;   /* the logo red: logo, buttons, headings */
  --red-600: #B02626;
  --red-500: #C24D4D;
  --red-400: #D47777;
  --red-300: #E3A3A3;
  --red-200: #EFCACA;
  --red-100: #F7E4E4;
  --red-50:  #FCF3F3;
  --white:   #FFFFFF;

  /* ---- Neutrals built from the red (warm gray tinted toward the brand) ---- */
  --ink-900: var(--red-950);
  --ink-700: #4A1F1F;
  --ink-500: #7D5A5A;   /* secondary text */
  --ink-400: #A08585;
  --ink-300: #C9B5B5;
  --ink-200: #EBDDDD;   /* borders */
  --ink-100: #F6EEEE;

  /* ---- Roles ---- */
  --bg: var(--white);
  --surface: var(--white);
  --surface-alt: var(--red-50);
  --text: var(--red-950);
  --text-muted: var(--ink-500);
  --line: var(--ink-200);
  --brand: var(--red-700);
  --action: var(--red-700);
  --action-hover: var(--red-800);
  --focus: var(--red-400);

  /* ---- States (call statuses in the admin): red shades + shape, not other hues ---- */
  --ok: var(--red-700);       --ok-soft: var(--red-100);
  --warn: var(--red-600);     --warn-soft: var(--red-50);
  --danger: var(--red-800);   --danger-soft: var(--red-100);
  --info: var(--red-700);     --info-soft: var(--red-50);

  /* ---- Typography ---- */
  --font-display: "Alexandria", "IBM Plex Sans Arabic", system-ui, sans-serif;  /* headings: geometric, like the logo */
  --font-body: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;          /* running text and UI */
  --font-voice: "Baloo Bhaijaan 2", "IBM Plex Sans Arabic", sans-serif;          /* Ghaith's voice only */

  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: clamp(1.625rem, 1.2rem + 1.6vw, 2rem);
  --fs-44: clamp(2rem, 1.4rem + 2.4vw, 2.75rem);
  --fs-60: clamp(2rem, 1.2rem + 3.4vw, 3.75rem);
  --fs-84: clamp(2.9rem, 1.6rem + 5.6vw, 5.25rem);

  /* Arabic display faces have tall ascenders and deep descenders: headings need room between lines */
  --lh-tight: 1.5;
  --lh-snug: 1.6;
  --lh-body: 1.75;

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

  /* ---- Radius ---- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;
  /* Signature drop corner: three soft corners and one tight one, like a raindrop */
  --r-drop: 32px 32px 32px 8px;
  --r-drop-sm: 20px 20px 20px 6px;

  /* ---- Shadows (red-tinted, never gray) ---- */
  --sh-1: 0 1px 2px rgba(77, 10, 10, .06), 0 2px 8px -2px rgba(77, 10, 10, .08);
  --sh-2: 0 14px 34px -16px rgba(77, 10, 10, .28);
  --sh-3: 0 30px 60px -26px rgba(77, 10, 10, .4);
  --sh-ink: 4px 4px 0 var(--red-700);  /* cartoon shadow: only on Ghaith's elements */

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: 160ms;
  --t-base: 320ms;
  --t-slow: 640ms;

  /* ---- Layout ---- */
  --container: 1200px;
  --header-h: 76px;
}