/* Design tokens — docs/DESIGN.md §48. The single source for colour, type, spacing and layout values. */

:root {
    /* Colors */
    --color-ink: #070707;
    --color-paper: #ffffff;
    --color-fog: #f4f4f2;
    --color-stone: #a3a3a0;
    --color-graphite: #5c5c5c;
    --color-border: rgba(7, 7, 7, 0.12);
    --color-border-inverse: rgba(255, 255, 255, 0.18);

    /* Brand accent: seal red, about 10% of the interface (docs/DESIGN.md §3.1).
       Text use only on light surfaces; on ink it is decoration (rules) only. */
    --color-accent: #9f0310;
    --color-accent-hover: #7a020c;

    /* Functional only: validation, status, alerts. Never brand accents. */
    --color-success: #245c3a;
    --color-warning: #7a5a18;
    --color-error: #8a2f2f;

    /* Fonts */
    --font-ui-en: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --font-display-en: "Newsreader", Georgia, "Times New Roman", serif;
    --font-ui-fa: "Vazirmatn", Tahoma, Arial, sans-serif;

    /* Active fonts. Overridden per language below. */
    --font-ui: var(--font-ui-en);
    --font-display: var(--font-display-en);

    /* Type scale */
    --text-caption: 0.8125rem;
    --text-small: 0.875rem;
    --text-body: 1rem;
    --text-lead: 1.25rem;
    --text-subheading: clamp(1.375rem, 2vw, 1.75rem);
    --text-heading: clamp(2.25rem, 4.2vw, 3.75rem);
    --text-heading-lg: clamp(2.75rem, 6vw, 5.5rem);
    --text-display: clamp(3rem, 6.4vw, 6.25rem);
    --text-label: 0.75rem;

    --leading-caption: 1.3;
    --leading-body: 1.6;
    --leading-lead: 1.5;
    --leading-subheading: 1.25;
    --leading-heading: 1.04;
    --leading-display: 1;

    --tracking-display: -0.02em;
    --tracking-heading: -0.015em;
    --tracking-eyebrow: 0.18em;
    --tracking-label: 0.16em;
    --eyebrow-transform: uppercase;

    /* Accent rule beside eyebrows and card categories. */
    --rule-length: 28px;

    /* Layout */
    --page-max-width: 1440px;
    --wide-content: 1160px;
    --reading-width: 760px;
    --form-width: 800px;
    --page-padding: clamp(20px, 4vw, 64px);
    --section-space: clamp(64px, 9vw, 144px);
    --section-space-tight: clamp(40px, 5vw, 80px);
    --grid-gap: clamp(20px, 3vw, 48px);

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --space-32: 128px;
    --space-40: 160px;

    /* Radius — intentionally sharp */
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 6px;

    --control-height: 48px;
    --transition: 160ms ease;
}

/*
 * Arabic-script languages. Persian today; Arabic and others can join this
 * selector later. Connected scripts need looser leading, no negative
 * tracking and no forced uppercase.
 */
:root:lang(fa) {
    --font-ui: var(--font-ui-fa);
    --font-display: var(--font-ui-fa);

    --text-heading: clamp(2rem, 3.6vw, 3.25rem);
    --text-heading-lg: clamp(2.5rem, 5.2vw, 4.5rem);
    --text-display: clamp(2.75rem, 5.4vw, 5rem);
    --text-label: 0.8125rem;

    --leading-body: 1.85;
    --leading-lead: 1.8;
    --leading-subheading: 1.5;
    --leading-heading: 1.35;
    --leading-display: 1.3;

    --tracking-display: 0;
    --tracking-heading: 0;
    --tracking-eyebrow: 0;
    --tracking-label: 0;
    --eyebrow-transform: none;
}