/* ==========================================================================
   @ckx-be/platform-core — base.css
   A minimal, modern scaffold. Readable in one sitting by design.

   Structure:
     1. Reset            modern-normalize equivalent, trimmed
     2. Design tokens    --ckx-* custom properties (full defaults)
     3. Shape & shadow   data-attribute maps for the enumerated theme dials
     4. Tone bands       data-tone="inverse" dark-section token remap
     5. Base elements    typography, links, media, forms, a few utilities

   This file is the *scaffold*: a reset plus a complete default design-token
   layer expressed as CSS custom properties. It intentionally ships NO component
   styles. Each client owns its markup and its full design system in
   public/assets/custom.css (loaded last by the base layout), where it fills in /
   overrides these --ckx-* tokens and styles its own bespoke components.

   Per-client token values also arrive as a small <style> block injected by the
   base layout from _data/theme.json; that block only overrides the tokens below,
   so a sparse or empty theme.json still produces a complete, working baseline.
   ========================================================================== */

/* 1. Reset --------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  line-height: 1.5;
}

body {
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

:target {
  scroll-margin-block: var(--ckx-space-xl);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 2. Design tokens ------------------------------------------------------- */

:root {
  /* Colour */
  --ckx-color-primary: #e63946;
  --ckx-color-secondary: #1d3557;
  --ckx-color-accent: #457b9d;
  --ckx-color-background: #ffffff;
  --ckx-color-surface: #f7f8fa;
  --ckx-color-text: #1d2433;
  --ckx-color-text-muted: #5b6472;
  --ckx-color-border: #e2e6ea;

  /* Typography */
  --ckx-font-heading: system-ui, sans-serif;
  --ckx-font-body: system-ui, sans-serif;
  --ckx-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ckx-font-size-base: 1.125rem;
  --ckx-scale-ratio: 1.25;

  /* Modular type scale, derived from base size and ratio.
     h6 = base, each larger heading multiplies by the ratio again. */
  --ckx-font-size-sm: calc(var(--ckx-font-size-base) / var(--ckx-scale-ratio));
  --ckx-font-size-h6: var(--ckx-font-size-base);
  --ckx-font-size-h5: calc(var(--ckx-font-size-h6) * var(--ckx-scale-ratio));
  --ckx-font-size-h4: calc(var(--ckx-font-size-h5) * var(--ckx-scale-ratio));
  --ckx-font-size-h3: calc(var(--ckx-font-size-h4) * var(--ckx-scale-ratio));
  --ckx-font-size-h2: calc(var(--ckx-font-size-h3) * var(--ckx-scale-ratio));
  --ckx-font-size-h1: calc(var(--ckx-font-size-h2) * var(--ckx-scale-ratio));

  --ckx-line-height: 1.6;
  --ckx-line-height-heading: 1.15;

  /* Spacing scale, derived from a single base unit */
  --ckx-space-unit: 1rem;
  --ckx-space-2xs: calc(var(--ckx-space-unit) * 0.25);
  --ckx-space-xs: calc(var(--ckx-space-unit) * 0.5);
  --ckx-space-s: calc(var(--ckx-space-unit) * 0.75);
  --ckx-space-m: var(--ckx-space-unit);
  --ckx-space-l: calc(var(--ckx-space-unit) * 1.5);
  --ckx-space-xl: calc(var(--ckx-space-unit) * 2);
  --ckx-space-2xl: calc(var(--ckx-space-unit) * 3);
  --ckx-space-3xl: calc(var(--ckx-space-unit) * 4);

  --ckx-section-padding: 5rem;
  --ckx-container-max: 72rem;
  --ckx-container-gutter: var(--ckx-space-m);

  /* Shape & shadow — concrete defaults; overridden by the maps in section 3 */
  --ckx-radius: 0.375rem;
  --ckx-shadow: 0 1px 3px rgb(0 0 0 / 0.1), 0 1px 2px rgb(0 0 0 / 0.06);

  --ckx-focus-ring: 0 0 0 3px color-mix(in oklab, var(--ckx-color-primary) 40%, transparent);
}

/* 3. Shape & shadow dials ------------------------------------------------ */
/* The base layout sets data-radius / data-shadow on <html> from theme.json.
   Keeping the enumerated choices here (rather than in JSON) means the named
   options live in one place and stay consistent across every client. */

[data-radius="none"] {
  --ckx-radius: 0;
}
[data-radius="subtle"] {
  --ckx-radius: 0.375rem;
}
[data-radius="rounded"] {
  --ckx-radius: 0.75rem;
}
[data-radius="pill"] {
  --ckx-radius: 999px;
}

[data-shadow="none"] {
  --ckx-shadow: none;
}
[data-shadow="soft"] {
  --ckx-shadow: 0 1px 3px rgb(0 0 0 / 0.1), 0 1px 2px rgb(0 0 0 / 0.06);
}
[data-shadow="strong"] {
  --ckx-shadow: 0 10px 25px rgb(0 0 0 / 0.12), 0 4px 10px rgb(0 0 0 / 0.08);
}

/* 4. Tone bands ---------------------------------------------------------- */
/* Optional convention: a section can opt into a dark treatment with
   data-tone="inverse". Remapping the colour tokens on that subtree flips the
   background, text, muted text and borders for every token-driven child in one
   place. base.css only guarantees a legible dark band from any primary colour;
   clients refine the exact inverse palette in their own stylesheet. */

[data-tone="inverse"] {
  --ckx-color-background: var(--ckx-color-primary);
  --ckx-color-surface: color-mix(in oklab, var(--ckx-color-primary) 90%, white);
  --ckx-color-text: #ffffff;
  --ckx-color-text-muted: rgb(255 255 255 / 0.72);
  --ckx-color-border: rgb(255 255 255 / 0.16);

  background-color: var(--ckx-color-background);
  color: var(--ckx-color-text);
}

/* Links inside an inverse band lean on the accent so they don't vanish. */
[data-tone="inverse"] a {
  color: var(--ckx-color-accent);
}

/* 5. Base elements ------------------------------------------------------- */

html {
  font-size: var(--ckx-font-size-base);
}

body {
  font-family: var(--ckx-font-body);
  font-size: 1rem;
  line-height: var(--ckx-line-height);
  color: var(--ckx-color-text);
  background-color: var(--ckx-color-background);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--ckx-font-heading);
  line-height: var(--ckx-line-height-heading);
  font-weight: 700;
  text-wrap: balance;
}

h1 {
  font-size: var(--ckx-font-size-h1);
}
h2 {
  font-size: var(--ckx-font-size-h2);
}
h3 {
  font-size: var(--ckx-font-size-h3);
}
h4 {
  font-size: var(--ckx-font-size-h4);
}
h5 {
  font-size: var(--ckx-font-size-h5);
}
h6 {
  font-size: var(--ckx-font-size-h6);
}

p {
  text-wrap: pretty;
}

a {
  color: var(--ckx-color-primary);
  text-underline-offset: 0.15em;
}

a:hover {
  color: color-mix(in oklab, var(--ckx-color-primary) 80%, black);
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: none;
  box-shadow: var(--ckx-focus-ring);
  border-radius: var(--ckx-radius);
}

hr {
  border: none;
  border-top: 1px solid var(--ckx-color-border);
  margin-block: var(--ckx-space-l);
}

/* A few layout utilities — Grid/Flexbox only, mobile-first. Optional; a client
   can ignore these and use its own classes in custom.css. */

.ckx-container {
  width: min(100% - (var(--ckx-container-gutter) * 2), var(--ckx-container-max));
  margin-inline: auto;
}

.ckx-section {
  padding-block: var(--ckx-section-padding);
}

.ckx-surface {
  background-color: var(--ckx-color-surface);
}

.ckx-stack {
  display: flex;
  flex-direction: column;
  gap: var(--ckx-space-m);
}

.ckx-muted {
  color: var(--ckx-color-text-muted);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}