/* ==========================================================================
   switzerlandfirma.com — Design tokens
   All values are drop-in CSS custom properties.
   Light-only. Consumers should respect prefers-reduced-motion.
   ========================================================================== */

:root {
  /* ---------- Colour ---------- */
  /* Paper-warm surfaces; ink-dark text (never pure #000 on #fff). */
  --color-bg:              #F7F5F1;   /* paper */
  --color-bg-raised:       #FBFAF7;   /* subtle elevation */
  --color-bg-subtle:       #EFECE6;   /* section contrast */
  --color-bg-inverse:      #16181C;   /* deep ink, for dark-on-light blocks */

  --color-text-primary:    #16181C;   /* ink */
  --color-text-secondary:  #4A4E57;   /* muted copy / captions */
  --color-text-tertiary:   #7A7E87;   /* meta / labels */
  --color-text-inverse:    #F7F5F1;

  --color-border:          #DCD7CD;   /* hairlines on paper */
  --color-border-strong:   #B8B2A6;
  --color-border-inverse:  #2A2D33;

  /* Links — internal vs external differ to support citation density */
  --color-link:            #1B3A5B;   /* deep ink-blue, internal */
  --color-link-hover:      #0F2742;
  --color-link-external:   #5C4A1F;   /* sepia-olive, external authorities */
  --color-link-visited:    #3A2A52;

  /* Brand primary: "ledger green" — restrained, conservative, non-cliché.
     Evokes accounting, legal statute, verdigris on brass — not marketing. */
  --color-primary:         #2F4F3E;
  --color-primary-hover:   #1F3A2C;
  --color-primary-soft:    #E4EBE4;

  /* Accent: "archive ochre" — a single warm accent for stat-callouts and
     editorial flourish. Low saturation, no banker gold. */
  --color-accent:          #B8884C;
  --color-accent-soft:     #F2E9D8;

  /* Semantic */
  --color-success:         #2F4F3E;   /* same family as primary */
  --color-success-soft:    #E4EBE4;
  --color-warning:         #8A5A1E;
  --color-warning-soft:    #F5E9D3;

  /* Focus: WCAG 3:1, 2px offset applied in base.css */
  --color-focus:           #1B3A5B;

  /* ---------- Typography ---------- */
  /* Sans: Söhne-alternative via IBM Plex Sans — Swiss-grotesque feel,
            excellent numeral design, open licence.
     Serif: Source Serif 4 — editorial long-form, strong at 18–21px.
     Mono: JetBrains Mono — for slugs, statute references (CO Art. 718).
     All self-hostable; Google Fonts CDN in demo files. */
  --font-sans:   "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif:  "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --font-mono:   "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale — one standard, fixed pixel sizes.
     Mobile downsizing via single @media in base.css.
     NO clamp(), NO per-hero overrides. Every h1 is the same size everywhere. */
  --text-display:     72px / 1.05;   /* home hero only */
  --text-h1:          56px / 1.08;   /* every other h1 — pillar, article, legal, about, contact, 404 */
  --text-h2:          40px / 1.18;
  --text-h3:          28px / 1.25;
  --text-h4:          20px / 1.3;
  --text-h5:          16px / 1.35;

  /* Mobile (≤640px) — one step down, still px */
  --text-display-sm:  48px / 1.1;
  --text-h1-sm:       36px / 1.15;
  --text-h2-sm:       28px / 1.2;
  --text-h3-sm:       22px / 1.3;
  --text-h4-sm:       18px / 1.35;
  --text-body-lg:     1.1875rem / 1.65;   /* 19px — pillar body */
  --text-body:        1rem / 1.65;
  --text-small:       0.9375rem / 1.55;
  --text-micro:       0.8125rem / 1.4;
  --text-eyebrow:     0.75rem / 1.2;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  --tracking-tight:  -0.015em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-eyebrow:0.14em;

  /* ---------- Spacing — 4px base ---------- */
  --space-1:  0.25rem;  /*  4 */
  --space-2:  0.5rem;   /*  8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  2.5rem;   /* 40 */
  --space-8:  3rem;     /* 48 */
  --space-9:  4rem;     /* 64 */
  --space-10: 5rem;     /* 80 */
  --space-11: 6rem;     /* 96 */
  --space-12: 8rem;     /*128 */

  /* ---------- Radius ---------- */
  /* Deliberately small. Premium-conservative aesthetic — not SaaS-bubbly. */
  --radius-xs:   2px;
  --radius-sm:   3px;
  --radius-md:   4px;
  --radius-lg:   6px;
  --radius-pill: 999px;

  /* ---------- Shadow ---------- */
  /* Restrained; no glow. Paper depth, not plastic. */
  --shadow-sm: 0 1px 2px rgba(22, 24, 28, 0.05),
               0 0 0 1px rgba(22, 24, 28, 0.04);
  --shadow-md: 0 4px 14px rgba(22, 24, 28, 0.06),
               0 0 0 1px rgba(22, 24, 28, 0.04);
  --shadow-lg: 0 18px 40px -16px rgba(22, 24, 28, 0.18),
               0 0 0 1px rgba(22, 24, 28, 0.04);

  /* ---------- Motion ---------- */
  --ease-default: cubic-bezier(0.2, 0, 0, 1);
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 360ms;

  /* ---------- Layout ----------
     ONE content width. Hero, article body, legal body, every section —
     same 1200 px. Paragraph readability controlled via max-width:ch
     inside the column, not by narrowing the container. */
  --container-max:    1200px;
  --container-article: 1200px;   /* unified with container-max; retained for backward compat */
  --container-wide:   1200px;    /* unified — no visual bleed anywhere */
  --gutter:           clamp(1.25rem, 4vw, 2.5rem);

  /* ---------- Breakpoints (reference — use in @media) ----------
     --bp-sm: 640px;   mobile / tablet portrait
     --bp-md: 1024px;  tablet landscape / small laptop
     --bp-lg: 1280px;  desktop
  */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}