/*
 * Systmatk design tokens — Control Field
 * ---------------------------------------------------------------------------
 * Source of truth: app-mobile-design/cross-platform-proposals-2026-08-04/
 *   (styles.css palette + DESIGN_BRIEF.md role definitions + app.js content)
 * Direction: Control Field (concept 02) — a dark control stage, 28px module
 * radius, one campaign at the center.
 *
 * DO NOT hand-author colors, sizes, spacing, radii, or durations in
 * consuming code. Read them from these custom properties. See README.md in
 * this directory for consumption rules for WP-1/2/3 (web) and WP-4 (RN).
 * ---------------------------------------------------------------------------
 */

@font-face {
  font-family: "Syne";
  src: url("fonts/Syne-Variable.ttf") format("truetype");
  font-weight: 400 800;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("fonts/Manrope-Variable.ttf") format("truetype");
  font-weight: 300 800;
  font-display: swap;
}

@font-face {
  font-family: "DG Ghareeb";
  src: url("fonts/DG-Ghareeb-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

/* VEXA is intentionally NOT declared here — license is uncleared per
 * design-tokens/FONT_CLEARANCE.md. Any Arabic display role in web/public
 * uses "DG Ghareeb" instead (see --font-display-ar-control override below). */

:root {
  color-scheme: light;

  /* ===========================================================
   * 1. RAW PALETTE — verbatim from styles.css :29-47. Never
   *    reference these directly in component code; use the
   *    semantic/role tokens in section 2+ instead.
   * =========================================================== */
  --raw-forest-950: #102a23;
  --raw-forest-900: #173a30;
  --raw-forest-800: #205142;
  --raw-moss-600: #557a66;
  --raw-sage-300: #a9bcae;
  --raw-mist-100: #e9efeb;
  --raw-bone: #f2f0e9;
  --raw-paper: #fcfbf7;
  --raw-ink: #17211d;
  --raw-muted: #6d7771;
  --raw-line: #d9dfda;
  --raw-accent: #e7f05a;
  --raw-danger: #bd554d;

  /* Derived (D-2 amber, dark-mode lifted variants — see CONTRAST_MATRIX.md
   * for the pass/fail evidence behind every one of these). */
  --raw-amber-light: #8a5a12;   /* warning text/icon on light surfaces */
  --raw-amber-dark: #e0a83f;    /* warning text/icon on dark surfaces */
  --raw-danger-dark: #e08072;   /* danger text/icon on forest-950 only */
  --raw-white: #ffffff;

  /* ===========================================================
   * 2. LIGHT THEME — semantic surface/text roles
   * =========================================================== */
  --color-bg: var(--raw-bone);
  --color-bg-marketing: var(--raw-forest-950); /* Control Field marketing stage is always dark, D-1 */
  --color-surface: var(--raw-paper);
  --color-surface-sunken: var(--raw-mist-100);
  --color-surface-raised-shadow: 0 24px 80px rgba(16, 42, 35, 0.12);

  --color-border: var(--raw-line);
  --color-border-strong: var(--raw-ink);

  --color-text: var(--raw-ink);
  --color-text-muted: #5f6a64;                /* QA F1 fix: darkened from raw-muted so 400-weight body passes AA on paper/bone/mist (4.83:1 worst case); raw-muted stays for reference */
  --color-text-kicker: var(--raw-moss-600);   /* usage rule: 14px+/UI only, see matrix */
  --color-text-inverse: var(--raw-paper);

  --color-accent: var(--raw-accent);
  --color-accent-on: var(--raw-forest-950);   /* text/icon color WHEN placed on accent */
  --color-accent-ink-only: var(--raw-forest-950); /* usage rule: accent as TEXT color only on forest-950/900/800/ink, never on paper/bone/white */

  --color-brand-950: var(--raw-forest-950);
  --color-brand-900: var(--raw-forest-900);
  --color-brand-800: var(--raw-forest-800);
  --color-brand-600: var(--raw-moss-600);
  --color-brand-300: var(--raw-sage-300);

  /* ===========================================================
   * 3. SEMANTIC TONES (D-2) — light values
   *    success/up = forest-800 family, warning = derived amber,
   *    danger = brief's #bd554d. Each has a text-safe foreground
   *    and a subtle background for tags/alerts.
   * =========================================================== */
  --tone-success-fg: var(--raw-forest-800);
  --tone-success-bg: color-mix(in srgb, var(--raw-forest-800) 10%, var(--raw-paper));
  --tone-success-border: color-mix(in srgb, var(--raw-forest-800) 30%, transparent);

  --tone-warning-fg: var(--raw-amber-light);
  --tone-warning-bg: color-mix(in srgb, var(--raw-amber-light) 12%, var(--raw-paper));
  --tone-warning-border: color-mix(in srgb, var(--raw-amber-light) 32%, transparent);

  --tone-danger-fg: var(--raw-danger);
  --tone-danger-bg: color-mix(in srgb, var(--raw-danger) 10%, var(--raw-paper));
  --tone-danger-border: color-mix(in srgb, var(--raw-danger) 30%, transparent);

  /* ===========================================================
   * 4. FOCUS RING — accent fails contrast on light surfaces
   *    (1.19:1 on paper, see CONTRAST_MATRIX.md), so light mode
   *    uses a compliant forest-800 ring instead of accent.
   * =========================================================== */
  --focus-ring-color: var(--raw-forest-800);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* ===========================================================
   * 5. TYPE ROLES — Syne (display) + Manrope (UI/body).
   *    Sizes follow D-3 floors: no UI role below 13px, all form
   *    inputs render at 16px. Source proposal used 7-12px module
   *    chrome at MOCKUP scale (a 1440px desktop comp); the roles
   *    below keep the same hierarchy *ratios* re-based on a 13px
   *    floor for real UI.
   * =========================================================== */

  /* -- Display (Syne) -- mapped from styles.css hero/heading roles.
   *    Desktop web can keep fluid clamp(); RN has no clamp() so
   *    tokens.ts pins the mobile-appropriate fixed value per role. */
  --font-display-1: 700 clamp(40px, 5vw, 64px) / 0.95 "Syne", sans-serif; /* review-hero h1 role, capped well below the 132px marketing-only mockup size */
  --font-display-1-tracking: -0.03em;

  --font-display-2: 650 clamp(28px, 3.2vw, 40px) / 1 "Syne", sans-serif; /* comparison-head / concept-title h2 role */
  --font-display-2-tracking: -0.03em;

  --font-display-3: 600 24px / 1.05 "Syne", sans-serif; /* module h4 role (campaign/report/overview headline), was clamp(22px,2.4vw,34px) mockup-scale */
  --font-display-3-tracking: -0.02em;

  --font-display-4: 600 18px / 1.1 "Syne", sans-serif; /* phone-head h3 / smaller module title, was 23px fixed mockup */
  --font-display-4-tracking: -0.015em;

  --font-display-metric: 700 28px / 1 "Syne", sans-serif; /* .metric strong, was 23px mockup */
  --font-display-metric-tracking: -0.02em;

  --font-display-rail-number: 700 48px / 0.85 "Syne", sans-serif; /* decorative index numerals (.rail-number, .concept-number), display-only, never load-bearing text */
  --font-display-rail-number-tracking: -0.05em;

  /* -- UI / body (Manrope) -- */
  --font-body: 400 16px / 1.6 "Manrope", sans-serif;       /* paragraph/body copy, D-3 16px form-input floor doubles as comfortable body size */
  --font-body-tracking: 0em;

  --font-ui-md: 400 15px / 1.4 "Manrope", sans-serif;       /* secondary body / list copy, was 12-13px mockup */
  --font-ui-md-tracking: 0em;

  --font-ui-sm: 600 13px / 1.35 "Manrope", sans-serif;      /* nav items, buttons, metric labels — D-3 floor */
  --font-ui-sm-tracking: 0.02em;

  --font-ui-label: 700 13px / 1.3 "Manrope", sans-serif;    /* uppercase kicker/eyebrow role (.mock-kicker, .module-head), was 8-12px mockup */
  --font-ui-label-tracking: 0.08em;
  --font-ui-label-transform: uppercase;

  --font-ui-caption: 400 13px / 1.4 "Manrope", sans-serif;  /* smallest permitted role — .today-action small, .phone-nav small, was 6-8px mockup. Floor per D-3. */
  --font-ui-caption-tracking: 0em;

  --font-form-input: 400 16px / 1.4 "Manrope", sans-serif;  /* D-3: 16px mandatory to prevent iOS input zoom */

  --font-button: 700 14px / 1 "Manrope", sans-serif;
  --font-button-tracking: 0.01em;

  /* -- Arabic display (RTL headline roles only, never dense UI copy) --
   * NOTE (web/public override): the upstream token file points
   * --font-display-ar-control at "VEXA" first. VEXA is not shipped in
   * web/public/assets/fonts (uncleared license, see FONT_CLEARANCE.md), so
   * this local copy substitutes "DG Ghareeb" as the primary face for both
   * Arabic display roles. */
  --font-display-ar-control: 700 24px / 1.05 "DG Ghareeb", "Manrope", sans-serif;      /* Control Field RTL module titles */
  --font-display-ar-editorial: 700 24px / 1.05 "DG Ghareeb", "Manrope", sans-serif; /* Editorial-style RTL headline fallback role, kept for parity with brief */

  /* ===========================================================
   * 6. SPACING (D-4) — 4/8/12/18/26/34/46/60/80
   * =========================================================== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 18px;
  --space-5: 26px;
  --space-6: 34px;
  --space-7: 46px;
  --space-8: 60px;
  --space-9: 80px;

  /* ===========================================================
   * 7. RADII (D-5) — Control Field
   * =========================================================== */
  --radius-module: 28px;       /* campaign/report/overview module, browser-frame, marketing-object */
  --radius-inner: 24px;        /* insight-rail, app-sidebar rounded edge, phone-content article */
  --radius-pill: 999px;        /* segmented control, language switch, chip pills */
  --radius-avatar: 50%;        /* avatar / dot / circular icon well */
  --radius-phone-frame: 34px;  /* .phone-frame device chrome */
  --radius-small: 12px;        /* small controls where 28 is absurd: checkbox, small chip, today-action inner button */

  /* ===========================================================
   * 8. MOTION (D-6)
   * =========================================================== */
  --motion-ease-standard: ease;
  --motion-ease-curve: cubic-bezier(.2, .8, .2, 1);
  --motion-ease-overshoot: cubic-bezier(.18, .83, .32, 1.14);

  --motion-duration-segment: 180ms;         /* segment/tab switch */
  --motion-duration-progress: 700ms;        /* progress fill */
  --motion-duration-chart: 850ms;           /* chart draw */
  --motion-delay-chart: 100ms;
  --motion-duration-module-arrive: 760ms;   /* campaign state-change ONLY — overshoot reserved for this */

  /* ===========================================================
   * 9. CHART CONSTANTS
   * =========================================================== */
  --chart-line-width: 4px;
  --chart-line-color: var(--raw-forest-800);
  --chart-line-cap: round;
  --chart-area-fill: rgba(32, 81, 66, 0.08);
  --chart-gridline-width: 1px;
  --chart-gridline-color: var(--raw-line);
  --chart-gridline-count: 3;
  --chart-dot-radius: 4px;
  --chart-dot-radius-last: 5px;   /* final/current data point, per app.js chart() markup */
  --chart-dot-fill: var(--raw-paper);
  --chart-dot-stroke: var(--raw-forest-800);
  --chart-dot-stroke-width: 3px;
  --chart-insight-border-width: 3px;
  --chart-insight-border-color: var(--raw-accent);

  font-family: "Manrope", Arial, sans-serif;
  font-synthesis: none;
}

/* =================================================================
 * DARK THEME — extends the Control Field marketing-stage logic
 * (forest-950 bg, white text, rgba(255,255,255,.13-.15) hairlines)
 * into a full app-wide dark scheme (D-1). Applies via OS preference
 * AND an explicit override attribute for in-app theme toggles.
 * ================================================================= */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --color-bg: var(--raw-forest-950);
    --color-bg-marketing: var(--raw-forest-950);
    --color-surface: var(--raw-forest-900);
    --color-surface-sunken: var(--raw-forest-800);
    --color-surface-raised-shadow: 0 24px 80px rgba(0, 0, 0, 0.4);

    --color-border: rgba(255, 255, 255, 0.14);   /* matches .mock-nav border-color rgba(255,255,255,.14) */
    --color-border-strong: rgba(255, 255, 255, 0.24);

    --color-text: var(--raw-paper);
    --color-text-muted: color-mix(in srgb, var(--raw-sage-300) 78%, var(--raw-paper) 22%); /* desaturated sage per D-1, passes AA on forest-950/900 — see matrix */
    --color-text-kicker: var(--raw-accent);       /* Control Field precedent: .concept-control .mock-kicker uses accent */
    --color-text-inverse: var(--raw-forest-950);

    --color-accent: var(--raw-accent);            /* unchanged — reads well on dark per D-1 */
    --color-accent-on: var(--raw-forest-950);
    --color-accent-ink-only: var(--raw-forest-950);

    --color-brand-950: var(--raw-forest-950);
    --color-brand-900: var(--raw-forest-900);
    --color-brand-800: var(--raw-forest-800);
    --color-brand-600: var(--raw-moss-600);
    --color-brand-300: var(--raw-sage-300);

    --tone-success-fg: var(--raw-sage-300);
    --tone-success-bg: color-mix(in srgb, var(--raw-forest-800) 55%, var(--raw-forest-950));
    --tone-success-border: color-mix(in srgb, var(--raw-sage-300) 34%, transparent);

    --tone-warning-fg: var(--raw-amber-dark);
    --tone-warning-bg: color-mix(in srgb, var(--raw-amber-dark) 18%, var(--raw-forest-950));
    --tone-warning-border: color-mix(in srgb, var(--raw-amber-dark) 34%, transparent);

    --tone-danger-fg: var(--raw-danger-dark);
    --tone-danger-bg: color-mix(in srgb, var(--raw-danger-dark) 16%, var(--raw-forest-950));
    --tone-danger-border: color-mix(in srgb, var(--raw-danger-dark) 34%, transparent);

    /* Accent passes AA on forest-950/900 (12.35:1 / 10.10:1) — safe as the
     * dark-mode focus ring, unlike its light-mode failure on paper/bone. */
    --focus-ring-color: var(--raw-accent);
    --focus-ring-width: 2px;
    --focus-ring-offset: 2px;

    --chart-line-color: var(--raw-sage-300);
    --chart-area-fill: rgba(169, 188, 174, 0.14);
    --chart-gridline-color: rgba(255, 255, 255, 0.15);
    --chart-dot-fill: var(--raw-forest-900);
    --chart-dot-stroke: var(--raw-sage-300);
  }
}

[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: var(--raw-forest-950);
  --color-bg-marketing: var(--raw-forest-950);
  --color-surface: var(--raw-forest-900);
  --color-surface-sunken: var(--raw-forest-800);
  --color-surface-raised-shadow: 0 24px 80px rgba(0, 0, 0, 0.4);

  --color-border: rgba(255, 255, 255, 0.14);
  --color-border-strong: rgba(255, 255, 255, 0.24);

  --color-text: var(--raw-paper);
  --color-text-muted: color-mix(in srgb, var(--raw-sage-300) 78%, var(--raw-paper) 22%);
  --color-text-kicker: var(--raw-accent);
  --color-text-inverse: var(--raw-forest-950);

  --color-accent: var(--raw-accent);
  --color-accent-on: var(--raw-forest-950);
  --color-accent-ink-only: var(--raw-forest-950);

  --color-brand-950: var(--raw-forest-950);
  --color-brand-900: var(--raw-forest-900);
  --color-brand-800: var(--raw-forest-800);
  --color-brand-600: var(--raw-moss-600);
  --color-brand-300: var(--raw-sage-300);

  --tone-success-fg: var(--raw-sage-300);
  --tone-success-bg: color-mix(in srgb, var(--raw-forest-800) 55%, var(--raw-forest-950));
  --tone-success-border: color-mix(in srgb, var(--raw-sage-300) 34%, transparent);

  --tone-warning-fg: var(--raw-amber-dark);
  --tone-warning-bg: color-mix(in srgb, var(--raw-amber-dark) 18%, var(--raw-forest-950));
  --tone-warning-border: color-mix(in srgb, var(--raw-amber-dark) 34%, transparent);

  --tone-danger-fg: var(--raw-danger-dark);
  --tone-danger-bg: color-mix(in srgb, var(--raw-danger-dark) 16%, var(--raw-forest-950));
  --tone-danger-border: color-mix(in srgb, var(--raw-danger-dark) 34%, transparent);

  --focus-ring-color: var(--raw-accent);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  --chart-line-color: var(--raw-sage-300);
  --chart-area-fill: rgba(169, 188, 174, 0.14);
  --chart-gridline-color: rgba(255, 255, 255, 0.15);
  --chart-dot-fill: var(--raw-forest-900);
  --chart-dot-stroke: var(--raw-sage-300);
}

[data-theme="light"] {
  color-scheme: light;
  /* All values inherit from :root's light defaults declared above;
     this selector exists so an explicit light override always wins
     over a prefers-color-scheme:dark OS setting. */
}

/* =================================================================
 * MOTION — zeroed under prefers-reduced-motion (D-6)
 * ================================================================= */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-segment: 0.001ms;
    --motion-duration-progress: 0.001ms;
    --motion-duration-chart: 0.001ms;
    --motion-delay-chart: 0ms;
    --motion-duration-module-arrive: 0.001ms;
  }
}

/* =================================================================
 * FOCUS RING utility class — apply as the default focus treatment
 * instead of hand-rolled outlines (see CONTRAST_MATRIX.md for why
 * light/dark use different colors).
 * ================================================================= */
.focus-ring:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}