/* =====================================================================
   Kaka Nexus design tokens — the single source for colour, type, space,
   radius, shadow, widths, motion, breakpoints and focus states.
   Used by the public site (site.css) and the admin (admin.css).
   ===================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-var.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 100% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader-var.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Brand palette (exact) ---- */
  --kn-navy: #17232D;          /* Midnight Navy — the foundation */
  --kn-gold: #C6A568;          /* Champagne Gold — actions, connections, highlights */
  --kn-ivory: #F5F1E8;         /* Warm Ivory — contrast and long-form reading */

  /* ---- Derived tones (tints/shades of the brand colours only) ---- */
  --kn-navy-deep: #111B23;     /* deepest surface: footer, deep bands */
  --kn-navy-raised: #1E2E3A;   /* raised panels on navy */
  --kn-navy-edge: #2C3F4D;     /* strong borders on navy */
  --kn-gold-soft: #D9C192;     /* gold hover */
  --kn-gold-ink: #7A5F2B;      /* gold for text on ivory (5.3:1) */
  --kn-ivory-deep: #ECE5D6;    /* ivory panels and dividers */

  /* ---- Semantic colours ---- */
  --color-bg: var(--kn-navy);
  --color-surface: var(--kn-navy-raised);
  --color-text: var(--kn-ivory);                 /* 14.2:1 on navy */
  --color-text-muted: #A7AEB0;                   /* 7.1:1 on navy */
  --color-line: rgba(245, 241, 232, 0.12);
  --color-line-strong: rgba(245, 241, 232, 0.24);
  --color-accent: var(--kn-gold);                /* 6.8:1 on navy */
  --color-on-accent: var(--kn-navy);

  --color-bg-light: var(--kn-ivory);
  --color-text-on-light: var(--kn-navy);         /* 14.2:1 on ivory */
  --color-text-muted-on-light: #4C5A63;          /* 6.3:1 on ivory */
  --color-line-on-light: rgba(23, 35, 45, 0.14);
  --color-accent-on-light: var(--kn-gold-ink);

  /* Functional states (accessible on their surfaces) */
  --color-success: #8FD1A8;   --color-success-on-light: #2F7A4F;
  --color-error: #E8A598;     --color-error-on-light: #A33A2B;
  --color-warning: #E6C77A;   --color-warning-on-light: #7A5A12;

  /* ---- Typography ---- */
  --font-sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --stretch-display: 118%;     /* expanded Archivo for headlines */
  --stretch-heading: 108%;
  --stretch-body: 100%;

  /* Modular scale, ratio ≈ 1.25, fluid at the top end */
  --text-xs: 0.8125rem;        /* 13 */
  --text-sm: 0.9375rem;        /* 15 */
  --text-base: 1.0625rem;      /* 17 */
  --text-md: 1.25rem;          /* 20 */
  --text-lg: clamp(1.375rem, 1.1rem + 0.9vw, 1.625rem);
  --text-xl: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  --text-2xl: clamp(2.125rem, 1.4rem + 2.6vw, 3.5rem);
  --text-display: clamp(2.6rem, 1.2rem + 5.4vw, 5.75rem);

  --leading-tight: 1.04;
  --leading-heading: 1.12;
  --leading-body: 1.6;
  --leading-serif: 1.72;
  --tracking-display: -0.025em;
  --tracking-heading: -0.015em;

  /* ---- Spacing (4px base) ---- */
  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem;   --space-6: 2rem;    --space-7: 2.5rem;  --space-8: 3rem;
  --space-9: 4rem;     --space-10: 5rem;   --space-11: 6.5rem; --space-12: 8rem;
  --section-pad: clamp(4rem, 2.5rem + 6vw, 8rem);
  --gutter: clamp(1rem, 0.5rem + 2.4vw, 2.5rem);   /* 16px on phones */

  /* ---- Radius: kept small and purposeful ---- */
  --radius-xs: 2px;            /* controls, tags */
  --radius-sm: 4px;            /* buttons, inputs */
  --radius-md: 8px;            /* media frames */
  --radius-pill: 999px;
  --chamfer: 18px;             /* the cut corner, echoing the K mark */

  /* ---- Shadows ---- */
  --shadow-lift: 0 24px 48px -28px rgba(4, 9, 13, 0.75);
  --shadow-panel: 0 1px 0 rgba(245, 241, 232, 0.04) inset, 0 18px 40px -30px rgba(4, 9, 13, 0.8);

  /* ---- Content widths ---- */
  --width-page: 77.5rem;       /* 1240 */
  --width-text: 42rem;         /* ~68ch reading measure */
  --width-narrow: 48rem;

  /* ---- Motion ---- */
  --dur-fast: 150ms;
  --dur-base: 260ms;
  --dur-slow: 700ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---- Breakpoints (reference values; media queries use these literals) ----
     sm 40rem/640px · md 48rem/768px · lg 64rem/1024px · xl 90rem/1440px */
  --bp-sm: 40rem; --bp-md: 48rem; --bp-lg: 64rem; --bp-xl: 90rem;

  /* ---- Focus & interaction ---- */
  --focus-ring: 0 0 0 2px var(--kn-navy), 0 0 0 4px var(--kn-gold);
  --focus-ring-on-light: 0 0 0 2px var(--kn-ivory), 0 0 0 4px var(--kn-navy);
  --hover-lift: translateY(-2px);

  --header-h: 4.5rem;
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --hover-lift: none; }
}