/* ==========================================================================
   Quiamo WP4 · design tokens
   One file controls colour, type and spacing for the whole theme.
   Day = agency pages. Night = Studio. Brand = a concept's own colours.
   Customizer › Quiamo · Design writes overrides for the Day values below.
   ========================================================================== */

@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/instrument-serif-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/instrument-serif-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/inter-latin-wght-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2")}

:root{
  /* Day neutrals */
  --cloud:#F0EEE9;      /* Cloud Dancer, the page */
  --cloud-2:#F8F7F4;    /* raised panels */
  --paper:#FFFFFF;
  --travertine:#E6DDD0;
  --ink:#14110F;
  --ink-2:#3A3531;
  --mute:#6F6760;
  --rule:#DCD7CF;

  /* Accents: teal is the only action colour */
  --teal:#1C7E84;
  --teal-deep:#14595E;
  --coral:#E4674F;      /* the heart, and one highlight per page */
  --gold:#B8914A;       /* credits hairline */

  /* Pastels */
  --blush:#F2D9D5; --sorbet:#F6E2C9; --pistachio:#DCE6D2;
  --sky:#D6E4EC;   --lilac:#E0DAEA;  --butter:#F5ECC8;

  /* Roles (templates use these, never raw hex) */
  --bg:var(--cloud);
  --bg-2:var(--cloud-2);
  --fg:var(--ink);
  --fg-2:var(--ink-2);
  --fg-mute:var(--mute);
  --line:var(--rule);
  --action:var(--teal);
  --action-hover:var(--teal-deep);
  --action-ink:#FFFFFF;
  --accent:var(--coral);

  /* Type */
  --f-display:"Instrument Serif","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --t-mega:clamp(3.4rem,9.2vw,9.6rem);
  --t-display:clamp(2.9rem,6.6vw,6.6rem);
  --t-h2:clamp(2.2rem,4.4vw,4.2rem);
  --t-h3:clamp(1.45rem,2.1vw,1.95rem);
  --t-lede:clamp(1.15rem,1.5vw,1.4rem);
  --t-body:1.0625rem;
  --t-small:.875rem;
  --t-label:.72rem;

  /* Space and shape */
  --gutter:clamp(20px,4.2vw,64px);
  --max:1440px;
  --measure:68ch;
  --sec:clamp(72px,11vw,168px);
  --r-s:6px; --r-m:14px; --r-l:28px; --r-pill:999px;
  --ease:cubic-bezier(.2,.7,.1,1);
  --shadow:0 1px 2px rgba(20,17,15,.05),0 12px 40px -16px rgba(20,17,15,.18);
}

/* Night: Studio pages. A warm darkroom, never pure black. */
[data-mode="night"]{
  --bg:#0E0C0B;          /* Darkroom */
  --bg-2:#1C1917;        /* Graphite */
  --paper:#2A2522;       /* Smoke */
  --fg:#EDE7DD;          /* Bone */
  --fg-2:#CFC6BA;
  --fg-mute:#A39A8E;
  --line:#3A332E;
  --action:#5FB7BC;
  --action-hover:#86CDD1;
  --action-ink:#0E0C0B;
  --accent:#F08A73;
  --travertine:#2A2522;
  color-scheme:dark;
}

/* Brand: any element with data-brand takes on the concept's colours.
   Set --brand, --brand-2 and --brand-ink inline from the Concept fields. */
[data-brand]{
  --bg:var(--brand-2,#F4C9D4);
  --bg-2:color-mix(in srgb,var(--brand-2,#F4C9D4) 70%,#fff);
  --fg:var(--brand-ink,#14110F);
  --fg-2:var(--brand-ink,#14110F);
  --fg-mute:color-mix(in srgb,var(--brand-ink,#14110F) 70%,transparent);
  --line:color-mix(in srgb,var(--brand-ink,#14110F) 18%,transparent);
  --accent:var(--brand,#B8184A);
}
[data-brand="solid"]{
  --bg:var(--brand,#B8184A);
  --fg:var(--brand-on,#FFFFFF);
  --fg-2:var(--brand-on,#FFFFFF);
  --fg-mute:color-mix(in srgb,var(--brand-on,#FFFFFF) 72%,transparent);
  --line:color-mix(in srgb,var(--brand-on,#FFFFFF) 24%,transparent);
  --accent:var(--brand-on,#FFFFFF);
}