/* CAAT Pension — Colors & Type
 * Canonical tokens for the CAAT Pension design system.
 * Source: tokens extracted from caatpension.ca (2026-04-18) + logomark values.
 * See README.md for full context.
 */

/* ---------- Fonts ---------- */
/* Self-hosted Libre Franklin — brand-supplied woff2 files. */
@font-face {
  font-family: "Libre Franklin";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/LibreFranklin-Roman-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Libre Franklin";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/LibreFranklin-Roman-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Libre Franklin";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/LibreFranklin-Italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Libre Franklin";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/LibreFranklin-Italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ================================================================
   * COLOR — BASE TOKENS
   * ================================================================ */

  /* Brand — Logo marks (from caat-logo-en.svg)
   * These two colors ARE the CAAT identity. They only appear in the logo.
   * Do not use for UI unless intentionally referencing the brandmark. */
  --caat-logo-blue:  #005c84;   /* Logo "C/CAAT" wordmark, left petals */
  --caat-logo-green: #55a51c;   /* Logo right petals, leaf motif */

  /* Brand — Primary scale (web UI)
   * The working palette used across caatpension.ca. #0046a5 is the CTA blue. */
  --caat-primary:         #0046a5; /* canonical CAAT web blue; primary CTA */
  --caat-primary-hover:   #0070d7; /* hover on primary */
  --caat-primary-active:  #5f9eff; /* active/pressed */
  --caat-primary-tint:    #bfd8ff; /* decorative pale fills */

  /* Accent — Greens (sparing, estimator-only historically) */
  --caat-accent-green:        #3ec73b;
  --caat-accent-green-light:  #79fb6c;
  --caat-accent-teal:         #108478;

  /* Neutrals */
  --caat-neutral-0:    #ffffff;
  --caat-neutral-50:   #f8f8f8; /* surface */
  --caat-neutral-100:  #f3f3f3; /* section fill */
  --caat-neutral-200:  #f1f1f2; /* form subheading, graph panel */
  --caat-neutral-300:  #e7e7e7; /* dividers, borders */
  --caat-neutral-500:  #767676; /* muted / disabled */
  --caat-neutral-700:  #616161; /* body secondary */
  --caat-neutral-900:  #000000; /* headings */

  /* Semantic (Bootstrap defaults — clearly marked as "redesign candidate") */
  --caat-success: #198754;
  --caat-danger:  #dc3545;
  --caat-warning: #ffc107;
  --caat-info:    #0dcaf0;

  /* Accessibility — universal focus ring on caatpension.ca.
   * Applied to every interactive element with -5px inset offset. */
  --caat-focus-ring: #ffa500;

  /* ================================================================
   * SEMANTIC COLOR TOKENS (use these in UI)
   * ================================================================ */
  --fg-1:          var(--caat-neutral-900); /* headings, primary text */
  --fg-2:          var(--caat-neutral-700); /* body */
  --fg-3:          var(--caat-neutral-500); /* muted */
  --fg-on-primary: var(--caat-neutral-0);

  --bg-1: var(--caat-neutral-0);   /* page */
  --bg-2: var(--caat-neutral-50);  /* alt surface */
  --bg-3: var(--caat-neutral-100); /* section fill */
  --bg-4: var(--caat-neutral-200); /* inset panels */

  --border-1: var(--caat-neutral-300);
  --border-2: #ccc; /* accordion / form borders on source site */

  --link:        var(--caat-primary);
  --link-hover:  var(--caat-primary-hover);


  /* ================================================================
   * TYPOGRAPHY — BASE TOKENS
   * ================================================================ */
  --font-sans: "Libre Franklin", Arial, Helvetica, sans-serif;
  --font-display: var(--font-sans); /* no secondary display face in system */
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Weights */
  --fw-thin:       100;
  --fw-light:      300;
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;
  --fw-extrabold:  800;
  --fw-black:      900;

  /* Sizes (authored in px on source site; no fluid scaling) */
  --fs-h1:         56px;
  --fs-h2:         46px;
  --fs-h3:         40px;
  --fs-h4:         28px;
  --fs-h5:         20px;
  --fs-subtitle:   26px;
  --fs-pull-quote: 34px;
  --fs-body:       18px;
  --fs-body-sm:    16px;
  --fs-button:     16px;
  --fs-caption:    12px;
  --fs-overline:   12px;

  /* Line heights (as authored) */
  --lh-h3:     57px;
  --lh-h4:     35px;
  --lh-h5:     22px;
  --lh-body:   1.5;
  --lh-button: 24px;

  /* Letter spacing */
  --ls-h1:       -0.04em;
  --ls-h2:        0.003em;
  --ls-subtitle: -0.03em;
  --ls-button:    0.02em;
  --ls-overline:  0.053em;


  /* ================================================================
   * SPACING, RADIUS, SHADOWS, A11Y
   * ================================================================ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;

  --radius-sm: 2px;
  --radius-md: 4px;   /* .btn-primary, .btn-secondary on source site */
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* Source-site button shadow — intentionally heavy, 2018-era floating look.
   * Flagged as "feels dated" in design-system.md; preserved for fidelity. */
  --shadow-button: 0 15px 25px 0 rgba(0, 0, 0, 0.15);
  --shadow-card:   0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-raised: 0 10px 30px rgba(0, 0, 0, 0.10);

  /* Accessibility minimums — preserve in any redesign */
  --tap-target-min:    45px;
  --form-input-height: 54px;
}

/* Mobile: caption bumps up to 16px (source-site rule) */
@media (max-width: 767px) {
  :root { --fs-caption: 16px; }
}


/* ================================================================
 * SEMANTIC TYPE CLASSES
 * Use these instead of raw tag selectors where possible.
 * ================================================================ */
.type-h1, h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-h1);
  line-height: 1.1;
  color: var(--fg-1);
}
.type-h2, h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-h2);
  line-height: 1.15;
  color: var(--fg-1);
}
.type-h3, h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h3);
  color: var(--fg-1);
}
.type-h4, h4 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-h4);
  color: var(--fg-1);
}
.type-h5, h5 {
  font-family: var(--font-display);
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-h5);
  color: var(--fg-1);
}
.type-subtitle {
  font-family: var(--font-sans);
  font-size: var(--fs-subtitle);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-subtitle);
  line-height: 1.5;
  color: var(--fg-2);
}
.type-body, p {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--fg-2);
}
.type-body-sm { font-size: var(--fs-body-sm); line-height: 1.5; color: var(--fg-2); }
.type-pull-quote {
  font-family: var(--font-sans);
  font-size: var(--fs-pull-quote);
  font-weight: var(--fw-regular);
  line-height: 1.25;
  color: var(--fg-1);
}
.type-button {
  font-family: var(--font-sans);
  font-size: var(--fs-button);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-button);
  line-height: var(--lh-button);
}
.type-caption { font-size: var(--fs-caption); color: var(--fg-3); line-height: 1.5; }
.type-overline {
  font-size: var(--fs-overline);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
  color: var(--fg-3);
}

/* Universal focus ring — preserve across any CAAT UI */
*:focus-visible {
  outline: 2px solid var(--caat-focus-ring);
  outline-offset: -5px;
}