/*
  waffle — shared design tokens for Aisu.Studio projects.
  Source of truth extracted from FullerHome and the AisuKurimu site,
  where this palette already matched independently.
*/

@font-face {
  font-family: "Public Sans";
  src: url("../fonts/PublicSans/PublicSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("../fonts/PublicSans/PublicSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("../fonts/PublicSans/PublicSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("../fonts/PublicSans/PublicSans-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "iA Writer Mono S";
  src: url("../fonts/iA-Writer-Mono/ia-writer-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "iA Writer Mono S";
  src: url("../fonts/iA-Writer-Mono/ia-writer-mono-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "iA Writer Mono S";
  src: url("../fonts/iA-Writer-Mono/ia-writer-mono-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Color tokens */
  --color-blueberry: #1f1934;   /* ink */
  --color-grape:     #5100ff;   /* accent, links */
  --color-lemon:     #d8ff01;   /* highlight */
  --color-hazelnut:  #9e9c95;   /* muted secondary text */
  --color-cappuccino:#d9d7ce;   /* card / container background */
  --color-vanilla:   #eae8e0;   /* page background */

  /* Semantic aliases — light (default) */
  --color-bg:       var(--color-vanilla);
  --color-surface:  var(--color-cappuccino);
  --color-surface-2:#f2f1eb;    /* a step lighter than surface, for surface-on-surface nesting */
  --color-text:     var(--color-blueberry);
  /* WCAG: hazelnut (#9e9c95) on vanilla is only 2.6:1 — darkened to ≥4.5:1.
     Fix carried over from FullerHome's production globals.css. */
  --color-muted:    #66655f;
  --color-accent:   var(--color-grape);
  --color-highlight:var(--color-lemon);
  /* Text/icon color for on top of --color-highlight (lemon) surfaces —
     active tabs, selected badges, total rows. 14.6:1 contrast on lemon.
     Do NOT use this on --color-accent (grape): only 2.24:1 there, fails
     WCAG AA. Grape surfaces pair with --color-vanilla text instead (6.13:1),
     same as the primary-button pattern below. Naming/pairing observed in
     FullerHome and spiritsprint, where their "accent" token = waffle's
     --color-highlight, not --color-accent. */
  --color-on-accent:var(--color-blueberry);
  --color-border:   rgba(31,25,52,.14);

  /* Spacing scale */
  --sp-xs:  0.25rem;
  --sp-sm:  0.5rem;
  --sp-md:  1rem;
  --sp-lg:  1.5rem;
  --sp-xl:  2rem;
  --sp-2xl: 3rem;
  --sp-3xl: 4rem;
  --sp-4xl: 6rem;

  /* Radius scale — xs: tags/badges/progress · sm: buttons/inputs/modals ·
     md: cards/rails/export cards · lg: glass cards/hero panels · full: pills */
  --radius-xs:   3px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-full: 999px;

  /* Shadow scale — neutral, no horizontal shift by default (drop straight down) */
  --shadow-sm: 0 2px 6px rgba(20,16,31,.10);
  --shadow-md: 0 8px 20px rgba(20,16,31,.14);
  --shadow-lg: 0 16px 36px rgba(20,16,31,.18);

  /* Motion — durations + standard easing curves */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-out:      cubic-bezier(0, 0, .2, 1);
  --ease-in:       cubic-bezier(.4, 0, 1, 1);

  /* Layout */
  --container-max: 1200px;
  --gutter: 24px;

  /* Breakpoints — reference values only. CSS custom properties can't be
     read inside an @media condition, so these aren't functional tokens —
     copy the raw rem value into your own media query and keep it in sync
     with this list by hand. */
  --bp-sm: 30rem;  /* 480px  */
  --bp-md: 48rem;  /* 768px  */
  --bp-lg: 64rem;  /* 1024px */
  --bp-xl: 80rem;  /* 1280px */

  /* Type — role hierarchy: Public Sans is the PRIMARY face (headings, body,
     buttons, tabs, nav — anything sentence-like or interactive). iA Writer
     Mono is SECONDARY: small data/label accents only (eyebrows, tags,
     indices, KPI/spec values, micro brand marks, code). When in doubt: sans. */
  --font-sans: "Public Sans", system-ui, sans-serif;
  --font-mono: "iA Writer Mono S", ui-monospace, "SF Mono", Menlo, monospace;
  --font-primary:   var(--font-sans);
  --font-secondary: var(--font-mono);
}

/* Dark mode — reuses the exact values already proven in production by
   AisuStudio/spiritsprint (.rail/.board/.quad/.trinity-col, shipped and
   live), not a new invention. Raw --color-* swatches above stay fixed;
   only the semantic layer repoints. */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:        #14101f;
    --color-surface:   #221c33;
    --color-surface-2: #1b1628;
    --color-text:      #f1efe8;
    --color-muted:     #b3aec4;
    --color-accent:    #b298ff;   /* lighter violet — grape 1:1 is too dark on a dark bg */
    --color-highlight: var(--color-lemon);
    --color-on-accent: var(--color-blueberry);
    --color-border:    rgba(241,239,232,.14);
    /* a black shadow barely reads on a dark surface — raise the opacity so
       elevation still shows; the offsets/blur stay the same as light mode */
    --shadow-sm: 0 2px 6px rgba(0,0,0,.35);
    --shadow-md: 0 8px 20px rgba(0,0,0,.45);
    --shadow-lg: 0 16px 36px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"] {
  --color-bg:        #14101f;
  --color-surface:   #221c33;
  --color-surface-2: #1b1628;
  --color-text:      #f1efe8;
  --color-muted:     #b3aec4;
  --color-accent:    #b298ff;
  --color-highlight: var(--color-lemon);
  --color-on-accent: var(--color-blueberry);
  --color-border:    rgba(241,239,232,.14);
  --shadow-sm: 0 2px 6px rgba(0,0,0,.35);
  --shadow-md: 0 8px 20px rgba(0,0,0,.45);
  --shadow-lg: 0 16px 36px rgba(0,0,0,.55);
}
:root[data-theme="light"] {
  --color-bg:        var(--color-vanilla);
  --color-surface:   var(--color-cappuccino);
  --color-surface-2: #f2f1eb;
  --color-text:      var(--color-blueberry);
  --color-muted:     #66655f;
  --color-accent:    var(--color-grape);
  --color-highlight: var(--color-lemon);
  --color-on-accent: var(--color-blueberry);
  --color-border:    rgba(31,25,52,.14);
  --shadow-sm: 0 2px 6px rgba(20,16,31,.10);
  --shadow-md: 0 8px 20px rgba(20,16,31,.14);
  --shadow-lg: 0 16px 36px rgba(20,16,31,.18);
}