/* =======================================================================
   ARCADE-ed design tokens — the single source of truth for color and type.
   Loaded first by every page (landing, login, dashboard, apps).
   Harbor theme, owner approved 2026-10-04. Rules: /opt/arcade-ed/STYLE-STANDARDS.md
   Dark mode: html[data-theme="dark"] (dashboard) or html.dark (landing).
   Themes change VALUES here only. Nothing outside this file may use a raw color or font name.
   ======================================================================= */
:root, .light {
  /* Fonts (self-hosted: /assets/fonts/arcade-fonts.css) */
  --font-body:    'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;
  --font-arcade:  'Press Start 2P', 'Bricolage Grotesque', monospace;
  --font-mono:    'Atkinson Hyperlegible Mono', ui-monospace, Menlo, monospace;
  --font-code:    'Atkinson Hyperlegible Mono', ui-monospace, Menlo, monospace;   /* same face; for apps whose framework owns the name --font-mono */

  /* Type scale: owner approved 2026-10-05 (UI System v4). Three tiers:
     content never below 12pt (1rem), navigation 15pt, interface chrome may go to 10.5pt. 1pt = 1/12rem. */
  --fs-display: clamp(2.75rem, 5vw, 4.25rem);  /* hero slogans */
  --fs-h1:      2.25rem;   /* 27pt page titles */
  --fs-h2:      1.75rem;   /* 21pt section titles */
  --fs-h3:      1.375rem;  /* 16.5pt card / panel titles */
  --fs-h4:      1.125rem;  /* 13.5pt small headings */
  --fs-lead:    1.25rem;   /* 15pt intro paragraphs */
  --fs-body:    1.125rem;  /* 13.5pt reading text */
  --fs-caption: 1rem;      /* 12pt meta under content: smallest CONTENT size */
  --fs-nav:     1.1875rem; /* ~14pt left rail, drawer menus (owner: 15pt was too big) */
  --fs-ui:      1rem;      /* 12pt buttons, top tabs, form labels, eyebrows */
  --fs-ui-sm:   0.875rem;  /* 10.5pt search box, tooltips, badges, chrome timestamps (never content) */
  --fs-stat:    2.25rem;   /* big numbers */
  --fw-display: 700; --fw-heading: 600; --fw-ui: 600; --fw-body: 400;

  /* Controls, corners, spacing */
  --control-h:      2.75rem;  /* 44px buttons and fields (touch-safe) */
  --control-h-sm:   2.25rem;
  --radius-control: 0.75rem;
  --radius-card:    1rem;
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem;  --space-6: 2rem;   --space-7: 3rem;    --space-8: 4rem;
  --icon-ui: 1.25rem; --icon-nav: 1.5rem;

  /* Neutrals */
  --page-bg:        #F5F6F8;
  --surface:        #FBFBFC;
  --surface-alt:    #EEF1F5;
  --surface-raised: #FBFBFC;
  --border:         #DEE2E8;
  --border-strong:  #C5CDD8;
  --panel-bg:       #DCDBDB;   /* floating panels ("pallets"): darker than canvas and drawers (owner 2026-10-05) */
  --panel-border:   #C9C7C7;
  --text-primary:   #2A2F37;
  --text-secondary: #4A515E;
  --text-muted:     #5A6170;

  /* Brand blue: the one "act here" color */
  --brand:       #4A6888;
  --brand-fill:  #4A6888;
  --brand-deep:  #375373;
  --brand-press: #2A4560;
  --brand-tint:  #E2EAF2;
  --brand-halo:  rgba(74,104,136,.18);
  --on-accent:   #FFFFFF;

  /* Gnosis red: Gnosis, Ask Gnosis, careers, counts, due-today only */
  --gnosis-red:      #B42049;
  --gnosis-red-tint: #F6E3E7;
  --gnosis-gradient: linear-gradient(135deg, #B42049 0%, #D22645 55%, #CC3D57 100%);

  /* Reward gold: stars, badges, streaks, XP only */
  --reward:      #C28100;
  --reward-fill: #E9B949;
  --reward-text: #8F5F00;
  --reward-tint: #FBF1DC;

  /* Status */
  --success: #2E7D4F;
  --danger:  #C8333A;

  /* Third-party sign-in marks: colors required by each provider's brand rules */
  --sso-clever:          #4274F4;
  --sso-clever-hover:    #3461D1;
  --sso-classlink:       #E8173E;
  --sso-classlink-hover: #C41234;
  --on-sso:              #FFFFFF;

  /* Paper: printable documents and signatures stay ink-on-paper in both modes */
  --paper:       #FFFFFF;
  --paper-ink:   #1A1C20;

  /* Media: text and scrims over photos/video stay the same in both modes */
  --on-media:    #FFFFFF;
  --on-media-accent: #F07686;    /* Gnosis red that stays readable on photos/video, both modes */
  --gnosis-gradient-media: linear-gradient(135deg, #E35A6E 0%, #F07686 55%, #F59AA5 100%);
  --media-scrim: #0E1116;
  --shadow-ink:  #0E1116;
}
html[data-theme="dark"], html.dark, .dark {
  --page-bg:        #1A1C20;
  --surface:        #22252A;
  --surface-alt:    #1F2125;
  --surface-raised: #2A2D33;
  --border:         #363A41;
  --border-strong:  #4A505A;
  --panel-bg:       #2B2E33;   /* floating panels in dark mode */
  --panel-border:   #3D4148;
  --text-primary:   #E6E9EE;
  --text-secondary: #C3C8D0;
  --text-muted:     #A8AFBA;
  --brand:       #8EAED0;
  --brand-fill:  #8EAED0;
  --brand-deep:  #AFC9E4;
  --brand-press: #C9DBEF;
  --brand-tint:  #2A3442;
  --brand-halo:  rgba(142,174,208,.20);
  --on-accent:   #1A1C20;
  --gnosis-red:      #F07686;
  --gnosis-red-tint: #3A262B;
  --gnosis-gradient: linear-gradient(135deg, #E35A6E 0%, #F07686 55%, #F59AA5 100%);
  --reward:      #F2C14E;
  --reward-fill: #F2C14E;
  --reward-text: #F2C14E;
  --reward-tint: #3A3122;
  --success: #6FCF97;
  --danger:  #FF6268;
  color-scheme: dark;
}