/* AIffect design tokens – v3 (19 October 2026)
   Single source of truth for colour, type, and spacing. The website imports this file;
   the brand reference, Google Slides themes, Canva kit, and Office templates copy these values.
   Decisions: _website-v3-decision-register.md (B1–B15, W3a). */

/* Fallback face: Georgia scaled to Source Serif 4's x-height, so text does not jump
   while the web font loads. Metric overrides are approximate (to be checked in the build). */
@font-face {
  font-family: "Source Serif 4 Fallback";
  src: local("Georgia");
  size-adjust: 98.7%;
  ascent-override: 105%;
  descent-override: 34%;
  line-gap-override: 0%;
}

:root {
  color-scheme: light dark;

  /* ---- Shared neutrals (B3) ---- */
  --paper: #F5F5F2;          /* screen ground; documents print on white */
  --white: #FFFFFF;
  --ink: #1B1C20;            /* text, 15.6:1 on paper */
  --ink-2: #3D3F45;          /* secondary text, 9.6:1 */
  --ink-3: #5E6066;          /* tertiary text, captions, 5.8:1 */
  --rule: #D8D8D2;           /* hairlines, table rules */

  /* ---- Overprint, primary palette (B1) ---- */
  --cyan: #009FE3;           /* signature: wordmark "AI", fills, large display only (2.7:1) */
  --cyan-text: #00699A;      /* links and text accents, 5.5:1 */
  --cyan-tint: #E3EEF3;      /* table headers, quiet fills */
  --ochre: #DC9A1E;          /* second ink: fills, charts */
  --ochre-text: #8A5A00;     /* ochre as text, 5.4:1 */
  --green: #00601B;          /* overlap of cyan and ochre, 7.2:1 */

  /* ---- Oxblood, secondary palette for client deliverables (B2) ---- */
  --oxblood: #6A1E23;        /* signature and text accent, 10.6:1 */
  --rose: #D79C98;           /* oxblood tint, overlap device, charts */
  --rose-tint: #F0E4E2;      /* table headers, quiet fills */
  --rose-pale: #DDBDB7;      /* accents on oxblood grounds, 6.6:1 */
  --deep-blue: #006187;      /* overlap of rose and cyan; second text colour, 6.3:1 */

  /* ---- Night ground (W3a) ---- */
  --night: #17181C;
  --night-text: #F2F2EE;     /* 15.8:1 on night */
  --night-cyan: #33B4F0;     /* 7.5:1 on night */

  /* ---- Roles: light edition (default) ---- */
  --bg: var(--paper);
  --surface: var(--white);
  --text: var(--ink);
  --text-2: var(--ink-2);
  --text-3: var(--ink-3);
  --accent: var(--cyan);
  --accent-text: var(--cyan-text);
  --second-text: var(--ochre-text);
  --link: var(--cyan-text);
  --tint: var(--cyan-tint);
  --line: var(--rule);
  --line-strong: var(--ink);
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  --btn-hover: var(--cyan-text);
  --wm-ai: var(--cyan);
  --wm-ff: var(--ink);
  --portrait-bg: var(--ink);
  --label: var(--ink-3);
  --builder: var(--green);
  --backer: var(--ochre-text);
  --builder-fill: #3E9B63;
  --backer-fill: var(--ochre);
  --both-fill: #355E0C;
  --track: #E4E4DF;
  --knob: var(--white);
  --device-a: var(--cyan);
  --device-b: var(--ochre);
  --device-overlap: var(--green);
  --series-1: var(--cyan);   /* fixed chart order (B7) */
  --series-2: var(--ochre);
  --series-3: var(--green);
  --series-4: var(--ink);

  /* ---- Type (B9) ---- */
  --font: "Source Serif 4", "Source Serif 4 Fallback", Georgia, serif;
  --font-display: "Source Serif 4 Display", "Source Serif 4", "Source Serif 4 Fallback", Georgia, serif;
  --font-email: Georgia, "Times New Roman", serif;  /* email only (B14) */
  --weight-body: 400;
  --weight-head: 600;
  --weight-strong: 600;
  /* Fluid scale, ratio about 1.25; minimum at 360 px, maximum at 1280 px viewport */
  --step--1: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);  /* 14–15 px: captions, labels */
  --step-0:  clamp(1.0625rem, 1.03rem + 0.15vw, 1.125rem); /* 17–18 px: body */
  --step-1:  clamp(1.25rem, 1.18rem + 0.3vw, 1.4rem);      /* 20–22 px: lead paragraph */
  --step-2:  clamp(1.5rem, 1.35rem + 0.6vw, 1.85rem);      /* 24–30 px: h3 */
  --step-3:  clamp(1.85rem, 1.55rem + 1.3vw, 2.6rem);      /* 30–42 px: h2 */
  --step-4:  clamp(2.4rem, 1.85rem + 2.4vw, 4rem);         /* 38–64 px: h1, hero */
  --leading-body: 1.55;
  --leading-head: 1.06;
  --tracking-head: -0.015em;
  --measure: 68ch;

  /* ---- Space (4 px base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 7rem;
  --gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);
  --max-width: 76rem;

  /* ---- Form ---- */
  --radius: 0;               /* square corners throughout */
  --border: 1px solid var(--line);
  --focus: 3px solid var(--accent-text);
}

/* Night edition (W3a): follows the device setting unless the visitor has chosen an edition.
   Screen only: print always uses the light edition. */
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--night);
    --surface: #202126;
    --text: var(--night-text);
    --text-2: #C6C7C2;
    --text-3: #9A9CA1;
    --accent: var(--night-cyan);
    --accent-text: var(--night-cyan);
    --second-text: var(--ochre);
    --link: var(--night-cyan);
    --tint: #1D2A31;
    --line: #34363C;
    --line-strong: var(--night-text);
    --btn-bg: var(--night-text);
    --btn-fg: var(--night);
    --btn-hover: var(--night-cyan);
    --wm-ai: var(--night-cyan);
    --wm-ff: var(--night-text);
    --portrait-bg: #0E0F12;
    --label: #9A9CA1;
    --builder: #5CC98B;
    --backer: var(--ochre);
    --builder-fill: #3E9B63;
    --backer-fill: var(--ochre);
    --both-fill: #355E0C;
    --track: #2A2B31;
    --knob: #F2F2EE;
  }
}
@media screen {
  :root[data-theme="night"] {
    --bg: var(--night);
    --surface: #202126;
    --text: var(--night-text);
    --text-2: #C6C7C2;
    --text-3: #9A9CA1;
    --accent: var(--night-cyan);
    --accent-text: var(--night-cyan);
    --second-text: var(--ochre);
    --link: var(--night-cyan);
    --tint: #1D2A31;
    --line: #34363C;
    --line-strong: var(--night-text);
    --btn-bg: var(--night-text);
    --btn-fg: var(--night);
    --btn-hover: var(--night-cyan);
    --wm-ai: var(--night-cyan);
    --wm-ff: var(--night-text);
    --portrait-bg: #0E0F12;
    --label: #9A9CA1;
    --builder: #5CC98B;
    --backer: var(--ochre);
    --builder-fill: #3E9B63;
    --backer-fill: var(--ochre);
    --both-fill: #355E0C;
    --track: #2A2B31;
    --knob: #F2F2EE;
  }
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="night"] { color-scheme: dark; }

/* Oxblood theme: client deliverables and their previews on the website (W4).
   Deliverables are paper objects: they keep light values in both editions. */
.theme-oxblood {
  --bg: var(--white);
  --text: var(--ink);
  --text-2: var(--ink-2);
  --text-3: var(--ink-3);
  --line: var(--rule);
  --line-strong: var(--ink);
  --accent: var(--oxblood);
  --accent-text: var(--oxblood);
  --link: var(--oxblood);    /* always underlined */
  --tint: var(--rose-tint);
  --wm-ai: var(--oxblood);
  --wm-ff: var(--ink);
  --device-a: var(--rose);
  --device-b: var(--cyan);
  --device-overlap: var(--deep-blue);
  --series-1: var(--oxblood); /* never next to ink as a data colour (B7) */
  --series-2: var(--cyan);
  --series-3: var(--rose);
  --series-4: var(--deep-blue);
  color-scheme: light;
}