/* =====================================================================
   VMA design tokens
   The ONLY place colors, fonts, corner radius, shadows and spacing are
   defined. Components (components.css) read these variables and never
   hard-code a value, so changing the look = editing this file.

   Themes, chosen on <html>:
     data-look="arena"   (default)  dark, sporty, scoreboard feel
     data-look="arena" data-mode="light"   same look, light background
     data-look="blocks"             Bold Blocks: light, wide headings
   Brand values (name, logo, domain) live in the app's single brand
   settings file (owned by Master). The brand COLORS live here, in the
   BRAND section, and nowhere else.
   ===================================================================== */

:root{
  /* ---------- BRAND: the four area colors + ink ---------- */
  --brand-orange:#FF6A2B;   /* Create & schedule */
  --brand-teal:#19C2A8;     /* Students */
  --brand-purple:#9B6BFF;   /* Game library */
  --brand-yellow:#FFC81E;   /* Create your own game, highlights, focus */
  --brand-ink:#111318;      /* text on every brand color */
  --brand-night:#15171C;    /* top bar, dark backgrounds */

  /* Area colors (point at brand colors; screens use these names) */
  --area-create:var(--brand-orange);
  --area-students:var(--brand-teal);
  --area-games:var(--brand-purple);
  --area-build:var(--brand-yellow);
  --on-area:var(--brand-ink);
  --stripe:linear-gradient(90deg,var(--brand-orange) 0 25%,var(--brand-teal) 25% 50%,var(--brand-purple) 50% 75%,var(--brand-yellow) 75%);

  /* ---------- Type ---------- */
  --font-display:'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --font-body:'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display-style:italic;       /* Arena headings lean forward */
  --display-weight:800;
  --display-case:uppercase;
  --display-tracking:.01em;
  --display-stretch:100%;
  --text-xs:12px; --text-sm:14px; --text-md:16px; --text-lg:19px;
  --h4:20px; --h3:24px; --h2:32px; --h1:44px; --hero:56px;
  --body-weight:500;
  --tile-name-phone:15px;

  /* ---------- Shape, space, touch ---------- */
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:26px; --r-pill:999px;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px;
  --tap:44px;          /* smallest tap target for adults */
  --tap-kid:64px;      /* smallest answer / play button for kids */
  --border:1.5px;
  --press:0 5px 0 rgba(17,19,24,.25);   /* chunky edge on kid buttons */
  --lift:0 14px 32px -20px rgba(0,0,0,.45);
  /* Focus: a 3px OUTLINE (never box-shadow, so no component can cancel it), 2px outside the control.
     Its colour follows the surface it sits on: yellow on dark, ink on light / white. WCAG 2.4.7 + 1.4.11 */
  --focus-color:var(--brand-yellow);
  --focus-width:3px;
  --focus-offset:2px;
  /* Text boxes: calm focus (border turns dark + soft orange glow), thin neutral scrollbar */
  --field-focus-border:var(--paper-text);
  --field-focus-glow:0 0 0 4px rgba(255,106,43,.18);
  --scrollbar-thumb:#C5C9D2;
  /* Borders that identify a control (text boxes, switch track): >= 3:1 on white. WCAG 1.4.11 */
  --field-border:#858B97;

  /* ---------- Arena (dark), the default ---------- */
  --bg:#15171C;              /* page background */
  --raised:#1F222A;          /* panels on the background */
  --raised-2:#292D37;        /* hover / selected on panels */
  --text:#F4F5F7;
  --text-muted:#AEB4C2;
  --line:#323642;
  --topbar:#15171C;
  --on-topbar:#F4F5F7;

  /* Reading surfaces stay white in every theme (chat, papers, forms) */
  --paper:#FFFFFF;
  --paper-2:#F1F2F5;
  --paper-text:#111318;
  --paper-muted:#4A5060;
  --paper-line:#E2E4E9;

  --primary:var(--brand-orange);
  --on-primary:var(--brand-ink);
  --accent-text:#B5440F;     /* orange that passes contrast on white */

  /* Status (separate from the area colors) */
  --good:#0E7A55;  --good-bg:#D5F5EA;
  --warn:#7A4F00;  --warn-bg:#FFEFC2;
  --bad:#C8261C;   --bad-bg:#FDE2DF;
  --info:#4B2FB8;  --info-bg:#ECE4FF;
  --score-low:var(--bad);

  color-scheme:dark;
}

/* ---------- Arena, light background ---------- */
:root[data-mode="light"]{
  --bg:#EEF0F3;
  --raised:#FFFFFF;
  --raised-2:#F1F2F5;
  --text:#111318;
  --text-muted:#4A5060;
  --line:#DCDFE5;
  --focus-color:var(--brand-ink);
  color-scheme:light;
}

/* ---------- Bold Blocks: proves the look can be swapped ---------- */
:root[data-look="blocks"]{
  --font-display:'Archivo', 'Arial Black', system-ui, sans-serif;
  --font-body:'Lexend', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display-style:normal;
  --display-weight:900;
  --display-tracking:0;
  --display-stretch:118%;
  --h4:16px; --h3:20px; --h2:26px; --h1:36px; --hero:40px;
  --body-weight:400;
  --tile-name-phone:11px;
  --r-sm:10px; --r-md:12px; --r-lg:20px; --r-xl:24px;
  --bg:#F1F2F4;
  --raised:#FFFFFF;
  --raised-2:#F1F2F4;
  --text:#111318;
  --text-muted:#4A4F5C;
  --line:#DCDFE5;
  --topbar:#111318;
  --primary:var(--brand-ink);
  --on-primary:#FFFFFF;
  --focus-color:var(--brand-ink);
  color-scheme:light;
}