/* ApexGraf design tokens — shared across all pages. */

/*
 * LOCKED THEME (2026-08-07) — warm soft gray + cream hint; lighter nav.
 * Restore with: "revert to locked theme"
 *   --am-canvas: #f9f8f4;
 *   --am-page: #f2f0ea;
 *   --am-surface: #f9f8f4;
 *   --am-border: #e0ddd5;
 *   --am-border-soft: #ebe8e1;
 *   --am-neutral: #ebe8e0;
 *   --am-wash: #f5f3ed;
 *   --am-nav-bg: #fcfbf8;
 *   nav.css: background: var(--am-nav-bg);
 *   problem.css popup panel: background: var(--am-wash);
 *
 * MOCKUP / ORIGINAL BEIGE (Cursor UI mockups.zip) — restore with: "revert to original"
 *   --am-canvas / --am-surface / --am-nav-bg: #f9f8ef;
 *   --am-page: #edeae0;
 *   --am-border: #d8d3c5;
 *   --am-border-soft: #e3dfd1;
 *   --am-neutral: #e7e3d6;
 *   --am-wash: #f3f1e8;
 *   problem.css popup panel: background #f4f1ea;
 */

:root {
  /* Active beige — slightly richer/darker than mockup zip (user preferred over exact zip). */
  --am-canvas: #f6f4ea;
  --am-page: #e4e0d3;
  --am-surface: #f6f4ea;
  --am-ink: #13181b;
  --am-primary: #104a65;
  --am-navy: #0a3448;
  --am-accent: #b63831; /* brick red CTAs (was orange #f84f1a) */
  /* Soft vertical lift on CTAs */
  --am-accent-btn: linear-gradient(180deg, #c94f45 0%, #b63831 52%, #9e2e28 100%);
  --am-soft-accent: #f3ddd9;
  --am-soft-teal: #dceae8;
  --am-mustard: #ceac4a; /* golden mustard (bar swatch) */
  --am-soft-yellow: #f3e6b8;
  --am-border: #d0cbb8;
  --am-border-soft: #ddd8c9;
  --am-neutral: #ddd8c8;
  --am-wash: #ebe7db;
  --am-nav-bg: #f6f4ea;
  --am-nav-sticky-offset: 59px; /* am-nav min-height + border — sticky chrome sits below */
  --am-white: #ffffff;

  /* LOCKED 3D cube faces (2026-09-24) — occupancy / three.js. Restore with: "revert 3d cube colors" */
  --am-cube-top: #f0c14d;
  --am-cube-top-alt: #e0c4a8;
  --am-cube-i: #a4c4a0;
  --am-cube-j: #e09070;

  /* LOCKED 2D angle marks (2026-09-24) — compile SVG. Restore with: "revert angle colors" */
  --am-angle-mustard: #6a4e10;
  --am-angle-mustard-fill: #e0c86e;
  --am-angle-teal: #154843;
  --am-angle-teal-fill: #dceae8;
  --am-angle-clay: #b63831;
  --am-angle-clay-fill: #f3ddd9;

  /* Measure / dimension arrows + dashed segments — match render_svg.DIM_INK / DASH_INK */
  --am-dim-ink: #6BB5E0;
  --am-dash-ink: var(--am-dim-ink);

  /* Math chroma slots — canonical rules in theme/math_chroma.css */
  --am-math-structure: #1d4ed8;
  --am-math-operator: #3b82f6; /* lighter blue — not brick (reads as error) */
  --am-math-exponent: #0f7a55;

  /* Bump html font-size to change all rem-based type. */
  --am-type-scale: 1.15;

  --am-font-ui: "Hanken Grotesk", system-ui, sans-serif;
  --am-font-body: "Hanken Grotesk", system-ui, sans-serif;
  --am-font-mono: "JetBrains Mono", ui-monospace, monospace;
  --am-font-page-title: "Roboto Slab", "Rockwell", "Courier New", serif;
  --am-font-lc-title: "Nunito", var(--am-font-ui), sans-serif;
  --am-font-hand: "Caveat", cursive;
  /* Problem stem — typewriter, clearly apart from UI grotesk */
  --am-font-problem: "Courier Prime", "Courier New", Courier, ui-monospace, monospace;

  --am-radius-sm: 8px;
  --am-radius-md: 14px;
  --am-radius-lg: 16px;
  --am-radius-xl: 18px;
  --am-radius-card: 22px;
  --am-radius-pill: 20px;
  --am-radius-btn: 24px;

  --am-shadow-nav: 0 6px 20px rgba(19, 24, 27, 0.06);
  --am-shadow-menu: 0 16px 40px rgba(19, 24, 27, 0.12);
  --am-shadow-card: 0 8px 28px rgba(19, 24, 27, 0.06);

  --am-card-max: 740px;
  --am-nav-max: 960px;
  --am-content-max: 1100px;
  /* Single page column: nav, main, cards, banners all share this width.
     Desktop side gutters = (100% − width) / 2. Topic Path overrides to 90%. */
  --am-page-width: 80%;

  /* Short-explanation "see" washes — cycle 1–4 on ladder rows. */
  --am-see-1-bg: color-mix(in srgb, var(--am-soft-teal) 72%, white);
  --am-see-1-ink: var(--am-primary);
  --am-see-2-bg: color-mix(in srgb, var(--am-soft-accent) 58%, white);
  --am-see-2-ink: var(--am-navy);
  --am-see-3-bg: color-mix(in srgb, var(--am-soft-yellow) 78%, white);
  --am-see-3-ink: var(--am-navy);
  --am-see-4-bg: color-mix(in srgb, var(--am-mustard) 22%, var(--am-surface));
  --am-see-4-ink: var(--am-navy);

  /* Admin-only chrome in Prep / Topic Path — deep orange (students never see). */
  --am-admin-only: #c4500a;
  --am-admin-only-bg: color-mix(in srgb, var(--am-admin-only) 9%, var(--am-surface));
  --am-admin-only-border: color-mix(in srgb, var(--am-admin-only) 38%, transparent);
  --am-admin-only-ink: color-mix(in srgb, var(--am-admin-only) 88%, #1a1208);
}

/* Topic Path only: wider column (half the default side gutter). */
body.am-tp-page {
  --am-page-width: 90%;
}

/* Phones + tablets (incl. iPad landscape). Desktop keeps the page column. */
@media (max-width: 1280px) {
  :root,
  body.am-tp-page {
    --am-page-width: 100%;
  }
}