/* ==========================================================================
   Design tokens (foundation, stage D0).
   Loaded right after assets/css/style.css (handle "mentayar-ds-tokens"), so
   the legacy --color-* / --space-* / --radius-* / --shadow-* names that
   style.css declares are re-declared HERE with the accessible values and every
   existing page inherits them without being rewritten.

   Rules for anyone adding CSS:
   - new code uses --ds-* names only; legacy names exist for old rules;
   - logical properties only (margin-inline, padding-block, inset-inline ...);
   - every colour pair that carries text is listed in docs/ui-redesign/
     contrast-check.js, which READS this file; change a colour here, run
     `node docs/ui-redesign/contrast-check.js` and keep it green.

   Brands: MentaYar is the :root default. RavanLine (blog 2) is selected the way
   the theme already distinguishes the brands: the `is-ravanline` body class
   added in functions.php. Language (html lang/dir), market/currency and time
   zone are separate concepts and are never read from these tokens.
   ========================================================================== */

/* ---------- Fonts: self-hosted, SIL OFL 1.1 (see docs/ui-redesign/fonts-licence.md) ---------- */
@font-face {
	font-family: "Vazirmatn";
	src: url("../../fonts/Vazirmatn-Variable.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Inter";
	src: url("../../fonts/Inter-Variable.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	/* Latin only: a Persian page never downloads Inter unless it shows Latin text that Vazirmatn is not asked to draw. */
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/* ---------- Colour: brand and action ---------- */
	--ds-brand: #00A693;          /* decoration, large icons, logo areas ONLY: white on it is 3.05, so never text and never behind white text */
	--ds-action: #007A6A;         /* primary button, active tab, link text */
	--ds-action-hover: #005B50;   /* hover / pressed */
	--ds-deep: #005B50;           /* headings accent, links on mint, focus ring */
	--ds-on-action: #FFFFFF;
	--ds-mint: #F2FAF7;           /* tinted surface */
	--ds-mint-strong: #E1F2EC;    /* hover on a tinted surface, selected row */

	/* ---------- Colour: surfaces and text ---------- */
	--ds-bg: #F8FAFB;
	--ds-surface: #FFFFFF;
	--ds-tint: #F1F5F4;           /* neutral inset surface (legacy --color-card) */
	--ds-text: #172B2A;
	--ds-text-2: #526563;
	--ds-line: #DDE7E3;           /* hairlines and card borders only (decorative) */
	--ds-control-line: #7F8F8C;   /* input / select / checkbox borders: 3:1 against the surface (WCAG 1.4.11) */
	--ds-disabled-text: #5C6C69;
	--ds-disabled-bg: #E9EFED;
	--ds-ink: #172B2A;            /* dark surface (tooltips, toast); text on it is --ds-on-ink */
	--ds-on-ink: #FFFFFF;
	--ds-overlay: rgba(23, 43, 42, 0.55);

	/* ---------- Colour: semantic states (text colour + tinted background + border) ---------- */
	--ds-danger: #B42318;   --ds-danger-hover: #8E1B12;   --ds-danger-bg: #FEF3F2;   --ds-danger-line: #F2B8B2;
	--ds-success: #067647;  --ds-success-bg: #ECFDF3;  --ds-success-line: #A6E0BE;
	--ds-warning: #B54708;  --ds-warning-bg: #FFFAEB;  --ds-warning-line: #F1CE8A;
	--ds-info: #175CD3;     --ds-info-bg: #EFF8FF;     --ds-info-line: #B2DDFF;
	--ds-neutral: #475467;  --ds-neutral-bg: #F2F4F7;  --ds-neutral-line: #D0D5DD;

	/* Warm accent used as TEXT (star rating, "amber" notes). The legacy #c98f5e / #b9791e fail as text. */
	--ds-accent: #8F5A24;   --ds-accent-bg: #FBF3EA;
	/* Star fill: a graphic, always shown next to the numeric rating. */
	--ds-star: #EAB04A;

	/* ---------- Colour families (stage V, the visual layer): icon tiles, area chips, test cards.
	   Each family is a light background + a dark ink. The ink is used for ICONS (graphic, 3:1 needed) and for short bold
	   labels on white or on its own background; every ink is >= 4.5:1 on white and on its background (see contrast-check.js).
	   Pages set --ds-f-bg / --ds-f-ink through the .ds-f-<family> classes in visual.css. ---------- */
	--ds-f-teal-bg: #DDF4EF;   --ds-f-teal-ink: #0B6B5D;
	--ds-f-green-bg: #DCFCE7;  --ds-f-green-ink: #166534;
	--ds-f-blue-bg: #E0ECFF;   --ds-f-blue-ink: #1D4ED8;
	--ds-f-sky-bg: #DFF3FD;    --ds-f-sky-ink: #0369A1;
	--ds-f-indigo-bg: #E4E7FF; --ds-f-indigo-ink: #4338CA;
	--ds-f-violet-bg: #EDE7FE; --ds-f-violet-ink: #6D28D9;
	--ds-f-pink-bg: #FCE4F1;   --ds-f-pink-ink: #BE185D;
	--ds-f-rose-bg: #FFE1E7;   --ds-f-rose-ink: #BE123C;
	--ds-f-red-bg: #FEE2E2;    --ds-f-red-ink: #B91C1C;
	--ds-f-orange-bg: #FFE8D2; --ds-f-orange-ink: #9A3412;
	--ds-f-amber-bg: #FEF0C3;  --ds-f-amber-ink: #92400E;
	--ds-f-slate-bg: #E4E9F0;  --ds-f-slate-ink: #334155;

	/* ---------- Gradients (stage V): large surfaces with WHITE text. Every stop keeps white >= 4.5:1 (#007A6A is 5.3:1), the
	   brighter brand teal appears only as a light glow in a corner where no text sits. ---------- */
	--ds-grad-brand: linear-gradient(135deg, #004A40 0%, #006457 45%, #007A6A 100%);
	--ds-grad-night: linear-gradient(135deg, #1E3A8A 0%, #1D4ED8 100%);
	--ds-grad-berry: linear-gradient(135deg, #831843 0%, #BE185D 100%);
	--ds-grad-sunset: linear-gradient(135deg, #7C2D12 0%, #C2410C 100%);
	--ds-grad-slate: linear-gradient(135deg, #1F2937 0%, #475569 100%);
	--ds-shadow-card: 0 8px 20px -6px rgba(23, 43, 42, 0.18), 0 1px 2px rgba(23, 43, 42, 0.06);

	/* ---------- Focus ring ---------- */
	--ds-focus: #005B50;
	--ds-focus-on-dark: #5CD6C6;
	--ds-focus-width: 2px;
	--ds-focus-offset: 2px;

	/* ---------- Spacing: 4/8 scale ---------- */
	--ds-space-1: 0.25rem;   /* 4  */
	--ds-space-2: 0.5rem;    /* 8  */
	--ds-space-3: 0.75rem;   /* 12 */
	--ds-space-4: 1rem;      /* 16 */
	--ds-space-5: 1.25rem;   /* 20 */
	--ds-space-6: 1.5rem;    /* 24 */
	--ds-space-8: 2rem;      /* 32 */
	--ds-space-10: 2.5rem;   /* 40 */
	--ds-space-12: 3rem;     /* 48 */
	--ds-gutter: 1rem;       /* page side gutter on phones; 1.5rem from 768px */

	/* ---------- Type ---------- */
	--ds-font-fa: "Vazirmatn", Tahoma, "Segoe UI", system-ui, sans-serif;
	--ds-font-en: "Inter", "Vazirmatn", system-ui, -apple-system, "Segoe UI", Roboto, Tahoma, sans-serif;
	--ds-font: var(--ds-font-fa);
	--ds-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--ds-fs-xs: 0.875rem;    /* 14, the minimum text size */
	--ds-fs-sm: 0.9375rem;   /* 15 */
	--ds-fs-md: 1rem;        /* 16, body */
	--ds-fs-lg: 1.125rem;    /* 18 */
	--ds-fs-xl: 1.25rem;     /* 20 */
	--ds-fs-2xl: 1.5rem;     /* 24 */
	--ds-fs-3xl: 1.875rem;   /* 30 */
	--ds-fs-4xl: 2.25rem;    /* 36 */
	--ds-lh-body: 1.7;
	--ds-lh-tight: 1.35;
	--ds-fw-regular: 400;
	--ds-fw-medium: 500;
	--ds-fw-semibold: 600;
	--ds-fw-bold: 700;

	/* ---------- Shape ---------- */
	--ds-radius-card: 14px;
	--ds-radius-control: 10px;
	--ds-radius-sm: 8px;
	--ds-radius-pill: 999px;
	--ds-control-h: 2.75rem;     /* 44px touch target */
	--ds-border: 1px solid var(--ds-line);

	/* ---------- Elevation: none except overlays ---------- */
	--ds-shadow-pop: 0 12px 32px -8px rgba(23, 43, 42, 0.28), 0 2px 6px rgba(23, 43, 42, 0.08);
	--ds-shadow-bar: 0 -1px 0 var(--ds-line);

	/* ---------- Layout ---------- */
	--ds-container: 1160px;
	--ds-header-h: 4rem;
	--ds-tabbar-h: 4rem;
	/* Breakpoints (media queries cannot read custom properties, so the numbers are repeated in CSS; MentayarUI.bp exposes them to JS):
	   sm 640 (sheet / phone), md 768, lg 1024 (sidebar shell), xl 1200 (full desktop header) */
	--ds-bp-sm: 640px;
	--ds-bp-md: 768px;
	--ds-bp-lg: 1024px;
	--ds-bp-xl: 1200px;
	--ds-safe-top: env(safe-area-inset-top, 0px);
	--ds-safe-bottom: env(safe-area-inset-bottom, 0px);
	--ds-safe-start: env(safe-area-inset-left, 0px);
	--ds-safe-end: env(safe-area-inset-right, 0px);

	/* ---------- Stacking ---------- */
	--ds-z-sticky: 20;
	--ds-z-header: 50;       /* same as the legacy .site-header */
	--ds-z-dropdown: 60;
	--ds-z-tabbar: 70;
	--ds-z-overlay: 400;     /* above the legacy search overlay (300) and invoice-modal (100) */
	--ds-z-toast: 500;

	/* ---------- Motion ---------- */
	--ds-dur: 150ms;
	--ds-ease: cubic-bezier(0.2, 0, 0, 1);

	/* ==================================================================
	   Legacy names (style.css :root) re-declared with the accessible values.
	   ================================================================== */
	--color-bg: var(--ds-bg);
	--color-surface: var(--ds-surface);
	--color-card: var(--ds-tint);
	--color-border: var(--ds-line);
	--color-border-strong: var(--ds-control-line);
	--color-text: var(--ds-text);
	--color-text-muted: var(--ds-text-2);
	--color-primary: var(--ds-action);              /* was #00a693: white on it fails */
	--color-primary-dark: var(--ds-deep);
	--color-primary-light: var(--ds-mint);
	--color-accent: var(--ds-accent);
	--color-success: var(--ds-success);
	--color-danger: var(--ds-danger);
	--color-warning: var(--ds-warning);
	--color-rating: var(--ds-star);                 /* graphic only, next to a numeric rating */
	--color-rating-dark: var(--ds-accent);          /* text */
	--color-highlight: var(--ds-success);
	--color-weekend: var(--ds-danger);
	--space-xs: 4px;  --space-sm: 8px;  --space-md: 12px;  --space-base: 16px;  --space-lg: 20px;
	--space-xl: 24px; --space-2xl: 32px; --space-3xl: 40px; --space-4xl: 48px;
	--radius-sm: var(--ds-radius-sm);
	--radius-md: var(--ds-radius-control);
	--radius-lg: var(--ds-radius-card);
	--shadow-sm: none;
	--shadow-md: var(--ds-shadow-pop);
	--container-width: var(--ds-container);
	--font-body: var(--ds-font);
}

/* English (LTR) pages: Latin first. Persian pages keep Vazirmatn first (it draws Latin too, so one font file and one voice). */
html[lang^="en"] {
	--ds-font: var(--ds-font-en);
}

/* ==========================================================================
   Brand theme: RavanLine (blog 2). The owner asked for the same action colours
   and layout on both sites, so the differences are deliberately small: a warm
   neutral ground and the warm accent. Action, state and focus colours are NOT
   overridden, so every contrast result stays identical.
   ========================================================================== */
body.is-ravanline {
	--ds-bg: #FAF9F6;
	--ds-tint: #F3F1EC;
	--ds-line: #E3E0D8;
	--ds-accent: #8A5A2B;
	--ds-accent-bg: #FBF3EA;
	--ds-text-2: #4F6260;
	--color-bg: var(--ds-bg);
	--color-card: var(--ds-tint);
	--color-border: var(--ds-line);
	--color-text-muted: var(--ds-text-2);
	--color-accent: var(--ds-accent);
	--color-rating-dark: var(--ds-accent);
}

/* ==========================================================================
   Dark surfaces (footer on a dark section, toast, tooltip): re-point focus.
   ========================================================================== */
.ds-on-dark {
	--ds-focus: var(--ds-focus-on-dark);
	color: var(--ds-on-ink);
}

/* ==========================================================================
   Motion: everything that animates is instant for people who ask for less.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	:root {
		--ds-dur: 0.01ms;
	}
}

/* Larger gutter once there is room. */
@media (min-width: 768px) {
	:root { --ds-gutter: 1.5rem; }
}