/* CIBC Design System — Colors & Type
 * Red family only (crimson → maroon → burgundy). No yellow.
 * Source of truth: DESIGN.md v1.2, sampled from live cibc.com/en/personal-banking.
 */

/* ---------- Fonts ----------
 * The licensed CIBC corporate typeface is not confirmed. The production site
 * currently falls back to a system humanist sans. We mirror that here using
 * Source Sans 3 as the nearest Google Fonts match (humanist sans, similar
 * x-height and stroke modulation). FLAG: substitution pending brand sign-off.
 */
@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ============================================================
   * PRIMITIVE — raw values. Do not reference these in components.
   * ============================================================ */

  /* Brand reds */
  --crimson-600: #C41F3E;   /* Primary red — CTAs, logo wordmark, links */
  --crimson-700: #9E1832;   /* Hover / active primary */
  --maroon-700:  #8B1D41;   /* Persona bar, logo diamond chevron */
  --burgundy-800:#6B1E3C;   /* Deep accents, logo diamond body */

  /* Neutrals / chrome */
  --charcoal-900:#3A3A3A;   /* Utility bar, footer */
  --ink-900:     #1F1F1F;   /* Primary text */
  --ink-700:     #595959;   /* Secondary text */
  --ink-500:     #767676;   /* Muted / metadata */
  --ink-300:     #D0D4D9;   /* Dividers / input borders */

  /* Surfaces */
  --surface-0:        #FFFFFF;
  --surface-subtle:   #F5F6F7;
  --surface-warm:     #EEEAE4;   /* Service notice strip */
  --surface-promo:    #F5DCE0;   /* Pink promotional band */
  --surface-info:     #E3E8F2;   /* Periwinkle operational info */

  /* Status */
  --status-success: #0B6B3A;
  --status-warning: #8A4B00;
  --status-danger:  #8F1D21;
  --focus-blue:     #005FCC;

  /* ============================================================
   * SEMANTIC — reference these from components.
   * ============================================================ */

  /* Brand roles */
  --color-brand-primary:       var(--crimson-600);
  --color-brand-primary-hover: var(--crimson-700);
  --color-brand-persona:       var(--maroon-700);
  --color-brand-mark:          var(--burgundy-800);
  --color-utility-bar:         var(--charcoal-900);

  /* Surface roles */
  --color-surface-default: var(--surface-0);
  --color-surface-subtle:  var(--surface-subtle);
  --color-surface-warm:    var(--surface-warm);
  --color-surface-promo:   var(--surface-promo);
  --color-surface-info:    var(--surface-info);

  /* Text roles */
  --color-text-primary:   var(--ink-900);
  --color-text-secondary: var(--ink-700);
  --color-text-muted:     var(--ink-500);
  --color-text-link:      var(--crimson-600);
  --color-text-on-brand:  #FFFFFF;

  /* Border / focus */
  --color-border-subtle: var(--ink-300);
  --color-focus-ring:    var(--focus-blue);

  /* Status roles */
  --color-success: var(--status-success);
  --color-warning: var(--status-warning);
  --color-danger:  var(--status-danger);

  /* ============================================================
   * TYPE — family, scale, semantic roles
   * ============================================================ */

  --font-family-sans: "Source Sans 3", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Base scale — [size / line-height / weight] */
  --font-size-display-lg: 40px;  --line-display-lg: 48px;
  --font-size-heading-xl: 32px;  --line-heading-xl: 40px;
  --font-size-heading-lg: 24px;  --line-heading-lg: 32px;
  --font-size-heading-md: 20px;  --line-heading-md: 28px;
  --font-size-heading-sm: 18px;  --line-heading-sm: 26px;
  --font-size-body-lg:    18px;  --line-body-lg:    28px;
  --font-size-body-md:    16px;  --line-body-md:    24px;
  --font-size-body-sm:    14px;  --line-body-sm:    20px;
  --font-size-overline:   14px;  --line-overline:   20px;
  --font-size-caption:    12px;  --line-caption:    16px;

  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold:600;
  --font-weight-bold:    700;

  /* ============================================================
   * SPACING / RADIUS / MOTION / SHADOW
   * ============================================================ */

  --space-1:  4px;  --space-2:  8px;  --space-3: 12px;  --space-4: 16px;
  --space-6: 24px;  --space-8: 32px;  --space-12:48px;  --space-16:64px;
  --space-20:80px;  --space-24:96px;

  --radius-sm:   4px;   /* Buttons, inputs — the homepage CTA shape */
  --radius-md:   8px;   /* Cards, panels */
  --radius-lg:  12px;   /* Modals */
  --radius-pill:999px;  /* Tags, avatars */

  --motion-fast: 120ms;
  --motion-base: 180ms;
  --motion-slow: 240ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);

  /* Subtle elevation. CIBC uses borders over shadows — keep these light. */
  --shadow-1: 0 1px 2px rgba(0,0,0,.04);
  --shadow-2: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-3: 0 4px 12px rgba(0,0,0,.08);
  --shadow-4: 0 8px 24px rgba(0,0,0,.12);
}

/* ============================================================
 * SEMANTIC TYPE ROLES — apply as utility classes or @extend
 * ============================================================ */

body,
.ds-body {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body-md);
  line-height: var(--line-body-md);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ds-display-lg { font: var(--font-weight-semibold) var(--font-size-display-lg)/var(--line-display-lg) var(--font-family-sans); letter-spacing: -.01em; }
.ds-h1         { font: var(--font-weight-semibold) var(--font-size-heading-xl)/var(--line-heading-xl) var(--font-family-sans); letter-spacing: -.005em; }
.ds-h2         { font: var(--font-weight-semibold) var(--font-size-heading-lg)/var(--line-heading-lg) var(--font-family-sans); }
.ds-h3         { font: var(--font-weight-semibold) var(--font-size-heading-md)/var(--line-heading-md) var(--font-family-sans); }
.ds-h4         { font: var(--font-weight-semibold) var(--font-size-heading-sm)/var(--line-heading-sm) var(--font-family-sans); }
.ds-lead       { font: var(--font-weight-regular)  var(--font-size-body-lg)/var(--line-body-lg) var(--font-family-sans); color: var(--color-text-secondary); }
.ds-body-md    { font: var(--font-weight-regular)  var(--font-size-body-md)/var(--line-body-md) var(--font-family-sans); }
.ds-body-sm    { font: var(--font-weight-regular)  var(--font-size-body-sm)/var(--line-body-sm) var(--font-family-sans); color: var(--color-text-secondary); }
.ds-overline   { font: var(--font-weight-semibold) var(--font-size-overline)/var(--line-overline) var(--font-family-sans); text-transform: uppercase; letter-spacing: .12em; color: var(--color-text-secondary); }
.ds-caption    { font: var(--font-weight-regular)  var(--font-size-caption)/var(--line-caption) var(--font-family-sans); color: var(--color-text-muted); }
.ds-mono       { font-family: var(--font-family-mono); font-variant-numeric: tabular-nums; }

/* Currency, rates, account numbers */
.ds-numeric { font-variant-numeric: tabular-nums; }

/* Link — crimson, no underline by default, underline on hover */
.ds-link { color: var(--color-text-link); text-decoration: none; }
.ds-link:hover { text-decoration: underline; }

/* ============================================================
 * DARK THEME — re-maps semantic role tokens. Toggle via
 * document.documentElement.dataset.theme = "dark".
 * ============================================================ */
[data-theme="dark"] {
  --color-surface-default: #17191c;
  --color-surface-subtle:  #202327;
  --color-surface-warm:    #2a2220;
  --color-surface-promo:   #2c1d22;
  --color-surface-info:    #1a2532;

  --color-text-primary:   #eef0f2;
  --color-text-secondary: #b7bbc0;
  --color-text-muted:     #868c93;
  --color-text-link:      #e0566f;
  --color-text-on-brand:  #ffffff;

  --color-border-subtle:  #34383d;
  --color-focus-ring:     #4d9fff;
  --color-utility-bar:    #0c0d0f;

  --color-success: #34b277;
  --color-danger:  #e06b6f;
  --color-warning: #d99a3c;

  --shadow-1: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-2: 0 2px 8px rgba(0,0,0,0.55);
  --shadow-3: 0 8px 24px rgba(0,0,0,0.6);
  --shadow-4: 0 16px 48px rgba(0,0,0,0.65);
}

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