/* Unified PathwayDNA × Ungrammary Studio Design System Tokens (Marketing + Product)
   Visual DNA sampled from Ungrammary's interface & Teen-UX Research Principles:
   - Architectural 38px Graph-Paper Grid Canvas (#EFEFEB + 1px hairline grid)
   - Acid Volt Chartreuse (#D0FC2C) + Jet Ink (#141414) for ultra-high-contrast CTAs & frames
   - Electric Hyper-Magenta (#DC2CE0 / #E030E0) + Soft Lilac (#FCF0FC) graphic panels
   - Crisp Architectural Studio Cards (#FFFFFF, sharp/micro-radius 2px frames, 1px #D5D5D0 borders)
   - Clean, airy, scannable Space Grotesk + Plus Jakarta Sans typography (16px+ readable base) */

:root,
body[data-age-mode="adult"],
body[data-age-mode="teen"] {
  /* Ungrammary Signature Electric Duo + Studio Carbon */
  --ug-lime: #d0fc2c;
  --ug-lime-hover: #c3f216;
  --ug-lime-soft: #f5ffd0;
  --ug-lime-border: #b5e30b;
  --ug-lime-ink: #3c5200;

  --ug-magenta: #dc2ce0;
  --ug-magenta-bright: #e030e0;
  --ug-magenta-hover: #c31ec7;
  --ug-magenta-soft: #fcf0fc;
  --ug-magenta-border: #f0bdf2;
  --ug-magenta-ink: #9b119e;

  --ug-black: #141414;
  --ug-black-hover: #292929;
  --ug-silver: #a8a8a8;

  /* Supporting High-Clarity Data Colors (Charts, Radars & Quadrants) */
  --ug-cyan: #04aef6;
  --ug-cyan-ink: #0369a1;
  --ug-cyan-soft: #eff8ff;
  --ug-cyan-border: #bae6fd;

  --ug-green: #00c462;
  --ug-green-ink: #047857;
  --ug-green-soft: #ecfdf5;
  --ug-green-border: #a7f3d0;

  --ug-orange: #ff5b0d;
  --ug-orange-ink: #c2410c;
  --ug-orange-soft: #fff3ed;
  --ug-orange-border: #fed7aa;

  --ug-red: #ef233c;
  --ug-red-ink: #be123c;
  --ug-red-soft: #fff1f2;
  --ug-red-border: #fecdd3;

  /* Architectural Drafting Grid Surfaces */
  --bg-canvas: #efefeb;
  --bg-grid-pattern:
    linear-gradient(to right, rgba(20, 20, 20, 0.048) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(20, 20, 20, 0.048) 1px, transparent 1px);
  --bg-grid-size: 38px 38px;

  --bg-surface: #ffffff;
  --bg-surface-elevated: #f7f7f4;
  --bg-surface-soft: #f2f2ee;
  --bg-glass: rgba(255, 255, 255, 0.94);

  --border-subtle: #d5d5d0;
  --border-dark: #141414;
  --border-strong: #dc2ce0;

  /* Crisp Studio Charcoal Typography (Never washed out, never tiny) */
  --text-primary: #161616;
  --text-body: #383838;
  --text-secondary: #525252;
  --text-muted: #6e6e6a;

  /* Semantic Aliases */
  --accent-primary: var(--ug-lime);
  --accent-secondary: var(--ug-magenta);
  --accent-tertiary: var(--ug-orange);
  --accent-danger: var(--ug-red-ink);
  --accent-success: var(--ug-green-ink);

  /* Crisp Architectural Geometry: Sharp outer cards + rounded inner graphic badges */
  --radius-card: 2px;
  --radius-inner: 16px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 2px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 0 rgba(20, 20, 20, 0.04);
  --shadow-hover: 0 14px 32px rgba(20, 20, 20, 0.08);

  --font-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Ungrammary Teen Mode Neo-Pop Color & Graphic System (Sampled from Ungrammary Teen Guide) */
body[data-age-mode="teen"] {
  --teen-mint: #30c5a8;
  --teen-mint-bright: #38d4b4;
  --teen-mint-soft: #eaf9f6;
  --teen-mint-border: #20b599;
  --teen-mint-ink: #0d5f50;

  --teen-magenta: #ee03ff;
  --teen-magenta-bright: #f026e8;
  --teen-magenta-soft: #fcf0fc;
  --teen-magenta-border: #d800ea;

  --teen-lime: #d0fc2c;
  --teen-lime-bright: #d4fc22;
  --teen-lime-soft: #f5ffd0;

  --teen-pink: #ff94c2;
  --teen-pink-soft: #fff0f6;

  --teen-plum: #360b44;

  /* Fresh mint-cyan perspective cyc drafting grid for teen mode */
  --bg-canvas: #f2faf8;
  --bg-grid-pattern:
    linear-gradient(to right, rgba(48, 197, 168, 0.13) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(48, 197, 168, 0.13) 1px, transparent 1px);
}