/* =========================================================================
   tokens.css — Design system extracted 1:1 from the Kaeli (Flouix) template
   Palette anchors, fluid type scale, spacing scale, containers, light theme.
   Adapted content lives in the HTML; the visual system here matches the source.
   ========================================================================= */

:root {
  /* --- Palette anchors (from source CSS custom properties) --- */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-accent-500: #fc6142;   /* coral — the one brand accent */
  --color-main-500:   #ababab;   /* neutral grey — background family */
  --color-neutral-500:#6a707e;   /* slate — text family */
  --color-error:   #ec4a46;
  --color-success: #41b08c;
  --color-warning: #c0a163;

  /* Accent tints/shades (color-mix, exactly as source) */
  --accent-25:  color-mix(in srgb, var(--color-accent-500) 4%,  var(--color-white));
  --accent-50:  color-mix(in srgb, var(--color-accent-500) 8%,  var(--color-white));
  --accent-100: color-mix(in srgb, var(--color-accent-500) 25%, var(--color-white));
  --accent-300: color-mix(in srgb, var(--color-accent-500) 60%, var(--color-white));
  --accent-500: var(--color-accent-500);
  --accent-600: color-mix(in srgb, var(--color-accent-500) 75%, var(--color-black));
  --accent-700: color-mix(in srgb, var(--color-accent-500) 60%, var(--color-black));

  /* Neutral (text) family */
  --neutral-25:  color-mix(in srgb, var(--color-neutral-500) 4%,  var(--color-white));
  --neutral-50:  color-mix(in srgb, var(--color-neutral-500) 8%,  var(--color-white));
  --neutral-100: color-mix(in srgb, var(--color-neutral-500) 25%, var(--color-white));
  --neutral-400: color-mix(in srgb, var(--color-neutral-500) 75%, var(--color-white));
  --neutral-600: color-mix(in srgb, var(--color-neutral-500) 75%, var(--color-black));
  --neutral-800: color-mix(in srgb, var(--color-neutral-500) 40%, var(--color-black));
  --neutral-975: color-mix(in srgb, var(--color-neutral-500) 5%,  var(--color-black));

  /* Main (background) family */
  --main-25:  color-mix(in srgb, var(--color-main-500) 4%,  var(--color-white));
  --main-50:  color-mix(in srgb, var(--color-main-500) 8%,  var(--color-white));
  --main-100: color-mix(in srgb, var(--color-main-500) 25%, var(--color-white));
  --main-900: color-mix(in srgb, var(--color-main-500) 25%, var(--color-black));
  --main-950: color-mix(in srgb, var(--color-main-500) 10%, var(--color-black));
  --main-975: color-mix(in srgb, var(--color-main-500) 5%,  var(--color-black));

  /* --- Light theme (the site default) --- */
  --bg:         var(--main-25);
  --bg-alt:     var(--main-50);
  --surface:    var(--color-white);
  --text:       var(--neutral-975);
  --text-muted: var(--neutral-800);
  --text-subtle:var(--neutral-600);
  --border:     color-mix(in srgb, var(--color-neutral-500) 18%, var(--color-white));
  --accent:     var(--accent-500);
  --accent-ink: var(--color-white);

  /* Dark panel (CTA / footer) inverted mapping */
  --dark-bg:    var(--main-975);
  --dark-text:  var(--neutral-25);
  --dark-muted: var(--neutral-100);
  --dark-border:color-mix(in srgb, var(--color-white) 12%, transparent);

  /* --- Typography --- */
  --font-primary: "Delight VF", Arial, sans-serif;
  --fluid: 1.112vw;                 /* --fluid--1440 from source */

  --fs-h0: clamp(3rem,    calc(20 * var(--fluid)), 20rem);
  --fs-h1: clamp(3rem,    calc(10 * var(--fluid)), 10rem);
  --fs-h2: clamp(2.5rem,  calc(6  * var(--fluid)), 6rem);
  --fs-h3: clamp(2.25rem, calc(4  * var(--fluid)), 4rem);
  --fs-h4: clamp(1.75rem, calc(3  * var(--fluid)), 3rem);
  --fs-h5: clamp(1.5rem,  calc(2.5* var(--fluid)), 2.5rem);
  --fs-h6: clamp(1.25rem, calc(1.75*var(--fluid)), 1.75rem);
  --fs-large:   clamp(1.125rem, calc(1.25 * var(--fluid)), 1.25rem);
  --fs-medium:  clamp(1rem,     calc(1.125* var(--fluid)), 1.125rem);
  --fs-regular: clamp(.875rem,  calc(1    * var(--fluid)), 1rem);
  --fs-small:   clamp(.75rem,   calc(.875 * var(--fluid)), .875rem);

  --lh-body: 1.5;  --lh-head: 1.2;
  --ls-body: .07ch; --ls-h1: -.05ch; --ls-h2: -.04ch; --ls-h3: -.03ch; --ls-h4: -.02ch;
  --wt-body: 400;  --wt-head: 500;

  /* --- Spacing scale (fluid clamps, from source) --- */
  --sp-025: clamp(.125rem, calc(.25 * var(--fluid)), .25rem);
  --sp-05:  clamp(.25rem,  calc(.5  * var(--fluid)), .5rem);
  --sp-075: clamp(.5rem,   calc(.75 * var(--fluid)), .75rem);
  --sp-1:   clamp(.75rem,  calc(1   * var(--fluid)), 1rem);
  --sp-15:  clamp(1rem,    calc(1.5 * var(--fluid)), 1.5rem);
  --sp-2:   clamp(1.5rem,  calc(2   * var(--fluid)), 2rem);
  --sp-3:   clamp(2rem,    calc(3   * var(--fluid)), 3rem);
  --sp-4:   clamp(2.5rem,  calc(4   * var(--fluid)), 4rem);
  --sp-6:   clamp(3rem,    calc(6   * var(--fluid)), 6rem);
  --sp-8:   clamp(4rem,    calc(8   * var(--fluid)), 8rem);
  --sp-10:  clamp(5rem,    calc(10  * var(--fluid)), 10rem);
  --sp-12:  clamp(6rem,    calc(12  * var(--fluid)), 12rem);
  --sp-16:  clamp(8rem,    calc(16  * var(--fluid)), 16rem);

  /* --- Layout --- */
  --pad-global: clamp(.75rem, calc(2.5 * var(--fluid)), 2.5rem);
  --container-large:  calc(100rem - var(--pad-global) * 2);
  --container-medium: calc(90rem  - var(--pad-global) * 2);
  --container-small:  calc(70rem  - var(--pad-global) * 2);
  --radius: .5rem;
  --radius-lg: 1rem;
  --radius-pill: 100rem;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* =========================================================================
   Dark theme — activated via html[data-theme="dark"] (footer switch).
   Only remaps the semantic tokens; all components inherit automatically.
   ========================================================================= */
html { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:          var(--main-975);
  --bg-alt:      var(--main-950);
  --surface:     var(--neutral-975);
  --text:        var(--neutral-25);
  --text-muted:  var(--neutral-100);
  --text-subtle: var(--main-100);
  --border:      color-mix(in srgb, var(--color-white) 14%, transparent);
  --accent-ink:  var(--color-white);
}
body { transition: background-color .3s var(--ease), color .3s var(--ease); }

/* Footer dark-mode toggle switch */
.theme-toggle {
  display: inline-flex; align-items: center; gap: .55rem;
  background: transparent; border: 0; cursor: pointer;
  color: inherit; font: inherit; font-size: var(--fs-small);
  padding: .25rem 0; line-height: 1;
}
.theme-toggle-track {
  position: relative; width: 2.5rem; height: 1.35rem; flex: none;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, currentColor 22%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  transition: background .25s var(--ease);
}
.theme-toggle-thumb {
  position: absolute; top: 50%; left: .18rem; transform: translateY(-50%);
  width: .95rem; height: .95rem; border-radius: 50%;
  background: var(--accent); transition: left .25s var(--ease);
}
.theme-toggle[aria-pressed="true"] .theme-toggle-thumb { left: calc(100% - 1.13rem); }
.theme-toggle:hover .theme-toggle-track { background: color-mix(in srgb, currentColor 32%, transparent); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius); }
.theme-toggle-label { opacity: .85; white-space: nowrap; }