/*
  Colin Scotland brand tokens, v2.0 (11 Nov 2026)

  Two layers.
  1. FAMILY CORE. Identical in colin-scotland-brand and amplify-intelligence-brand.
     If a value here changes, change it in both files on the same day.
  2. BRAND LAYER. Colin Scotland only. Light led, serif for ideas.

  Offline fonts: link fonts.css before this file (Piazzolla, Outfit and Inter are bundled in fonts/).
  Web fonts:
  https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Outfit:wght@300..700&family=Piazzolla:ital,opsz,wght@0,8..30,400..600;1,8..30,400..600&display=swap
*/

/* ---------- 1. FAMILY CORE ---------- */
:root {
  /* color */
  --ink: #0d0d0d;
  --white: #ffffff;
  --valencia: #d14b28;         /* marks, rules, and type at 24px and up */
  --valencia-fill: #c44420;    /* fills that carry white text, 5.01 to 1 */
  --valencia-bright: #e8603c;  /* small text on ink, 5.71 to 1 */

  /* type families shared by both brands */
  --font-sans: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* type scale, eight steps. Steps 4 to 8 are fluid from a 390px to a 1440px viewport. */
  --step-1: 0.8125rem;                                    /* 13 */
  --step-2: 0.9375rem;                                    /* 15 */
  --step-3: 1.0625rem;                                    /* 17 */
  --step-4: clamp(1.1875rem, 1.141rem + 0.19vw, 1.3125rem);  /* 19 to 21 */
  --step-5: clamp(1.5rem, 1.407rem + 0.381vw, 1.75rem);      /* 24 to 28 */
  --step-6: clamp(1.875rem, 1.643rem + 0.952vw, 2.5rem);     /* 30 to 40 */
  --step-7: clamp(2.25rem, 1.693rem + 2.286vw, 3.75rem);     /* 36 to 60 */
  --step-8: clamp(2.75rem, 1.543rem + 4.952vw, 6rem);        /* 44 to 96 */

  /* space, 4px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 160px;

  /* layout */
  --page-max: 1320px;
  --page-margin: clamp(20px, 4vw, 40px);
  --grid-columns: 12;
  --grid-gap: 24px;
  --measure: 40rem;      /* 640px. Reading text at step 4 sets about 67 characters a line. */
  --measure-ui: 35rem;   /* 560px. Inter at step 3 sets about 66 characters a line. */
  --hairline: 1px;

  /* motion */
  --dur-1: 120ms;   /* hover, press */
  --dur-2: 240ms;   /* reveal, menu */
  --dur-3: 480ms;   /* one entrance per page */
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

/* ---------- 2. BRAND LAYER, COLIN SCOTLAND ---------- */
:root {
  --font-serif: 'Piazzolla', Georgia, 'Times New Roman', serif;

  --bg: #ffffff;
  --bg-wash: #f5f5f5;        /* plain panels, code, table stripes */
  --text: #0d0d0d;           /* 19.44 to 1 on white */
  --text-2: #4d4d4d;         /* 8.45 to 1 on white */
  --text-3: #6b6b6b;         /* 5.33 to 1 on white, 4.89 on the wash */
  --rule: #dcdcdc;           /* dividers only, never the edge of a control */
  --rule-strong: #0d0d0d;    /* section rules, form field borders */

  --action: var(--valencia-fill);
  --on-action: #ffffff;
  --radius: 2px;
  --focus: #0d0d0d;
}

/* The rare dark section. Add the class to the section, tokens flip inside it. */
.on-ink {
  --bg: #0d0d0d;
  --bg-wash: #151515;
  --text: #f2f2f2;           /* 17.36 to 1 */
  --text-2: #a8a8a8;         /* 8.17 to 1 */
  --text-3: #8a8a8a;         /* 5.63 to 1 */
  --rule: #2b2b2b;
  --rule-strong: #f2f2f2;
  --focus: #f2f2f2;
  background: var(--bg);
  color: var(--text);
}

/* ---------- 3. BASE RULES EVERY PAGE CARRIES ---------- */
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-serif);
  font-size: var(--step-4);
  line-height: 1.58;
}
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius);
}

::selection { background: var(--ink); color: var(--white); }
.on-ink ::selection { background: var(--white); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}