/* ============================================================
   SCN2A Australia — Foundational Tokens
   Source: SCN2A Australia Brand Guidelines v1.1 (May 2026)

   v1.1 — Advocacy Coral retired. Replaced by Advocacy Mulberry
   #A47585. All corners are now 0px. The brand commits to clean
   orthogonal geometry.
   ============================================================ */

/* Inter from Google Fonts — the brand's approved digital typeface.
   Import this stylesheet AFTER pulling in Inter, e.g.
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
*/

:root {
  /* ---------- Primary palette ---------- */
  --scn-teal:          #1A7A7A;  /* SCN2A Teal — authority, structure, headers, CTAs */
  --scn-mulberry:      #A47585;  /* Advocacy Mulberry — quiet contrast, action, urgency */
  --scn-coral:         #A47585;  /* alias — legacy var name, points to Mulberry */
  --scn-slate:         #2C3E50;  /* Deep Slate — primary body text & headings on white */

  /* ---------- Supporting palette ---------- */
  --scn-teal-light:     #E8F4F4;  /* Tinted backgrounds, table rows, callouts */
  --scn-mulberry-light: #F2E7EC;  /* Mulberry tint — alert / action backgrounds */
  --scn-coral-light:    #F2E7EC;  /* alias — legacy var name, points to Mulberry tint */
  --scn-slate-mid:      #5D7285;  /* Captions, metadata, secondary text (min 14pt body) */
  --scn-cool-grey:      #F2F5F7;  /* Page backgrounds, dividers, subtle section breaks */
  --scn-white:          #FFFFFF;

  /* ---------- Semantic surfaces ---------- */
  --bg-page:           var(--scn-white);
  --bg-soft:           var(--scn-cool-grey);
  --bg-tint-teal:      var(--scn-teal-light);
  --bg-tint-mulberry:  var(--scn-mulberry-light);
  --bg-tint-coral:     var(--scn-mulberry-light); /* alias */
  --bg-block-teal:     var(--scn-teal);     /* full-bleed anchor block */
  --bg-block-mulberry: var(--scn-mulberry);
  --bg-block-coral:    var(--scn-mulberry); /* alias */

  /* ---------- Semantic text ---------- */
  --fg-1:              var(--scn-slate);     /* primary body & headings on light */
  --fg-2:              var(--scn-slate-mid); /* secondary / captions */
  --fg-accent:         var(--scn-teal);      /* H1, H3, links */
  --fg-action:         var(--scn-mulberry);  /* highlights, urgency */
  --fg-on-dark:        var(--scn-white);     /* text on Teal/Mulberry blocks */

  /* ---------- Borders & rules ---------- */
  --border-soft:          #DDE6EA;
  --border-rule:          6px solid var(--scn-teal);     /* approved brand rule */
  --border-rule-mulberry: 6px solid var(--scn-mulberry); /* approved for CTA / urgent */
  --border-rule-coral:    6px solid var(--scn-mulberry); /* alias */
  --border-hairline:      1px solid var(--border-soft);

  /* ---------- Radius — straight lines only ---------- */
  /* All corners are 0px across the system. Brand commits to clean
     orthogonal geometry. Do not introduce new radii — reach for
     type weight, white-space, or colour instead. */
  --radius-sm:         0;
  --radius-md:         0;
  --radius-lg:         0;
  --radius-pill:       0;

  /* ---------- Spacing scale (8pt 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;

  /* ---------- Elevation — restrained; brand avoids drop shadows on logo,
                  but UI cards may use soft surface shadows.       ---------- */
  --shadow-1:          0 1px 2px rgba(20, 40, 60, 0.06);
  --shadow-2:          0 4px 12px rgba(20, 40, 60, 0.08);
  --shadow-3:          0 12px 32px rgba(20, 40, 60, 0.10);

  /* ---------- Motion ---------- */
  --ease-standard:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasis:     cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast:          120ms;
  --dur-base:          200ms;
  --dur-slow:          320ms;

  /* ---------- Typography stacks ---------- */
  --font-sans:         'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-doc:          Arial, 'Helvetica Neue', Helvetica, sans-serif; /* Word / PDF parity */
  --font-mono:         'Courier New', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- Type — line heights ---------- */
  --lh-tight:          1.15;
  --lh-snug:           1.20;
  --lh-base:           1.30;
  --lh-relaxed:        1.60;

  /* ---------- Type — semantic step sizes (digital spec) ---------- */
  --fs-h1:             44px;   /* range 40–48 */
  --fs-h2:             30px;   /* range 28–32 */
  --fs-h3:             22px;   /* range 22–24 */
  --fs-body:           17px;   /* range 16–18 */
  --fs-caption:        13px;   /* range 13–14 */
  --fs-button:         15px;
  --fs-eyebrow:        12px;   /* uppercase labels */

  /* ---------- Content widths ---------- */
  --measure:           68ch;   /* keep body 60–80 chars */
  --container-max:    1200px;
}

/* ============================================================
   Element defaults — opinionated but minimal
   ============================================================ */

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
  background: var(--bg-page);
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--space-4); text-wrap: balance; }

h1, .h1 {
  font-family: var(--font-sans);
  font-weight: 800;                 /* v1.1 — H1 Display is Inter 800 */
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  color: var(--fg-accent);          /* Teal */
  letter-spacing: -0.01em;
}

h2, .h2 {
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  color: var(--fg-1);               /* Slate */
  letter-spacing: -0.005em;
}

h3, .h3 {
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-base);
  color: var(--fg-accent);          /* Teal */
}

p, .body {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
  max-width: var(--measure);
  margin: 0 0 var(--space-4);
}

.caption, small {
  font-size: var(--fs-caption);
  line-height: 1.4;
  color: var(--fg-2);
}

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-accent);
}

.pullquote {
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.45;
  color: var(--fg-1);
  border-left: 4px solid var(--scn-mulberry);     /* v1.1 — pullquote rule is Mulberry */
  padding: var(--space-2) 0 var(--space-2) var(--space-5);
  max-width: var(--measure);
}

code, kbd, samp, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

a {
  color: var(--fg-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--scn-mulberry); }

hr.rule-teal     { border: 0; height: 6px; background: var(--scn-teal);     margin: var(--space-6) 0; }
hr.rule-mulberry { border: 0; height: 6px; background: var(--scn-mulberry); margin: var(--space-6) 0; }
hr.rule-coral    { border: 0; height: 6px; background: var(--scn-mulberry); margin: var(--space-6) 0; } /* alias */

/* Utility — keep brand-aligned full-bleed blocks reachable */
.block-teal     { background: var(--scn-teal);     color: var(--fg-on-dark); }
.block-mulberry { background: var(--scn-mulberry); color: var(--fg-on-dark); }
.block-coral    { background: var(--scn-mulberry); color: var(--fg-on-dark); } /* alias */
.block-teal     h1, .block-teal     h2, .block-teal     h3,
.block-mulberry h1, .block-mulberry h2, .block-mulberry h3,
.block-coral    h1, .block-coral    h2, .block-coral    h3 { color: var(--fg-on-dark); }