/* ==========================================================
   Protecht design tokens v2 — "navy desk, paper documents"
   Semantic tokens default to navy. Inside .paper they flip to light.
   Copper = the protection moment. Navy = the platform. Ivory = paper.
   ========================================================== */
:root {
  /* palette */
  --ink: #0C1226; --ink-2: #141C36; --ink-3: #1D2748; --ink-4: #2A365F;
  --ivory: #F7F4EE; --ivory-2: #EFEAE1; --paper-white: #FFFFFF;
  --line: #E4DED3; --line-2: #D3CBBD;
  --steel: #8E97AD; --steel-2: #5C667F;
  --text: #141A2E; --text-2: #3C4560; --text-on-dark: #F5F0E8; --text-on-dark-2: #C9CEDC;
  --copper: #D8925B; --copper-2: #B9703B; --copper-3: #F0BC8A;
  --copper-glow: rgba(216,146,91,.35); --copper-soft: rgba(216,146,91,.12);
  --mint: #3EC79A;  --mint-soft: rgba(62,199,154,.14);  --mint-ink: #0F7A5A;
  --coral: #F0614F; --coral-soft: rgba(240,97,79,.12); --coral-ink: #B2392A;
  --amber: #E8A93A; --amber-soft: rgba(232,169,58,.14); --amber-ink: #8A5A0B;
  --sky: #4C9BE8;   --sky-soft: rgba(76,155,232,.14);   --sky-ink: #1E5FA8;

  /* semantic — light desk (default). Fresh, paper-white; navy is type, copper is the protection moment. */
  --bg: #F7F6F2; --bg-2: #FFFFFF; --bg-3: #EFEDE7;
  --fg: var(--text); --fg-2: var(--text-2); --fg-muted: var(--steel-2);
  --rule: #E5E2DA; --rule-2: #D2CEC3;
  --accent: var(--copper); --accent-hover: var(--copper-2);
  --ok: var(--mint-ink); --warn: var(--amber-ink); --err: var(--coral-ink); --info: var(--sky-ink);
  --placeholder: #A3A9BA; --selection: rgba(216,146,91,.3);
  --copper-hi: var(--copper-2);
  /* legacy aliases (still used by older page CSS) */
  --card: var(--bg-2); --border: var(--rule); --paper: var(--bg-2); --primary: var(--ink);

  /* type */
  --font-display: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --t-xs: .75rem; --t-sm: .875rem; --t-base: 1rem; --t-md: 1.0625rem; --t-lg: 1.25rem; --t-xl: 1.5rem;
  --t-2xl: 2rem; --t-3xl: 2.625rem; --t-4xl: 3.5rem; --t-5xl: 4.25rem;
  --lh-tight: 1.02; --lh-snug: 1.15; --lh-normal: 1.55; --lh-relaxed: 1.65;

  /* space */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.25rem; --s-6: 1.5rem; --s-8: 2rem;
  --s-10: 2.5rem; --s-12: 3rem; --s-16: 4rem; --s-20: 5rem; --s-24: 6rem; --s-32: 8rem;
  /* radius — one scale */
  --r-1: 4px; --r-2: 8px; --r-3: 12px; --r-full: 999px;
  --r-sm: var(--r-1); --r-md: var(--r-2); --r-lg: var(--r-3); --r-xl: var(--r-3); --r-2xl: var(--r-3);
  /* shadow — paper on the desk, copper for the one primary action */
  --sh-paper: 0 1px 2px rgba(20,26,46,.05), 0 20px 40px -24px rgba(20,26,46,.22);
  --sh-copper: 0 8px 22px -10px var(--copper-glow);
  --sh-sm: none; --sh-md: none; --sh-lg: var(--sh-paper);
  --ease: cubic-bezier(.2,.7,.2,1);
  --fast: 150ms var(--ease); --base: 240ms var(--ease); --slow: 480ms var(--ease);
  --max: 1200px; --max-narrow: 880px; --max-text: 720px; --nav-h: 68px;
}
/* paper — the document object: a white sheet on the light desk */
.paper {
  --bg: #FFFFFF; --bg-2: #FBFAF7; --bg-3: var(--ivory-2);
  --rule: var(--line); --rule-2: var(--line-2);
  --card: #FFFFFF; --border: var(--line); --paper: #FFFFFF;
  color: var(--fg);
}
/* dark — the few navy objects (hero stage, certificate, dark bands). Tokens flip to navy inside. */
.dark {
  --bg: var(--ink); --bg-2: var(--ink-2); --bg-3: var(--ink-3);
  --fg: var(--text-on-dark); --fg-2: var(--text-on-dark-2); --fg-muted: var(--steel);
  --rule: var(--ink-3); --rule-2: var(--ink-4);
  --accent-hover: var(--copper-3); --copper-hi: var(--copper-3);
  --ok: var(--mint); --warn: var(--amber); --err: var(--coral); --info: var(--sky);
  --placeholder: #5F6A87;
  --card: var(--ink-2); --border: var(--ink-3); --paper: var(--ink-2);
  color: var(--fg); background: var(--bg);
}