/* ============================================================================
   Pauline — PRODUCT tokens (GENERATED)
   ============================================================================
   
   This file is generated from Product Design System/spec-data.js.
   
   DO NOT EDIT HERE. All token values are defined once in spec-data.js and
   rendered into this file, into Spec_Token_Sheet.dc.html, and into the
   design-system documentation. Update spec-data.js; regenerate this file.
   
   The screens load this file to reference tokens via var(--token). @font-face
   rules are included below (copied from _ds/…/colors_and_type.css).
   
   ============================================================================ */

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("../fonts/dm-sans.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/source-serif-4.woff2") format("woff2-variations");
}

:root {
  /* Monospace stack */
  --monospace-stack: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Ramps — neutral stops used in product */
  --neutral-10: #FFFFFF;
  --neutral-20: #FAF8F4;
  --neutral-30: #F0ECE4;
  --neutral-40: #C9C7D1;
  --neutral-50: #9A9AAE;
  --neutral-70: #5F5F78;
  --neutral-100: #1A1A2E;

  /* Ramps — primary (navy) stops used in product */
  --primary-50: #556082;
  --primary-60: #1B2B5B;
  --primary-70: #16224A;

  /* Ramps — highlight (accent orange) stops used in product */
  --highlight-10: #FFF6EC;
  --highlight-60: #F07000;
  --highlight-fill: #C25400;
  --highlight-fill-pressed: #A84700;

  /* Ramps — warning (rust) stops used in product */
  --warning-10: #FFF1E0;
  --warning-60: #B04D00;

  /* Ramps — success (teal) stops used in product */
  --success-10: #E6F4F2;
  --success-50: #1F9D88;
  --success-60: #0D7B6E;
  --success-70: #0F5A50;

  /* Ramps — error (negative) stops used in product */
  --error-60: #C8442D;

  /* Semantic surface roles — from spec-data.js ROLES.surface */
  --surface-base: #FAF8F4;
  --surface-sheet: #FFFFFF;
  --surface-muted: #F3F1EC;
  --surface-sunken: rgba(27,43,91,0.05);
  --surface-overlay: rgba(0,30,50,0.52);

  /* Semantic text roles — from spec-data.js ROLES.text */
  --text-primary: #1A1A2E;
  --text-secondary: #5F5F78;
  --text-warm-secondary: #6D5C49; /* spec-data.js ROLES.text.warmSecondary */
  --text-tertiary: #9A9AAE;

  /* Semantic accent roles — from spec-data.js ROLES.accent */
  --accent-default: #1B2B5B;
  --accent-tint: rgba(27,43,91,0.09);
  --accent-tint-subtle: rgba(27,43,91,0.05);
  --accent-pressed: #16224A;
  --accent-container: #D3D8E3;
  --accent-on: #FFFFFF;
  --accent-on-container: #101A38;
  --accent-text-strong: #16224A;

  /* Semantic highlight roles — from spec-data.js ROLES.highlight */
  --highlight-default: #F07000;
  --highlight-fill: #C25400;
  --highlight-fill-pressed: #A84700;
  --highlight-pressed: #CC5F00;
  --highlight-container: #FFF6EC;
  --highlight-on: #FFFFFF;
  --highlight-on-container: #A34C00;
  --highlight-text-strong: #CC5F00;

  /* Semantic surface roles — expanded */
  --surface-raised: #FFFFFF;

  /* Semantic status roles — from spec-data.js ROLES.status */
  --status-success: #0D7B6E;
  --status-success-pressed: #0F5A50;
  --status-success-container: #E6F4F2;
  --status-on-success-container: #0F5A50;
  --status-warning: #B04D00;
  --status-warning-pressed: #8F3F00;
  --status-warning-container: #FFF1E0;
  --status-on-warning-container: #6E3000;
  --status-error: #C8442D;
  --status-error-pressed: #A93520;
  --status-error-container: #F7DCD4;
  --status-on-error-container: #892A1A;
  --status-info: #5F5F78;
  --status-info-container: #F0ECE4;

  /* Semantic neutral (interactive) roles — from spec-data.js ROLES.neutral */
  --neutral-interactive-default: #C9C7D1;
  --neutral-interactive-pressed: #9A9AAE;
  --neutral-interactive-container: #F0ECE4;
  --neutral-interactive-reversed: #1A1A2E;
  --neutral-interactive-on-reversed: #FAF8F4;

  /* Tints (navy-based) — from spec-data.js TINTS */
  --primary-tint: rgba(27,43,91,0.09);
  --primary-tint-subtle: rgba(27,43,91,0.05);

  /* Borders — from spec-data.js ROLES.border */
  --border-default: rgba(27,43,91,0.10);
  --border-strong: rgba(27,43,91,0.18);
  --border-faint: rgba(27,43,91,0.05);
  --border-highlighted: rgba(240,112,0,0.28); /* spec-data.js ROLES.border.highlighted */
  --border-warning: rgba(176,77,0,0.28); /* spec-data.js ROLES.border.warning */
  --border-divider: rgba(27,43,91,0.08); /* list separators, hairline dividers */

  /* Shadows — from spec-data.js ELEVATION */
  --shadow-card: 0 1px 2px rgba(27,43,91,0.05), 0 2px 6px rgba(27,43,91,0.07);
  --shadow-overlay: 0 -1px 3px rgba(27,43,91,0.05), 0 -8px 24px rgba(27,43,91,0.14);
  --shadow-notice: 0 6px 16px -6px rgba(0,30,50,0.22), 0 2px 5px -2px rgba(0,30,50,0.12);

  /* Spacing — from spec-data.js SPACE */
  --space-4xs: 2px;
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-s: 14px;
  --space-sm: 16px;
  --space-m: 18px;
  --space-ml: 20px;
  --space-l: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 80px;

  /* Radii — from spec-data.js RADII */
  --radius-xs: 4px;
  --radius-s: 8px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-ml: 14px;
  --radius-l: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Typography — from spec-data.js TYPOGRAPHY */
  --fs-sectionHeading: 18px;
  --fw-sectionHeading: 600;
  --lh-sectionHeading: 24px;

  --fs-heading1: 20px;
  --fw-heading1: 700;
  --lh-heading1: 28px;

  --fs-heading2: 18px;
  --fw-heading2: 600;
  --lh-heading2: 24px;

  --fs-heading2Strong: 18px;
  --fw-heading2Strong: 700;
  --lh-heading2Strong: 24px;

  --fs-heading3: 16px;
  --fw-heading3: 600;
  --lh-heading3: 22px;

  --fs-heading3Strong: 16px;
  --fw-heading3Strong: 700;
  --lh-heading3Strong: 22px;

  --fs-body1: 16px;
  --fw-body1: 400;
  --lh-body1: 22px;

  --fs-body1Strong: 16px;
  --fw-body1Strong: 700;
  --lh-body1Strong: 22px;

  --fs-body2: 14px;
  --fw-body2: 400;
  --lh-body2: 18px;

  --fs-body2Medium: 14px;
  --fw-body2Medium: 500;
  --lh-body2Medium: 18px;

  --fs-body2Strong: 14px;
  --fw-body2Strong: 700;
  --lh-body2Strong: 18px;

  --fs-body3: 12px;
  --fw-body3: 400;
  --lh-body3: 16px;

  --fs-body3Strong: 12px;
  --fw-body3Strong: 600;
  --lh-body3Strong: 16px;

  --fs-explainerBody: 14px;
  --fw-explainerBody: 300;
  --lh-explainerBody: 18px;

  /* Amount hero — display pair, outside the body scale (component sheet §10) */
  --fs-displayAmount: 52px;
  --fw-displayAmount: 500;
  --lh-displayAmount: 56px;

  --fs-displayUnit: 20px;
  --fw-displayUnit: 600;
  --lh-displayUnit: 28px;

  /* Data (categorical) — from spec-data.js DATA */
  --data-1: #003050;
  --data-2: #9A6B12;
  --data-3: #0D7B6E;
  --data-4: #A83E6E;
  --data-5: #2A6E9E;
  --data-6: #5B3E86;
  --data-7: #8A4B2A;
  --data-8: #3F6B48;
  --data-unallocated: #6E6E80;  --data-other: #8A8A96;

  /* Address field — the entity-tinted read-only field. The consumer sets
     --field-pin to the entity's pinned data.* colour and carries
     data-address-field; the mixes are declared in the rule below the block. */
  --field-pin: var(--data-1);
  --field-pin-border-width: 2px;

  /* Transaction types — from spec-data.js TX_TYPES */
  --tx-deposit-bg: #C0DDD9;
  --tx-deposit-fg: #0A6056;
  --tx-withdrawal-bg: #C4C8D4;
  --tx-withdrawal-fg: #152247;
  --tx-allocation-bg: #C8D9E6;
  --tx-allocation-fg: #21567B;
  --tx-deallocation-bg: #EAD1BD;
  --tx-deallocation-fg: #893C00;
  --tx-swap-bg: #D4CDE0;
  --tx-swap-fg: #473069;
  --tx-rebalance-bg: #E8CDD9;
  --tx-rebalance-fg: #833056;
  --tx-fee-bg: #D5D5DC;
  --tx-fee-fg: #4A4A5E;

  /* Card metrics — from spec-data.js COMPONENTS.card */
  --card-pad-hero: var(--space-m);           /* Hero card padding (18 px) — Phase 2 */
  --card-pad-content: var(--space-s) var(--space-sm);  /* Content card: 14 / 16 — Phase 2 */

  /* Control metrics — from spec-data.js COMPONENTS.button */
  --control-height-l: 50px;
  --control-height-m: 48px;
  --control-height-s: 34px;
  --control-round-s: 32px;
  --control-round-xs: 28px;
  --fs-buttonLabel: 14px;
  --fw-buttonLabel: 600;

  /* Form controls — from spec-data.js COMPONENTS.field */
  --field-height: 50px;
  --code-cell-height: 54px;
  --checkbox-size: 22px;
  --icon-avatar-s: 30px;

  /* Notices — from spec-data.js COMPONENTS.notice */
  --notice-pad-v: 13px;
  --notice-pad-h: 14px;
  --notice-warning-fill: linear-gradient(150deg, rgba(240,112,0,0.13) 0%, rgba(240,112,0,0.07) 100%);
  --notice-warning-border: rgba(240,112,0,0.18);
  /* info notice — primary-50 #556082, per spec-data.js COMPONENTS.notice variants */
  --notice-info-fill: linear-gradient(150deg, rgba(85,96,130,0.13) 0%, rgba(85,96,130,0.07) 100%);
  --notice-info-border: rgba(85,96,130,0.18);
  /* feature notice — success #0D7B6E */
  --notice-success-fill: linear-gradient(150deg, rgba(13,123,110,0.13) 0%, rgba(13,123,110,0.07) 100%);
  --notice-success-border: rgba(13,123,110,0.18);
  /* neutral notice — navy, for the inline disclaimer panel; shallower than the status variants */
  --notice-neutral-fill: linear-gradient(150deg, rgba(27,43,91,0.07) 0%, rgba(27,43,91,0.03) 100%);
  --notice-neutral-border: var(--border-default);

  /* Canvas backgrounds — exploration only */
  --desk: #EDE7DA;
}

/* ============================================================================
   Typography wrapper classes — use ONE class per text element
   ============================================================================
   Every element must use a matching font-size, font-weight, and line-height
   from the same variant. These classes enforce that invariant. */

.text-sectionHeading {
  font-size: var(--fs-sectionHeading);
  font-weight: var(--fw-sectionHeading);
  line-height: var(--lh-sectionHeading);
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

.text-heading1 {
  font-size: var(--fs-heading1);
  font-weight: var(--fw-heading1);
  line-height: var(--lh-heading1);
  letter-spacing: -0.01em;
}

.text-heading2 {
  font-size: var(--fs-heading2);
  font-weight: var(--fw-heading2);
  line-height: var(--lh-heading2);
  letter-spacing: -0.01em;
}

.text-heading2Strong {
  font-size: var(--fs-heading2Strong);
  font-weight: var(--fw-heading2Strong);
  line-height: var(--lh-heading2Strong);
  letter-spacing: -0.01em;
}

.text-heading3 {
  font-size: var(--fs-heading3);
  font-weight: var(--fw-heading3);
  line-height: var(--lh-heading3);
  letter-spacing: -0.01em;
}

.text-heading3Strong {
  font-size: var(--fs-heading3Strong);
  font-weight: var(--fw-heading3Strong);
  line-height: var(--lh-heading3Strong);
  letter-spacing: -0.01em;
}

.text-body1 {
  font-size: var(--fs-body1);
  font-weight: var(--fw-body1);
  line-height: var(--lh-body1);
}

.text-body1Strong {
  font-size: var(--fs-body1Strong);
  font-weight: var(--fw-body1Strong);
  line-height: var(--lh-body1Strong);
}

.text-body2 {
  font-size: var(--fs-body2);
  font-weight: var(--fw-body2);
  line-height: var(--lh-body2);
}

.text-body2Medium {
  font-size: var(--fs-body2Medium);
  font-weight: var(--fw-body2Medium);
  line-height: var(--lh-body2Medium);
}

.text-body2Strong {
  font-size: var(--fs-body2Strong);
  font-weight: var(--fw-body2Strong);
  line-height: var(--lh-body2Strong);
}

.text-body3 {
  font-size: var(--fs-body3);
  font-weight: var(--fw-body3);
  line-height: var(--lh-body3);
}

.text-body3Strong {
  font-size: var(--fs-body3Strong);
  font-weight: var(--fw-body3Strong);
  line-height: var(--lh-body3Strong);
}

.text-displayAmount {
  font-size: var(--fs-displayAmount);
  font-weight: var(--fw-displayAmount);
  line-height: var(--lh-displayAmount);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.text-displayUnit {
  font-size: var(--fs-displayUnit);
  font-weight: var(--fw-displayUnit);
  line-height: var(--lh-displayUnit);
}

.text-explainerBody {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: var(--fs-explainerBody);
  font-weight: var(--fw-explainerBody);
  line-height: var(--lh-explainerBody);
}

/* The address-field mixes must be declared on the element that sets
   --field-pin: a custom property declared on :root resolves its inner var()
   at :root, so a --field-pin set later could never reach it. Every consumer
   carries data-address-field alongside its --field-pin. */
[data-address-field] {
  --field-pin-fill: color-mix(in srgb, var(--field-pin) 6%, var(--surface-sheet));
  --field-pin-border-color: color-mix(in srgb, var(--field-pin) 45%, var(--surface-sheet));
}