/* Mel-lif-lu-ous design tokens — the canonical file.
   Mirrored byte-identically into Website/mel-theme/, and rendered live at
   /design-guidelines/, which reads its values from this file at render time. */

@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,300;0,400;1,300&family=Inter:wght@300;400;500;600;700&display=swap");

:root {
  /* ⚠️ Neutral dropped #F5F5F5 → #EDEDED on August 31, 2026. White sat 1.04:1
     on it, which is not a step, and a "raised" panel that measures 1.04:1
     against the thing it is raised off is decoration rather than hierarchy.
     1.13:1 now. The whole site's default page background is a shade greyer;
     that is the intended, visible consequence. */
  --qp-canvas: #ededed;
  --qp-canvas-soft: #fafafa;
  --qp-surface-card: #ffffff;
  --qp-surface-strong: #f0efed;
  --qp-surface-dark: #0c0a09;

  /* Homepage section progression, darkest to lightest.
     ⚠️ --qp-home-trees added when the Talking to the Trees story card joined
     Japan and Iceland, sitting between them and Making in page order. */
  --qp-home-intro: #181615;
  --qp-home-residencies: #242221;
  --qp-home-japan: #282625;
  --qp-home-iceland: #2c2a29;
  --qp-home-trees: #2e2c2b;
  --qp-home-making: #302e2d;
  --qp-home-listening: #3c3a39;
  --qp-home-journal: #484645;
  --qp-home-follow: #545251;
  --qp-home-footer: #605e5d;
  --space-section: clamp(4rem, 2.5rem + 5vw, 7rem);
  --space-section-compact: clamp(3rem, 2rem + 3.333vw, 5rem);
  --space-section-content: clamp(2rem, 1.5rem + 1.667vw, 3rem);

  --qp-ink: #313131;
  --qp-ink-deep: #292524;
  --qp-body: #4e4e4e;
  --qp-muted: #777169;
  --qp-muted-soft: #a8a29e;
  /* Strokes come out of the greyscale rather than being their own one-offs:
     Grey 5 is the default edge, Grey 4 the emphasised one. That is what the
     ramp is for, and it means a border can never drift from the scale.
     ⚠️ Both were warm greys (#E7E5E4 / #D6D3D1) until August 16, 2026. The
     greyscale is pure neutral, so every edge on the site is now a touch
     cooler and a touch lighter. Deliberate, and worth a look on screen. */
  --qp-hairline: var(--qp-grey-5);
  --qp-hairline-strong: var(--qp-grey-4);

  /* PRIMARY — the five supplied greens, September 1, 2026. Numbered dark to
     light, matching the greyscale below so the two ramps on this site are read
     the same way round. (They were supplied light-to-dark; the numbering is
     flipped, not the values.)

     ⚠️ Replaces the computed #2C7464 ramp that stood here for one day. Those
     were tints I derived toward canvas-soft; these are real supplied values,
     and they are cooler and greyer through the middle than a tint ramp is.

     Primary carries text, headings, rules and accents. It does NOT carry
     buttons and links any more — see CTA below. */
  --qp-primary-1: #38524b;
  --qp-primary-2: #50756b;
  --qp-primary-3: #859e97;
  --qp-primary-4: #b9c8c4;
  --qp-primary-5: #eef1f0;

  /* CTA — the one colour that means "this is the action". Deliberately not a
     step on the Primary ramp: a call to action that is merely a darker shade
     of the body text is not a call to anything.

     ⚠️ #C6EFE3 is a FILL, not a text colour. It is 1.06:1 on white — nothing
     legible sits on it, and nothing legible is set in it. Text on a CTA fill
     is --qp-cta-dark (5.1:1 on the fill); a CTA link on the page is also
     --qp-cta-dark (6.3:1 on white). Dark and light are derived at the same
     hue as the supplied base. */
  --qp-cta: #c6efe3;
  --qp-cta-dark: #1e6b57;
  --qp-cta-light: #e8f8f2;

  /* Back-compat: site.css refers to --qp-brand throughout. It now points at
     Primary 1 so those uses stay meaningful; the button and link rules were
     repointed at CTA in the same change. */
  --qp-brand: var(--qp-primary-1);
  --qp-brand-light: var(--qp-primary-3);
  --qp-brand-dark: #2a3f3a;

  /* ADDITIONAL COLOURS — accents for illustration and editorial work, not
     part of the everyday interface. A layout should feel finished without
     them. Added August 16, 2026.

     ⚠️ None of the three carries enough contrast on Neutral to set text in.
     They are fills and marks. If one ever needs to carry a word, it needs a
     darker sibling rather than a smaller font size. */
  --qp-mint: #b4e5c3;   /* pale green, sits beside the forest without competing */
  --qp-cyan: #00c8e6;   /* the one cold colour in an otherwise warm palette     */
  --qp-sand: #deb887;   /* warm tan, the neutral counterweight to the cyan      */

  /* SEMANTIC — August 27, 2026: Success dropped for Error + Info, following
     the naming framework at
     stg-larakroekermusic-staging.kinsta.cloud/why-i-built-five-design-guidelines-at-once/.
     Forest (--qp-brand) is green, same collision that post describes for its
     own brand colour: a green that sometimes means "this worked" and
     sometimes means "the brand" costs comprehension in both directions.
     --qp-success was referenced nowhere but the guidelines page itself, so
     nothing on the live site depended on it. Success now gets communicated
     some other way (copy, an icon), not by colour. --qp-info is a first
     pass — worth checking on screen, same as every other tonal call here. */
  --qp-error: #dc2626;
  --qp-info: #2563eb;

  /* GREYSCALE — five even steps, numbered dark to light, matching the
     direction lki-child uses so the two systems read the same way.

     Added August 16, 2026. The names --qp-grey-1/2/3 previously existed as
     back-compat aliases pointing at muted / muted-soft / hairline; nothing in
     site.css or any template referenced them, so they were retired rather than
     left to collide with a real scale.

     ⚠️ These are pure neutrals (R=G=B), unlike the rest of the palette, which
     is warmed toward the brand. Placed next to Muted (#777169) a pure grey
     reads cool. That is a deliberate choice to check on screen, not an
     oversight in the values. */
  /* ⚠️ Re-evened August 31, 2026 to 15-point steps. Grey 5 was #EDEDED,
     which is now exactly --qp-canvas — every hairline border and every Grey 5
     fill would have been invisible inside a .sec--neutral block. Grey 1 is
     unchanged; 2 through 5 all moved. Edges across the site are a touch
     darker as a result, which is the trade for them existing at all. */
  --qp-grey-1: #a7a7a7;
  --qp-grey-2: #b6b6b6;
  --qp-grey-3: #c5c5c5;
  --qp-grey-4: #d4d4d4;
  --qp-grey-5: #e3e3e3;

  --qp-mist: var(--qp-canvas);
  --qp-white: var(--qp-surface-card);
  --qp-white-solid: #ffffff;
  --qp-forest: var(--qp-brand);
  --qp-forest-lt: var(--qp-brand-light);
  --qp-forest-dk: var(--qp-brand-dark);
  --qp-icon-surface: #1a1a18;

  --qp-toc-bg: rgba(237, 237, 237, 0.92);
  --qp-toc-bg-dark: rgba(13, 20, 16, 0.88);
  --qp-dark-toggle-bg: #1e2e22;
  --qp-border-on-dark: rgba(255, 255, 255, 0.18);

  /* Hero scrim — the three-stop wash that keeps a headline legible over a
     photograph. Based on --qp-ink because that is what .hero sits on, so the
     scrim and the bare hero are the same dark. Was written inline in site.css
     as a literal triple; named August 16, 2026 so a change to the ink moves
     the scrim with it and interior heroes can reuse the same wash. */
  --scrim-hero-strong: rgba(49, 49, 49, 0.96);  /* bottom, under the text   */
  --scrim-hero-mid:    rgba(49, 49, 49, 0.60);  /* midpoint                 */
  --scrim-hero-soft:   rgba(49, 49, 49, 0.25);  /* top, image reads through */

  /* ON-DARK ROLES — a dark section cannot use --qp-hairline or a solid
     surface: a solid pale line reads as drawn rather than as an edge. These
     are the translucent inverse set.

     Extended August 16, 2026. The theme carried ten unnamed opacities of the
     neutral, .07 through .97, which is how one edge ended up three strengths
     on three sections. Three text weights and three border weights is the
     whole set now. */
  --qp-on-dark-soft: rgba(245, 245, 245, 0.72);   /* body text on dark        */
  --qp-on-dark-muted: rgba(245, 245, 245, 0.6);   /* secondary text on dark   */
  --qp-on-dark-subtle: rgba(245, 245, 245, 0.4);  /* captions, fine print     */

  --qp-border-on-dark-soft: rgba(245, 245, 245, 0.08);   /* faint rule        */
  --qp-border-on-dark-strong: rgba(245, 245, 245, 0.28); /* outlined pill     */

  --qp-bg-raised-on-dark-soft: rgba(255, 255, 255, 0.06);
  --qp-bg-raised-on-dark: rgba(255, 255, 255, 0.10);
  --qp-bg-raised-on-dark-hover: rgba(255, 255, 255, 0.18);

  /* Scrims — a translucent surface laid over content, for the sticky nav and
     the mobile drawer. Plus the hover wash on a light surface. */
  --qp-bg-scrim: rgba(237, 237, 237, 0.93);
  --qp-bg-scrim-solid: rgba(237, 237, 237, 0.97);
  --qp-bg-hover-tint: rgba(49, 49, 49, 0.04);

  /* Follows --qp-brand, which is now Primary 1. The two rgba() values have to
     be written out because rgba() cannot take a hex custom property. */
  --qp-annotate-fg: var(--qp-brand);
  --qp-annotate-bg: rgba(56, 82, 75, 0.1);
  --qp-annotate-border: rgba(56, 82, 75, 0.28);

  --qp-focus-ring: rgba(49, 49, 49, 0.18);
  --qp-focus-ring-soft: rgba(49, 49, 49, 0.14);

  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* TYPE SCALE — ten steps. Headings fluid, UI text fixed.

     ⚠️ Rewritten August 16, 2026. Two scales existed: this named one and a
     parallel --type-ui-* ladder of thirteen t-shirt sizes, and the theme used
     both about equally. Between them the small end ran 10, 11, 12, 13, 14, 15,
     16, 17 and 18 consecutively, which is not a scale. The ui ladder is
     retired; every step below is semantic.

     ⚠️ Fluid steps carry a rem term, never bare vw. `clamp(2rem, 3.4vw, 2.5rem)`
     ignores the browser font-size setting entirely, so a reader at 200% text
     sees no change: a WCAG 1.4.4 failure. All seven of the theme's clamps were
     bare vw. Interpolation runs 480px to 1440px viewport.

     UI text stays fixed. Body copy that grows with the window is harder to
     read, not easier, and rem already lets the reader control it.

     ⚠️ Renamed Sept 23, 2026 — dropped the `-size` suffix from every role
     (--type-display-size → --type-display, etc.) so the token name is
     just the role, matching LKI, CanAsia, DigiBC and Forge & Spark.
     Values unchanged; every real usage across the theme updated to the
     new name, no alias kept. */
  --type-display: clamp(2.75rem, 1.625rem + 3.75vw,  5rem);   /* 44 → 80 hero        */
  --type-h1:      clamp(2.6rem,  1.5rem   + 3.667vw, 4.8rem); /* 42 → 77 page titles */
  --type-h2:      clamp(2rem,    1.75rem  + 0.833vw, 2.5rem); /* 32 → 40 sections    */
  --type-h3:      1.5rem;    /* 24 prose h2, lead                       */
  --type-h4:      1.25rem;   /* 20 prose h3, component titles           */
  --type-body-lg: 1.125rem;  /* 18 intro paragraphs, hero lead          */
  --type-body:    1rem;      /* 16 body copy                            */
  --type-small:   0.875rem;  /* 14 captions, buttons, labels (was 12)   */
  --type-micro:   0.75rem;   /* 12 uppercase micro labels (was 11)      */
  --type-lead:    1.5rem;    /* 24 big lead paragraphs                  */
  --type-italic:  2.25rem;   /* 36 the one editorial italic             */

  --type-display-lh: 1.05;  --type-display-ls: -0.03em;
  --type-h1-lh:      1.06;
  --type-h2-lh:      1.15;
  --type-h3-lh:      1.3;
  --type-h4-lh:      1.4;
  --type-body-lg-lh: 1.6;
  --type-body-lh:    1.65;
  --type-small-lh:   1.55;
  --type-micro-lh:   1.45;
  --type-lead-lh:    1.5;

  --ls-tight-lg: -0.04em;
  --ls-tight-md: -0.03em;
  --ls-tight-sm: -0.025em;
  --ls-tight-xs: -0.02em;
  --ls-wide-xs: 0.02em;
  --ls-wide-sm: 0.08em;
  --ls-wide-md: 0.1em;
  --ls-wide-lg: 0.12em;
  --ls-wide-xl: 0.14em;
  --ls-code-xs: 0.2px;
  --ls-code-sm: 0.3px;
  --ls-code-md: 0.5px;
  --ls-code-lg: 0.6px;
  --ls-code-xl: 0.8px;
  --ls-code-2xl: 1.2px;

  --sp-1: 4px;
  --sp-0_5: 2px;
  --sp-0_25: 1px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 40px;
  --sp-8: 48px;
  --sp-9: 64px;
  --sp-10: 80px;
  --sp-11: 96px;
  --sp-12: 128px;
  --sp-13: 160px;
  --sp-14: 200px;
  --sp-15: 220px;
  --sp-16: 240px;
  --sp-1_5: 6px;
  --sp-2_5: 10px;
  --sp-3_5: 14px;
  --sp-4_5: 18px;
  --sp-5_5: 22px;
  --sp-6_5: 28px;
  --sp-7_5: 56px;
  --sp-8_5: 72px;
  --sp-9_5: 88px;
  --sp-neg-2_5: -10px;

  --sz-wrap-max: 1280px;
  --sz-content-max: 640px;
  --sz-icon: 40px;
  --sz-icon-lg: 56px;
  --sz-swatch-chip-h: 140px;
  --sz-spec-col: 200px;
  --sz-hero-h: 240px;
  --sz-family-min: 160px;
  --sz-card-min: 180px;
  --sz-card-shell-min: 176px;
  --sz-elev-card-min: 220px;
  --sz-elev-shell-min: 120px;
  --sz-radii-box: 96px;
  --sz-pill-demo-w: 180px;
  --sz-circle-demo: 84px;
  --sz-pattern-demo-min: 340px;
  --sz-spacebar-h: 56px;
  --sz-space-bar-h: var(--sz-spacebar-h);
  --sz-toggle-w: 38px;
  --sz-toggle-h: 22px;
  --sz-toggle-knob: 16px;
  --sz-toggle-knob-left: 19px;
  --sz-slider-thumb: 18px;
  --sz-nav-btn-h: 34px;
  --sz-form-btn-h: 40px;
  --sz-textarea-min: 100px;
  --sz-slider-track-h: 6px;

  --radius-none: 0;
  --radius-2xs: 3px;
  --radius-xs: 4px;
  --radius-s: 6px;
  --radius-sm: 8px;
  --radius-m: 10px;
  --radius-md: 12px;
  --radius-card: 14px;
  --radius-lg: 16px;
  --radius-feature: 20px;
  --radius-shell: 22px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  --shadow-lift: rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0.15) 0 15px 35px -5px;
  --shadow-deep: rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0.25) 0 15px 35px -5px;
  --shadow-xs: 0 1px 2px rgba(23, 23, 23, 0.08);
  /* Bottom edge only, not a ring. A pale swatch needs separating from the
     white card beneath it; ringing all four sides stacks with the card's own
     1px border and reads as a 2px stroke. */
  --shadow-inset-hairline: inset 0 -1px 0 rgba(12, 10, 9, 0.08);
  --shadow-sm: 0 1px 3px rgba(12, 10, 9, 0.15);
  --shadow-float: 0 8px 24px rgba(23, 23, 23, 0.12), 0 1px 2px rgba(23, 23, 23, 0.08);

  --gradient-shell: linear-gradient(135deg, rgba(41, 37, 36, 0.3) 0%, rgba(12, 10, 9, 0.12) 50%, rgba(41, 37, 36, 0.2) 100%);

  --ease-std: ease;
  --dur-fast: 140ms;
  --dur-std: 220ms;
  --dur-slow: 400ms;
}

body.dark {
  --qp-canvas: #0f0e0e;
  --qp-surface-card: #1a1817;
  --qp-ink: #f5f4f2;
  --qp-muted: #a8a29e;
  --qp-muted-soft: #57534e;
  --qp-hairline: rgba(255, 255, 255, 0.1);
  --qp-mist: var(--qp-canvas);
  --qp-white: var(--qp-surface-card);
  --qp-grey-1: var(--qp-muted);
  --qp-grey-2: var(--qp-muted-soft);
  --qp-grey-3: var(--qp-hairline);
}