/* =====================================================================
   Awqōt Finder — tokens
   Custom properties only. No component may hard-code a value.

   Section 1 REUSES the kiosk's own names and values exactly
   (css/styles.css, :root, as of the copy received 18 Oct 2026).
   Section 2 lists every NEW token, for review. Contrast ratios are
   against the surface each token is used on.
   ===================================================================== */

:root {

  /* ---------- 1. REUSED from kiosk css/styles.css (unchanged) ---------- */
  --color-primary: #0B4A44;
  --color-secondary: #FFFFFF;
  --color-accent: #C89B3C;

  --bg: var(--color-secondary);
  --panel-bg: color-mix(in srgb, var(--color-secondary) 92%, var(--color-primary) 8%);      /* ≈ #ECF1F0 */
  --text-primary: var(--color-primary);                                                    /* 10.1:1 on white */
  --text-muted: color-mix(in srgb, var(--color-primary) 75%, var(--color-secondary) 25%);  /* ≈ #487773, 5.05:1 on white — attribution only, never on --sand (4.4:1) */
  --accent: var(--color-accent);                                                           /* fills, rules, ring; never small text */
  --divider: color-mix(in srgb, var(--color-secondary) 80%, var(--color-primary) 20%);     /* ≈ #CEDBDA */
  --accent-ink: color-mix(in srgb, var(--accent) 65%, black);                              /* ≈ #826527, 4.77:1 on --sand, 5.47:1 on white */
  --accent-on-dark: color-mix(in srgb, var(--accent) 65%, white);                          /* ≈ #DBBE80, text on teal */
  --sand: #F6EFDF;                                                                         /* header card surface (the Finder band) */
  --sand-rule: #E9DCBC;

  --font-display: "Amiri", Georgia, serif;                       /* 400 and 700 only */
  --font-body: "Source Sans 3", -apple-system, "Segoe UI", sans-serif;  /* 400 and 600 only */
  --font-arabic: "Amiri Quran", "Scheherazade New", serif;       /* not used in v1 Finder */


  /* ---------- 2. NEW — for review ---------- */

  /* 2a. Text */
  --text-secondary: color-mix(in srgb, var(--color-primary) 88%, var(--color-secondary) 12%);  /* ≈ #28605A, 7.2:1 on white, 6.3:1 on --sand */

  /* 2b. Verdicts (from the first token board) */
  --verdict-ok-ink: #0B4A44;     --verdict-ok-bg: #E3ECEB;      /* 8.4:1 · 5+ min to spare */
  --verdict-tight-ink: #7A5512;  --verdict-tight-bg: #F4EBD6;   /* 5.7:1 · 0–4 min to spare */
  --verdict-late-ink: #8C3A2B;   --verdict-late-bg: #F4E4DF;    /* 6.2:1 · arrives after */

  /* 2c. Selection, overlays, elevation */
  --selected-bg: var(--panel-bg);
  --scrim: color-mix(in srgb, var(--color-primary) 55%, transparent);
  --shadow-float: 0 6px 24px color-mix(in srgb, var(--color-primary) 22%, transparent);
  --shadow-pin: 0 1px 3px color-mix(in srgb, var(--color-primary) 35%, transparent);
  --skeleton: var(--panel-bg);

  /* 2d. Map (tiles come from OneMap at runtime; --map-placeholder only shows before/without tiles) */
  --map-placeholder: color-mix(in srgb, var(--color-secondary) 94%, var(--color-primary) 6%);
  --pin-claimed-fill: var(--color-primary);
  --pin-claimed-ring: var(--color-accent);      /* gold ring = verified by mosque */
  --pin-unclaimed-fill: var(--color-primary);   /* plain disc = compiled by Awqōt */
  --pin-user-fill: var(--color-primary);
  --pin-user-border: var(--color-secondary);
  --accuracy-fill: color-mix(in srgb, var(--color-primary) 12%, transparent);
  --accuracy-stroke: color-mix(in srgb, var(--color-primary) 45%, transparent);
  --pin-selected-ring: var(--color-accent);

  /* 2e. Focus */
  --focus-ring-width: 2px;
  --focus-ring-color: var(--text-primary);      /* matches kiosk :focus-visible */
  --focus-ring-offset: 3px;
  --focus-ring-color-on-dark: var(--accent-on-dark);

  /* 2f. Type scale — clamp(min, vw, max) only */
  --fs-countdown:   clamp(2.5rem,    11vw,  3.25rem);   /* Source Sans 3 400, tabular */
  --fs-prayer:      clamp(2rem,      9vw,   2.75rem);   /* Amiri 700 */
  --fs-title:       clamp(1.5rem,    6.4vw, 1.875rem);  /* Amiri 700 */
  --fs-heading:     clamp(1.0625rem, 4.6vw, 1.25rem);   /* Amiri 700 */
  --fs-body:        clamp(0.9375rem, 4.1vw, 1.0625rem); /* Source Sans 3 400 / 600 */
  --fs-small:       clamp(0.8125rem, 3.6vw, 0.9375rem); /* Source Sans 3 400 / 600 */
  --fs-label:       clamp(0.75rem,   3.2vw, 0.8125rem); /* Source Sans 3 600, caps */
  --fs-attribution: clamp(0.6875rem, 2.8vw, 0.75rem);   /* Source Sans 3 400 — always the smallest */
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-display: 700;
  --lh-tight: 1.15;
  --lh-body: 1.4;
  --tracking-label: 0.1em;

  /* 2g. Spacing (gutter 16) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --gutter: var(--space-4);

  /* 2h. Shape and size */
  --radius-s: 3px;       /* buttons, as the kiosk CTA */
  --radius-m: 6px;       /* cards, banners */
  --radius-l: 14px;      /* bottom sheet top corners */
  --radius-pill: 999px;
  --tap: 44px;           /* minimum target */
  --rule: 1px;
  --mark-size: 18px;     /* list marker */
  --pin-size: 30px;      /* map pin */
  --min-width: 360px;
  --icon-s: 14px;        /* verdict glyph, inline icons */
  --icon-m: 18px;        /* notice, banner, list icons */
  --icon-l: 22px;        /* mode selector, top bar */
  --wordmark-height: 30px;
  --topbar-height: 60px;
  --panel-icon: 44px;    /* round icon in state panels */
  --spinner: 32px;
  --grab-w: 40px;  --grab-h: 4px;
  --accuracy-normal: 56px;   /* SAMPLE diameter; runtime sizes from reported accuracy */
  --accuracy-low: 180px;     /* SAMPLE */
  --desktop-pane: 440px;
  --float-w: 340px;
  --content-max: 560px;      /* phone layouts centre at this width on tablets */
  --sheet-max: 60%;          /* bottom sheet never covers more than this share of the map; the rest stays visible for the pin */

  /* 2i. Motion */
  --duration-fast: 150ms;
  --duration-slow: 400ms;  /* = kiosk --theme-transition-ms */
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration-slow: 0ms; }
}