/* AKJ design tokens, derived from AKJ/design/tokens.css (DRAFT v0.1, from BRAND_SUMMARY v1.1).
   Placeholder layer: the Argon design replaces site.css, not these values. Do not add colours
   without updating the brand summary.
   Fonts: Kanit and Inter load from /css/fonts.css (self-hosted) when that file is present;
   the system stack below is the fallback. */
:root {
  /* Core colours */
  --akj-orange: #E17A21;      /* fill, rule or large graphic; never text on white or light grey */
  --akj-onyx: #222831;
  --akj-white: #FFFFFF;
  --akj-light-grey: #F2F3F4;

  /* Roles. Contrast: onyx/white 14.83, onyx/light-grey 13.35, onyx/orange 4.95,
     orange/white 2.997 (fails), orange/light-grey 2.70 (fails): orange TEXT only on onyx */
  --color-text: var(--akj-onyx);
  --color-bg: var(--akj-white);
  --color-surface: var(--akj-light-grey);
  --color-panel: var(--akj-onyx);
  --color-on-panel: var(--akj-white);
  --color-accent: var(--akj-orange);
  --color-cta-bg: var(--akj-orange);
  --color-cta-text: var(--akj-onyx);
  --color-focus: var(--akj-onyx);
  --color-focus-on-dark: var(--akj-white); /* tokens v0.2 (03, H-014) */

  /* Typography */
  --font-display: "Kanit", "Kanit Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --weight-display: 600;
  --fs-display: clamp(2rem, 1.2rem + 3.2vw, 4rem);
  --fs-section: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --fs-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --fs-support: 0.875rem;
  --lh-body: 1.5;

  /* Interaction and layout */
  --tap-min: 44px;
  --rule: 2px solid var(--akj-orange);
  --gap: 1rem;
  --motion-fast: 180ms;
  --motion-base: 320ms;
}

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