/*
 * Φυσική Γ' Γυμνασίου – design tokens.
 *
 * Source of truth: the STEMTeacher site (https://stemteacher.gr), repo
 * E:\Documents\Vibe-Coding\StemTeacher – src/styles/tokens.css and
 * docs/brand-visual-2026.md. The --md-*, --sp-*, --r-*, --el-*, --fs-*, --lh-*,
 * --track-*, --dur-*, --ease-* blocks below are copied verbatim; when the site
 * changes a value, copy it here too. Light-only, like the site (owner decision).
 *
 * Below them: --c-* aliases that sim-core.js reads into GG.colors for canvas
 * drawing, and the simulation data palette (see "Sim data" note).
 * Last: the page base every page shares (reset, body type, selection, focus, .sr-only).
 */

/* ---- fonts: self-hosted Greek + Latin subsets (OFL-1.1, files/fonts/LICENSE-*) ----
 * Served over http(s) these load; opened from file:// Chrome refuses cross-origin
 * font loads and the system fallbacks in --font-* take over (layout still works). */
@font-face {
	font-family: "Inter Variable"; font-style: normal; font-display: swap; font-weight: 100 900;
	src: url(../fonts/inter-greek-wght-normal.woff2) format("woff2-variations");
	unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
	font-family: "Inter Variable"; font-style: normal; font-display: swap; font-weight: 100 900;
	src: url(../fonts/inter-latin-wght-normal.woff2) format("woff2-variations");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Literata Variable"; font-style: normal; font-display: swap; font-weight: 200 900;
	src: url(../fonts/literata-greek-wght-normal.woff2) format("woff2-variations");
	unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
	font-family: "Literata Variable"; font-style: normal; font-display: swap; font-weight: 200 900;
	src: url(../fonts/literata-latin-wght-normal.woff2) format("woff2-variations");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Italic Literata: physics quantity symbols only (k, m, F…), per ISO notation. */
@font-face {
	font-family: "Literata Variable"; font-style: italic; font-display: swap; font-weight: 200 900;
	src: url(../fonts/literata-greek-wght-italic.woff2) format("woff2-variations");
	unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
	font-family: "Literata Variable"; font-style: italic; font-display: swap; font-weight: 200 900;
	src: url(../fonts/literata-latin-wght-italic.woff2) format("woff2-variations");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "JetBrains Mono Variable"; font-style: normal; font-display: swap; font-weight: 100 800;
	src: url(../fonts/jetbrains-mono-greek-wght-normal.woff2) format("woff2-variations");
	unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
	font-family: "JetBrains Mono Variable"; font-style: normal; font-display: swap; font-weight: 100 800;
	src: url(../fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2-variations");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	color-scheme: light;

	/* ==== STEMTeacher tokens (verbatim) ==================================== */
	/* Color (Material 3 roles) */
	--md-primary: #1b3a6b;
	--md-on-primary: #ffffff;
	--md-primary-container: #dbe5f7;
	--md-on-primary-container: #0d2247;
	--md-secondary: #2f6f73;
	--md-on-secondary: #ffffff;
	--md-secondary-container: #d3ecec;
	--md-on-secondary-container: #0f3537;
	--md-tertiary: #c2410c;          /* site: the one CTA. Sims: + charge data mark only */
	--md-on-tertiary: #ffffff;
	--md-tertiary-hover: #a8370a;
	--md-tertiary-container: #ffe3d3;
	--md-on-tertiary-container: #4a1a05;
	--md-background: #faf9f6;
	--md-surface: #ffffff;
	--md-surface-dim: #f1efea;
	--md-surface-container: #f4f2ee;
	--md-on-surface: #17191e;
	--md-on-surface-variant: #565b64;
	--md-outline: #848b95;           /* control boundaries (≥3:1) */
	--md-outline-variant: #e1e4ea;   /* decorative dividers only */
	--md-error: #b3261e;
	--md-on-error: #ffffff;
	--md-error-container: #f9dedc;
	--md-inverse-surface: #2c2f36;
	--md-inverse-on-surface: #f2f3f7;

	/* Spacing (4pt grid) */
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.5rem;
	--sp-6: 2rem;
	--sp-7: 3rem;
	--sp-8: 4rem;
	--sp-9: 6rem;
	--sp-10: 8rem;
	--gutter: clamp(var(--sp-4), 4vw, var(--sp-7));
	--container: 72rem;    /* site page width; theory pages match the site header */

	/* Shape */
	--r-xs: 0.25rem;
	--r-sm: 0.5rem;
	--r-md: 0.75rem;
	--r-lg: 1rem;
	--r-xl: 1.75rem;
	--r-full: 999px;

	/* Elevation */
	--el-0: none;
	--el-1: 0 1px 2px rgba(23, 25, 30, 0.08), 0 1px 3px 1px rgba(23, 25, 30, 0.05);
	--el-2: 0 1px 2px rgba(23, 25, 30, 0.08), 0 2px 6px 2px rgba(23, 25, 30, 0.06);
	--el-3: 0 4px 8px 3px rgba(23, 25, 30, 0.07), 0 1px 3px rgba(23, 25, 30, 0.1);

	/* Typography: Literata = h1/h2 only (≥24px, weight 600); Inter = everything else (400/500/600);
	   JetBrains Mono = data and simple values (not a math face). */
	--font-sans: "Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-serif: "Literata Variable", Literata, Georgia, "Times New Roman", serif;
	--font-mono: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
	--fs-body-s: 0.875rem;
	--fs-body-m: 1rem;
	--fs-body-l: 1.125rem;
	--fs-title-s: 1rem;
	--fs-title-m: 1.125rem;
	--fs-title-l: 1.375rem;
	--fs-headline-s: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem);
	--fs-headline-m: clamp(1.75rem, 1.3rem + 1.8vw, 2.25rem);
	--fs-headline-l: clamp(2rem, 1.5rem + 2.4vw, 2.75rem);
	--lh-tight: 1.18;      /* serif value, per brand V4.3 */
	--lh-snug: 1.25;
	--lh-body: 1.6;
	--track-headline: -0.005em;

	/* Motion */
	--dur-fast: 150ms;
	--dur-base: 250ms;
	--dur-slow: 450ms;
	--ease-standard: cubic-bezier(0.2, 0, 0, 1);
	--ease-decel: cubic-bezier(0.05, 0.7, 0.1, 1);
	--ease-accel: cubic-bezier(0.3, 0, 0.8, 0.15);

	/* Z-index */
	--z-nav: 50;
	--z-drawer: 60;

	/* ==== gg aliases (read by sim-core.js → GG.colors) ======================= */
	--c-page: var(--md-background);
	--c-bg: var(--md-surface);            /* canvas, panels, cards */
	--c-panel: var(--md-surface);
	--c-border: var(--md-outline-variant);
	--c-ink: var(--md-on-surface);
	--c-muted: var(--md-on-surface-variant);
	--c-grid: var(--md-outline-variant);
	--c-accent: var(--md-primary);
	--c-accent-ink: var(--md-on-primary);
	--font-math: "Literata Variable", Literata, Georgia, "Times New Roman", serif; /* quantity symbols */

	/* ==== Sim data palette (canvas only) – approved by the owner 2026-09-26 ==========
	 * Rule: every colour stands for a physical thing. One meaning per colour within a
	 * sim; across sims a colour is reused only for the same or a related thing
	 * (electron = β, light = γ, kinetic energy = velocity). Additions are derived in
	 * OKLCH at the brand's ink lightness/chroma so they sit in the same family.
	 * Co-occurring marks differ in lightness (survives every colour-vision type) AND
	 * are told apart by shape + label. Values/contrast: design-system/MASTER.md;
	 * review page: gg-html5/_palette.html. */

	/* charge & particles */
	--c-negative: var(--md-primary);      /* − charge, electron                    #1b3a6b */
	--c-positive: var(--md-tertiary);     /* + charge, proton                      #c2410c */
	--c-neutral: var(--md-outline);       /* neutral atom, neutron (graphics only)  #848b95 */
	--c-electron: var(--c-negative);
	--c-proton: var(--c-positive);
	--c-neutron: var(--c-neutral);

	/* mechanics */
	--c-force: var(--md-secondary);       /* force vectors F                        #2f6f73 */
	--c-velocity: #7e2757;                /* velocity υ – oklch(0.42 0.13 350) berry  9.1:1 */
	--c-kinetic: var(--c-velocity);       /* kinetic energy K depends on υ */
	--c-potential: #9480bb;               /* potential energy U – oklch(0.64 0.09 300) lavender, bars only 3.5:1 */
	--c-energy-total: var(--md-on-surface-variant); /* total energy E */

	/* electricity & magnetism */
	--c-field: #589195;                   /* E and B field lines – oklch(0.62 0.06 201), lighter teal: field = force per charge, 3.6:1 */
	--c-current: #633f00;                 /* conventional current I – oklch(0.40 0.09 75) copper, 9.4:1 */
	--c-north: #ac3031;                   /* N pole – oklch(0.50 0.16 25), red-N convention, 6.5:1 */
	--c-south: var(--md-primary);         /* S pole – blue-S convention */
	--c-glow: #f3de90;                    /* lamp glow fill – oklch(0.90 0.10 95); brightness ∝ power */
	--c-warning: var(--md-error);         /* short circuit, wrong meter wiring */

	/* heat & temperature: cold → hot scale uses brand ends */
	--c-heat: var(--md-tertiary);
	--c-cold: var(--md-secondary);
	--c-hot: var(--md-tertiary);

	/* optics & radiation */
	--c-light: #b08505;                   /* light rays – oklch(0.64 0.13 85) gold, thick lines 3.4:1 */
	--c-gamma: var(--c-light);            /* γ is light */
	--c-alpha: var(--c-positive);         /* α = He nucleus, positive */
	--c-beta: var(--c-negative);          /* β = electron */
	--c-optic-object: var(--md-primary);  /* object arrow */
	--c-image: var(--md-secondary);       /* image arrow: solid = real, dashed = virtual */
	--c-glass: #d2eef0;                   /* lens/prism/water fill – oklch(0.93 0.03 201) */
	--c-darkroom: #101828;                /* brand dark set "Deep Ink": colour-mixing screen */
	--c-darkroom-ink: #e8eaf0;

	/* physical colours of light – content, not decoration; always labelled */
	--c-spectrum-red: #e02d2d;            /* ερυθρό */
	--c-spectrum-orange: #f07f1f;         /* πορτοκαλί */
	--c-spectrum-yellow: #f2cf1d;         /* κίτρινο */
	--c-spectrum-green: #2e9e48;          /* πράσινο */
	--c-spectrum-cyan: #1f9bd7;           /* κυανό */
	--c-spectrum-indigo: #3346b8;         /* βαθύ μπλε (λουλακί) */
	--c-spectrum-violet: #7a3db8;         /* ιώδες */
	--c-light-r: #ff0000;                 /* additive primaries (RGB) */
	--c-light-g: #00ff00;
	--c-light-b: #0000ff;
	--c-pigment-c: #00ffff;               /* subtractive primaries (CMY) */
	--c-pigment-m: #ff00ff;
	--c-pigment-y: #ffff00;

	/* bodies, apparatus, graphs */
	--c-object: var(--md-primary-container);
	--c-object-edge: var(--md-primary);
	--c-metal: var(--md-outline);         /* wires, walls, fixed parts */
	--c-series-1: var(--md-primary);
	--c-series-2: var(--md-secondary);
	--c-series-3: var(--c-velocity);
	--c-series-4: var(--c-current);
}

/* ---- page base, shared by sim.css, text.css and index.css (they add only their own rules) ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }
body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-body-m);
	line-height: var(--lh-body);
	color: var(--md-on-surface);
	background: var(--md-background);
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: transparent;
	font-feature-settings: "cv11", "ss01";
	accent-color: var(--md-primary);
	caret-color: var(--md-primary);
}
::selection { background: var(--md-primary-container); color: var(--md-on-primary-container); }
:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 3px; border-radius: var(--r-xs); }
/* Screen-reader-only text. */
.sr-only {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}