/* ==========================================================================
   Diora design tokens. Single source of truth for the web identity.
   Used by the provider portal, the admin panel and the landing site.

   Sampled from the XD2 app (docs/design/app-design.md): white, teal #72C4BD,
   gold gradient #CF9B35 to #E2C456, ink #2B2A3B, Cairo.

   Accessibility adjustments on top of the app palette:
   - Labels on teal and on the gold gradient are ink, not white. White on those
     colours is about 2:1; ink is above 6:1.
   - Small text uses --ink-2 and the *-700 shades, because the app's #8E8E93 and
     raw teal fail 4.5:1 at web text sizes.
   Pages never read a raw hex value: they read the semantic tokens below.
   ========================================================================== */
:root {
  /* Teal scale. 400 is the brand colour. */
  --teal-50: #f4fafa;
  --teal-100: #e9f5f4;
  --teal-200: #cfeae7;
  --teal-300: #a6dbd6;
  --teal-400: #72c4bd;
  --teal-500: #4eaaa2;
  --teal-600: #2f8a82;
  --teal-700: #1f6f69;
  --teal-800: #175450;
  --teal-900: #0f3b38;

  /* Gold scale. 500 and 300 are the two gradient stops of the app. */
  --gold-50: #fcf8ec;
  --gold-100: #f8efd3;
  --gold-200: #f0dea6;
  --gold-300: #e2c456;
  --gold-400: #d8af45;
  --gold-500: #cf9b35;
  --gold-700: #84600f;
  --gold-gradient: linear-gradient(90deg, var(--gold-500), var(--gold-300));
  --gold-gradient-diag: linear-gradient(135deg, var(--gold-300), var(--gold-500));
  --hood-gradient: linear-gradient(160deg, #7fcbc4 0%, var(--teal-400) 60%, #66bab3 100%);
  --deep-gradient: linear-gradient(180deg, var(--teal-800) 0%, var(--teal-900) 100%);

  /* Neutrals */
  --ink: #2b2a3b;
  --ink-2: #63626f;
  --ink-3: #8e8e93;
  --hint: #b7b7b7;
  --line: #ececec;
  --line-strong: #dcdcdf;
  --band: #f2f2f2;
  --row-alt: #f7f7f7;
  --white: #ffffff;
  --canvas: #f7fbfa;

  /* Status: soft tint for the surface, -ink for text on it */
  --success: #35c24a;
  --success-ink: #1a7a2c;
  --success-soft: #e8f8eb;
  --warning: #d8af45;
  --warning-ink: #7c5a0c;
  --warning-soft: #fbf3da;
  --danger: #e53945;
  --danger-ink: #bf1f2b;
  --danger-soft: #fdecee;
  --info: #72c4bd;
  --info-ink: #1f6f69;
  --info-soft: #e9f5f4;
  --neutral-ink: #5a5966;
  --neutral-soft: #f1f1f3;

  /* Translucent layers on photos, teal and the deep rail */
  --backdrop: rgba(15, 59, 56, 0.45);
  --veil-94: rgba(255, 255, 255, 0.94);
  --veil-75: rgba(255, 255, 255, 0.75);
  --veil-35: rgba(255, 255, 255, 0.35);
  --veil-18: rgba(255, 255, 255, 0.18);
  --veil-14: rgba(255, 255, 255, 0.14);
  --veil-12: rgba(255, 255, 255, 0.12);
  --veil-10: rgba(255, 255, 255, 0.1);
  --veil-08: rgba(255, 255, 255, 0.08);
  --gold-glow: rgba(207, 155, 53, 0.75);

  /* Semantic aliases */
  --color-text: var(--ink);
  --color-muted: var(--ink-2);
  --color-link: var(--teal-700);
  --color-focus: var(--teal-600);
  --star: #f0b83f;
  --star-empty: #bdbdbd;

  /* Type: Cairo for both languages. Arabic needs the generous line height. */
  --font: "Cairo", "Segoe UI", Tahoma, system-ui, sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-md: 0.9375rem;
  --fs-lg: 1.0625rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: 1.875rem;
  --fs-4xl: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi: 600;
  --fw-bold: 700;
  --fw-black: 800;
  --lh-tight: 1.35;
  --lh-body: 1.75;

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

  /* Radius: pills for controls, soft cards, a large hood as in the app header */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* Shadow: tinted with ink so it never reads as dirty grey */
  --shadow-xs: 0 1px 2px rgba(43, 42, 59, 0.05);
  --shadow-sm: 0 3px 10px rgba(43, 42, 59, 0.06);
  --shadow-md: 0 10px 28px -8px rgba(43, 42, 59, 0.14);
  --shadow-lg: 0 24px 60px -16px rgba(23, 84, 80, 0.3);
  --shadow-gold: 0 6px 16px -6px rgba(207, 155, 53, 0.6);

  /* Control metrics. The admin surface overrides these for density. */
  --control-h: 48px;
  --control-h-sm: 38px;
  --control-px: var(--sp-5);
  --cell-py: var(--sp-4);

  /* Layout */
  --sidebar-w: 276px;
  --topbar-h: 68px;
  --content-max: 1240px;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --t-fast: 150ms;
  --t-med: 220ms;

  /* Stack order */
  --z-topbar: 30;
  --z-drawer: 50;
  --z-dropdown: 60;
  --z-modal: 100;
  --z-toast: 300;
}

/* Admin is used all day with long tables: tighter controls, same identity. */
[data-density="compact"] {
  --control-h: 42px;
  --control-h-sm: 34px;
  --control-px: var(--sp-4);
  --cell-py: var(--sp-3);
}

/* Multiplier for transforms, which have no logical equivalent. */
[dir="ltr"] { --dir: 1; }
[dir="rtl"] { --dir: -1; }