/*
  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 */

  /* Flavor ramps — the TERTIARY tier: functional color, five flavors ×
     five "juicyness" levels. Level 5 = full juice (most saturated / darkest),
     level 1 = most diluted.
     The six swatches above are primary (blueberry/grape/lemon — brand and
     interaction) and secondary (hazelnut/cappuccino/vanilla — surfaces). These
     are neither: they carry no brand and claim no interaction state, they only
     encode meaning in content — sequential scales, heatmaps, intensity and
     priority coding, categorical series. So never reach for a flavor to style
     chrome (a button, a link, a border); that's what the tiers above are for.
     For a categorical series, take one level across flavors (4 or 5 reads
     strongest); for a sequential scale, walk one flavor 1 → 5.
     Like the core swatches, these are raw values and do NOT repoint in dark
     mode — only the semantic aliases below do. */
  --color-pistachio-1: #c4ddb6;
  --color-pistachio-2: #a6cd93;
  --color-pistachio-3: #92c982;
  --color-pistachio-4: #57a03a;
  --color-pistachio-5: #3e7c1f;

  --color-mango-1:     #f0d9a3;
  --color-mango-2:     #efcc81;
  --color-mango-3:     #f2b63c;
  --color-mango-4:     #f0921a;
  --color-mango-5:     #ec6608;

  --color-strawberry-1:#f0aaa0;
  --color-strawberry-2:#e9887b;
  --color-strawberry-3:#e9634f;
  --color-strawberry-4:#ee3d28;
  --color-strawberry-5:#d80b0b;

  --color-raspberry-1: #f5b3d6;
  --color-raspberry-2: #f192c7;
  --color-raspberry-3: #ee72b6;
  --color-raspberry-4: #ea4e9f;
  --color-raspberry-5: #e6187c;

  --color-chocolate-1: #c2b3a5;
  --color-chocolate-2: #9f8c7c;
  --color-chocolate-3: #7a6250;
  --color-chocolate-4: #4b3225;
  --color-chocolate-5: #2b1611;

  /* Bare flavor name = full juice, for the common "just give me the color" case */
  --color-pistachio:  var(--color-pistachio-5);
  --color-mango:      var(--color-mango-5);
  --color-strawberry: var(--color-strawberry-5);
  --color-raspberry:  var(--color-raspberry-5);
  --color-chocolate:  var(--color-chocolate-5);

  /* Text on a flavor fill — measured against --color-blueberry (ink) and
     --color-vanilla, same method as the hazelnut fix below. WCAG AA body
     text needs 4.5:1; large text (≥24px, or ≥18.7px bold) needs 3:1.
       ink on:      pistachio 1–4 · mango 1–5 · strawberry 1–3 · raspberry 1–4 · chocolate 1–2
       vanilla on:  chocolate 3–5
     Four levels clear 3:1 but miss 4.5:1 — pistachio 5 (vanilla, 4.17),
     strawberry 4 (ink, 4.28), strawberry 5 (vanilla, 4.31), raspberry 5
     (ink, 3.84). Large text or non-text fills only; for body copy step one
     level down, or put the label outside the fill. */

  /* Semantic aliases */
  --color-bg:       var(--color-vanilla);
  --color-surface:  var(--color-cappuccino);
  --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);

  /* 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;

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

  /* Type */
  --font-sans: "Public Sans", system-ui, sans-serif;
  --font-mono: "iA Writer Mono S", ui-monospace, "SF Mono", Menlo, monospace;
}