/*
 * Almored Oasis — approved Phase-One design tokens.
 *
 * Source of truth: GPT/PROTOTYPE-REPORT.md §C (colour palette, typography scale, layout
 * and component rules), approved for development. These replace the earlier
 * docs/02-design-system.md token draft for BOTH apps.
 *
 * src/Almored.Admin/wwwroot/css/tokens.css mirrors everything below in a marked "shared
 * region" and then appends admin-only tokens (mono face, modal/toast layers, shell
 * dimensions). The earlier deliberate divergence — the admin keeping the draft
 * navy + antique-brass palette — was retired when the public theme was applied to the
 * admin. Change a token here and make the same change there.
 *
 * Font FILES are unchanged and still self-hosted (wwwroot/fonts + css/fonts.css):
 * Fraunces, El Messiri, IBM Plex Sans, IBM Plex Sans Arabic.
 */

:root {
  color-scheme: light;

  /* ---- Colour (report §C) ---- */
  --navy-950: #061725; /* Deep Navy — footer, deepest backgrounds */
  --navy-900: #071d2f; /* Corporate Navy — hero, key panels, high-trust sections */
  --navy-850: #0a253b;
  --navy-800: #0c2d48;
  --brand-700: #0a4c80; /* Almored Blue — primary brand surfaces */
  --brand-600: #126296;
  --brand-500: #2679a8; /* Mid Blue — secondary accents */
  --cyan-400: #69c4d0; /* Restrained Cyan — focus, progress, highlights */
  --cyan-100: #dff2f5; /* Soft Cyan — icon and status backgrounds */
  --white: #ffffff;
  --off-white: #f5f7f8; /* primary page background */
  --blue-wash: #edf4f7; /* section separation */

  --line: #d8e1e5; /* fine neutral border */
  --line-strong: #c7dce5;
  --line-dark: rgba(255, 255, 255, 0.15); /* borders on navy surfaces */

  --ink: #102536; /* primary text */
  --muted: #5c6c78; /* secondary text */
  --muted-dark: #a8bac6; /* secondary text on navy */
  --ink-soft: #3f5564; /* list/detail text */

  /* Hairlines and rules drawn on navy surfaces (process connector, step outlines). */
  --rule-navy: #3f6b83;
  --rule-navy-soft: #38627a;

  /* Footer ink ramp. These were repeated as literals across the footer rules; named here so
     the relationship between them is legible. Values unchanged from the approved design. */
  --footer-ink: #d1dce3;
  --footer-ink-soft: #c6d3db;
  --footer-ink-muted: #9dafbb;
  --footer-ink-dim: #7f919d;

  /* Semantic. Contrast-checked against their own soft backgrounds (WCAG AA body text). */
  --success: #1f7352;
  --success-soft: #e7f4ed;
  --success-line: #b7ddcb;
  --error: #a93b40;
  --error-soft: #fff0f0;
  --error-line: #efc4c6;
  --warning: #6f531d;
  --warning-soft: #fff8e7;
  --warning-line: #d8a83d;

  /* ---- Typography families (existing self-hosted faces) ---- */
  --font-display-en: "Fraunces", Georgia, "Times New Roman", serif;
  --font-display-ar: "El Messiri", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --font-body-en: "IBM Plex Sans", ui-sans-serif, system-ui, Arial, sans-serif;
  --font-body-ar: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;

  /* Resolved per-document below so components never branch on language themselves. */
  --font-display: var(--font-display-en);
  --font-body: var(--font-body-en);

  /* ---- Typography scale (report §C) ---- */
  --text-h1: clamp(2.75rem, 5vw, 5.8rem);
  --text-h2: clamp(2.1rem, 3.5vw, 3.8rem);
  --text-h3: clamp(1.35rem, 2vw, 1.85rem);
  --text-lead: clamp(1.05rem, 1.6vw, 1.28rem);
  --text-body: 1rem;
  --text-small: 0.88rem;
  --text-micro: 0.78rem;

  --tracking-display: -0.025em;
  --leading-display: 1.08;
  --leading-body: 1.65;

  /* ---- Spacing — 4px foundation ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;

  /* ---- Layout ---- */
  --container: 1240px;
  --container-wide: 1360px;
  --reading: 760px; /* legal / long-form measure */
  --gutter: 48px;
  --gutter-narrow: 32px;
  --section: clamp(5rem, 8vw, 8.5rem);
  --section-tight: clamp(3.75rem, 6vw, 6rem);
  --header-h: 78px;
  --header-h-scrolled: 70px;
  --header-h-mobile: 72px;

  /* ---- Radii (4 / 10 / 18 / 28) ---- */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---- Elevation — two restrained levels only ---- */
  --shadow-sm: 0 8px 24px rgba(6, 23, 37, 0.07);
  --shadow-md: 0 22px 60px rgba(6, 23, 37, 0.12);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-micro: 180ms;
  --motion-reveal: 620ms;

  /* ---- Z-index ---- */
  --z-header: 1000;
  --z-skip: 2000;
}

/*
 * Arabic resolves the display/body families and gets a roomier rhythm. Never negative
 * letter-spacing and never uppercase transforms on Arabic (report §C).
 */
:root[lang="ar"] {
  --font-display: var(--font-display-ar);
  --font-body: var(--font-body-ar);
  --tracking-display: 0;
  --leading-display: 1.35;
  --leading-body: 1.85;
}