/* ==========================================================================
   buutce Design System 2.0 — Foundation
   Sprint 11 / Task 11.1

   Source of truth: docs/BUUTCE_DESIGN_SYSTEM_2_0.md
   This file is ADDITIVE to static/css/style.css (Sprint 6 foundation).
   It does NOT rewrite legacy selectors — see load order note at the
   bottom of this file and docs/SPRINT_11_TASK_01_FOUNDATION.md §Naming.

   Naming: color/typography tokens use the master spec's bare names
   (--color-*, --font-*) since no legacy collision exists. Structural
   tokens (--space-*, --radius-*) use semantic names distinct from the
   Sprint 6 numbered primitives (--space-1..8, --radius-control/panel)
   to avoid silently changing what those legacy tokens resolve to for
   the ~180 existing selectors that already consume them.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Font faces — IBM Plex Sans, self-hosted (Gate A: PASS, Task 11.0A/11.1).
   Official Google Fonts WOFF2 delivery artifacts (fonts.gstatic.com),
   variable (wght 100-700, no wdth axis in this build). Two files because
   Google splits delivery by Unicode subset; unicode-range tells the
   browser which file to load per character. Provenance + SHA-256:
   static/fonts/ibm-plex-sans/SOURCE.md.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans/IBMPlexSans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans/IBMPlexSans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   2. Foundation tokens
   -------------------------------------------------------------------------- */
:root {
  /* -- Typography -- */
  --font-ui: "IBM Plex Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  /* NOT DEFAULT — reference only, Design System §8.3. No component should
     use this unless a genuine ledger/table case proves it necessary. */
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  /* -- Color: foundations (dark, default appearance mode) --
     Sprint 14 / Task 14.2B — updated to the Visual Language 3.0
     foundation approved in docs/SPRINT_14_TASK_01B_VISUAL_DIRECTION_
     DECISIONS.md §10 and docs/SPRINT_14_TASK_02A_VISUAL_LANGUAGE_
     PROPOSAL.md. Original DS2 (Sprint 11) values preserved below each
     line as a comment, not silently dropped. Every replacement value
     was re-verified to still clear WCAG AA (4.5:1) against the new
     --color-canvas — see docs/SPRINT_14_TASK_02B_VISUAL_LANGUAGE_
     IMPLEMENTATION.md for the worked numbers; nothing here is a guess. */
  --color-canvas:        #14161a; /* was #0c0e11 */
  --color-surface-1:     #1b1e23; /* was #14171b */
  --color-surface-2:     #22262c; /* was #1b1f25 */
  --color-overlay-bg:    #22262c; /* was #1f242b */
  --color-text-primary:  #f0f1f3; /* was #edf0f3 */
  --color-text-secondary:#a8adb8; /* was #a6afba */
  /* Contrast-adjusted (Task 14.2A working notes): 4.77:1 on the new
     --color-canvas, AA-normal. Original DS2 value/rationale (Task 11.1
     §Contrast Validation) preserved: "candidate #6b7480 measured
     4.08:1... lightened to #727c88 to clear 4.5:1" against the OLD
     canvas — re-verified independently for the new canvas, not copied
     forward unchecked. */
  --color-text-muted:    #7d8391; /* was #727c88 */
  --color-divider:       rgba(255, 255, 255, 0.08); /* was #262b32 */

  /* -- Color: brand -- selected nav / focus / intentional CTA ONLY.
     Never a source of truth for status/financial semantics (§16). -- */
  --color-brand-accent:      #2fb6a6;
  --color-brand-accent-quiet:rgba(47, 182, 166, 0.14);
  --color-focus-ring:        #4fd0c0;

  /* -- Color: status — separate token family from brand -- */
  --color-success:     #4fae84;
  --color-warning:     #d9a441;
  --color-error:       #e5484d;
  --color-information: #6f9bd1;

  /* -- Color: financial direction — separate from status -- */
  --color-income:  #5fbf8b;
  --color-expense: #bd8055; /* directional, not alarming — distinct hue from --color-error */
  --color-financial-neutral: var(--color-text-primary); /* transfer/card payment/debt: no color at all */

  /* -- Color: assistive / decision state -- */
  --color-suggestion:    #8f8fa8;
  --color-suggestion-bg: rgba(143, 143, 168, 0.12);
  --color-approved:      var(--color-success);

  --color-selection-bg: rgba(47, 182, 166, 0.1);

  /* -- Spacing: semantic (Design System §16.2). Deliberately NOT named
     --space-1..8 — see file header naming note. -- */
  --space-control-gap:      8px;
  --space-row-gap:          12px;
  --space-section-gap:      32px;
  --space-page-gutter:      48px;
  --space-hero-content-gap: 24px;
  --space-modal-padding:    32px;
  --space-mobile-gap:       16px;

  /* -- Radius: context-based, no universal value (§21/§42.1 naming note) -- */
  --radius-control-ds: 6px;
  --radius-panel-ds:   10px;
  /* --radius-pill already exists in style.css at the same value (999px);
     reused as-is, no redefinition needed. */

  /* -- Border -- */
  --border-hairline: 1px solid var(--color-divider);
  --border-input:    1px solid var(--color-divider);
  --border-overlay:  1px solid var(--color-divider);

  /* -- Elevation — Overlay is the only normal place a real shadow lives -- */
  --elevation-overlay-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

/* -- Color: light appearance mode — same role architecture, different
   values. Dark is an appearance mode, not the brand itself (§17/§23). -- */
:root[data-theme="light"] {
  /* Sprint 14 / Task 14.2B — see the dark-theme block above for the
     full rationale; same Visual Language 3.0 foundation, light values. */
  --color-canvas:        #f9f7f3; /* was #f6f7f8 */
  --color-surface-1:     #fdfcfa; /* was #ffffff */
  --color-surface-2:     #f1eee8; /* was #eef0f2 */
  --color-overlay-bg:    #fdfcfa; /* was #ffffff */
  --color-text-primary:  #23211d; /* was #1a1d21 */
  --color-text-secondary:#5c584f; /* was #565d66 */
  /* Contrast-adjusted (Task 14.2A working notes): 4.81:1 on the new
     --color-canvas, AA-normal. Original DS2 rationale preserved:
     "candidate #868d97 measured 3.12:1 on light canvas... darkened to
     #6b727c to clear 4.5:1" against the OLD canvas — re-verified
     independently for the new canvas. */
  --color-text-muted:    #726d63; /* was #6b727c */
  --color-divider:       rgba(35, 33, 29, 0.10); /* was #e3e6ea */

  /* Contrast-adjusted: candidate #1f8f82 measured 3.69:1 as text on light
     canvas — insufficient for the small text contexts (nav label, inline
     link) this token is used in. Darkened to clear 4.5:1. */
  --color-brand-accent:      #1b7e73;
  --color-brand-accent-quiet:rgba(31, 143, 130, 0.1);
  --color-focus-ring:        #1b7e73;

  /* Contrast-adjusted: candidate #b3801f measured 3.25:1. Darkened. */
  --color-warning:     #926919;
  --color-error:       #c9333a; /* already 4.87:1 — unchanged */
  --color-information: #3b6ea5; /* already 4.94:1 — unchanged */
  /* Contrast-adjusted: candidate #2f8f66 measured 3.74:1. Darkened. */
  --color-success:     #2a805b;
  --color-income:      #2a805b; /* same adjustment as success; kept as a
                                    separate token per §16.4 Income≠Success
                                    contract even though the values match
                                    today — they may diverge later. */
  /* Contrast-adjusted: candidate #9c6a3e measured 4.31:1, below 4.5:1.
     Darkened slightly to clear it with margin. */
  --color-expense:      #97663c;
  --color-financial-neutral: var(--color-text-primary);

  --color-suggestion:    #6b7280; /* already 4.51:1 — unchanged */
  --color-suggestion-bg: rgba(107, 114, 128, 0.1);
  --color-approved:      var(--color-success);

  --color-selection-bg: rgba(31, 143, 130, 0.08);
}

/* --------------------------------------------------------------------------
   3. Typography roles (Design System §8.5). Semantic classes, prefixed
   `.t-` — no collision with any existing style.css selector (verified).
   Piksel values are the Task 10.5.1-empirical CANDIDATE scale; marked
   here as the implemented foundation (Design System §35.2 updated).
   -------------------------------------------------------------------------- */
.t-financial-hero {
  font-family: var(--font-ui);
  font-size: 2.75rem; /* 44px — unchanged, already matched the Task 14.2B
    approved hero-figure size exactly */
  font-weight: 700; /* Sprint 14 / Task 14.2B — was 600; approved
    hero-figure weight is 700, the heaviest weight the self-hosted font
    file's own declared 100-700 range actually delivers (no >700 request
    is made anywhere in this foundation, per instruction) */
  line-height: 1.05;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums; /* intent/fallback declaration — the
    font's digits are already uniform-width by default (Gate A, §15 note
    below); this is not evidence of an actual OpenType `tnum` feature. */
  color: var(--color-text-primary); /* NEVER brand-accent — size signals importance, not color */
}
.t-financial-large {
  font-family: var(--font-ui);
  font-size: 1.375rem; /* Sprint 14 / Task 14.2B — was 1.5rem; approved
    secondary-figure is 22px exactly */
  font-weight: 700; /* was 600 */
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.t-financial-row {
  font-family: var(--font-ui);
  font-size: 1rem; /* Sprint 14 / Task 14.2B — was 0.95rem; approved
    row-primary is 16px exactly */
  font-weight: 600; /* was 500; approved row-primary weight range is 600-700 */
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.t-financial-metadata {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.t-page-title {
  font-family: var(--font-ui);
  font-size: 1.75rem; /* Sprint 14 / Task 14.2B — was 1.375rem; approved
    page-title is 28px exactly */
  font-weight: 700; /* was 600 */
  letter-spacing: -0.005em;
}
.t-section-title {
  font-family: var(--font-ui);
  font-size: 0.75rem; /* Sprint 14 / Task 14.2B — was 0.78rem; approved
    section-title is 12px exactly (a ~0.5px difference, aligned for
    precision) */
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.t-subsection-title {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 600;
}
.t-body {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--color-text-primary);
}
.t-label {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}
.t-metadata {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--color-text-muted);
}
.t-caption {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-text-muted);
}
.t-nav-primary {
  font-family: var(--font-ui);
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--color-text-secondary);
}
.t-nav-primary.is-active {
  color: var(--color-brand-accent);
  font-weight: 600;
}
.t-nav-secondary {
  font-family: var(--font-ui);
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--color-text-secondary);
}
.t-button-label {
  font-family: var(--font-ui);
  font-size: 0.86rem;
  font-weight: 600;
}

/* -- Semantic financial number color utilities -- */
.n-income  { color: var(--color-income); }
.n-expense { color: var(--color-expense); }
.n-neutral { color: var(--color-financial-neutral); }
.n-debt    { color: var(--color-financial-neutral); }

/* --------------------------------------------------------------------------
   4. Accessibility foundation primitives
   -------------------------------------------------------------------------- */
.ds-focus-visible:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .ds-motion-safe * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   5. Financial Row / List — shared anatomy (Sprint 11 / Task 11.4).
   LEFT (identity + metadata) / RIGHT (amount + state), hairline divider,
   no card-per-row, no nested borders ("Hierarchy > Container", Design
   System §23).

   STALE CLAIM, CORRECTED (Sprint 14 / Task 14.2B): this note originally
   said the full structural anatomy was validated only via an audit-only
   reference harness and "NOT wired into any existing page's markup
   yet" — true at Task 11.4's own writing, no longer true. By Sprint 14
   this anatomy is the real, live rendering path for Dashboard,
   İşlemler, Bütçe, Kartlar & Borçlar, Hesaplar, Raporlar, Net Servet,
   and Nakit Akışı (grep-confirmed across `templates/gelir_gider.html`
   and `static/js/gelir_gider.js`/`islemler.js`, not assumed). Priority
   on narrow viewports (§18): identity truncates first, amount is NEVER
   hidden, metadata wraps onto its own line.
   -------------------------------------------------------------------------- */
.financial-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.financial-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-control-gap);
  padding: var(--space-row-gap) 0;
  border-bottom: var(--border-hairline);
  background: none; /* default: transparent, no card-per-row (§6) */
}
.financial-list > .financial-row:last-child,
.financial-list > li:last-child > .financial-row {
  border-bottom: none;
}
.financial-row__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0; /* required for text-overflow ellipsis to work in a flex child */
  flex: 1 1 auto;
}
.financial-row__identity {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.financial-row__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}
.financial-row__end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex: 0 0 auto;
  padding-left: var(--space-control-gap);
}
/* .financial-row__amount carries layout role only - pair with
   .t-financial-row (Task 11.1 typography, §7) + one of .n-income/
   .n-expense/.n-neutral/.n-debt (below) for size/tabular/color. */
.financial-row__amount { text-align: right; }
.financial-row__state {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
/* Opt-in interactive variant - only for rows that are genuinely
   clickable (§23); most financial-row usage is static.

   Sprint 11 / Task 11.6 bug fix: this used to be `all: unset` - which
   resets EVERY property, including ones `.financial-row` itself
   declares (padding/border-bottom/background/justify-content/
   align-items/gap). Because both classes share the same specificity
   (0,0,1,0) and this rule comes later in source order, `all: unset`
   was silently WINNING and wiping out `.financial-row`'s own divider/
   spacing/layout whenever a real page combined both classes on one
   element - never caught before because no real page did that until
   İşlemler (Task 11.6); the audit-only reference harness's interactive
   test only checked the focus-visible outline, not the divider. Fixed
   by resetting ONLY the native <button> chrome (border/appearance/
   font/color/text-align/margin) that `.financial-row` doesn't already
   cover - `.financial-row`'s own declarations now survive via normal,
   non-conflicting cascade instead of being blown away. */
.financial-row--interactive {
  appearance: none;
  -webkit-appearance: none;
  /* `border: none` (shorthand) would ALSO reset `.financial-row`'s own
     `border-bottom` (same mistake `all: unset` made, just smaller) -
     only the three sides `.financial-row` never sets are reset here so
     its hairline divider survives via normal, non-conflicting cascade. */
  border-top: none;
  border-left: none;
  border-right: none;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
  box-sizing: border-box;
  display: flex;
  width: 100%;
  cursor: pointer;
}
.financial-row--interactive:hover { background: var(--color-surface-1); }
.financial-row--interactive:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: -2px;
}

/* -- Financial type → visual state (Design System §9/§10, Task 11.4).
   Same 4 utilities already existed from Task 11.1 (§35.2) - reused
   as-is, not redefined, so this is a genuine "already implemented"
   foundation being wired into a real render path, not a new system. -- */
/* .n-income / .n-expense / .n-neutral / .n-debt already defined above (§3). */

/* --------------------------------------------------------------------------
   6. Compact Financial Summary — shared pattern (Sprint 11 / Task 11.4).
   Per-currency groups ONLY - this pattern has no "total" concept at all,
   so it is structurally incapable of combining TRY+USD+EUR into one
   figure (Design System §20.3 cross-currency invariant). Callers render
   one .financial-summary__group per currency; nothing in this CSS sums
   anything.
   -------------------------------------------------------------------------- */
.financial-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-section-gap);
}
.financial-summary__group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.financial-summary__label {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
/* .financial-summary__value carries layout role only - pair with
   .t-financial-large (Task 11.1) for size/weight/tabular. */
.financial-summary__value { white-space: nowrap; }
.financial-summary__meta {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   7. Status badge — semantic variants (Sprint 11 / Task 11.4). Extends
   the EXISTING shared `.status-badge` base (static/css/style.css,
   already the documented common ancestor of `.kart-rozet`/`.islem-badge`)
   rather than creating a second badge system (§27/§14) - only adds the
   semantic-state color variants using DS tokens; `.status-badge`'s own
   pill geometry/size is untouched. Expense/Income are NOT badges (§14) -
   no `.status-badge--expense`/`--income` variant exists on purpose.

   Specificity note: `.status-badge`'s own `color` is declared in
   style.css, which loads AFTER this file (see load-order comment at
   the bottom) - a same-specificity `.status-badge--info { color: ... }`
   rule here would silently LOSE to it. Every variant below is written
   as the COMPOUND selector `.status-badge.status-badge--x` (specificity
   0,0,2,0) specifically to win regardless of file order. Caught by a
   real Chromium computed-style test before this was fixed - see
   docs/SPRINT_11_TASK_04_SHARED_FINANCIAL_COMPONENTS.md.
   -------------------------------------------------------------------------- */
.status-badge.status-badge--neutral { color: var(--color-text-secondary); }
.status-badge.status-badge--info {
  color: var(--color-information);
  background: color-mix(in srgb, var(--color-information) 16%, transparent);
}
.status-badge.status-badge--warning {
  color: var(--color-warning);
  background: color-mix(in srgb, var(--color-warning) 18%, transparent);
}
.status-badge.status-badge--error {
  color: var(--color-error);
  background: color-mix(in srgb, var(--color-error) 16%, transparent);
}
.status-badge.status-badge--success {
  color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 16%, transparent);
}
/* Suggestion ≠ Approval (Design System §10.6/§15) - its own token
   family, never borrowed from --color-success. */
.status-badge.status-badge--suggestion {
  color: var(--color-suggestion);
  background: var(--color-suggestion-bg);
}

/* --------------------------------------------------------------------------
   8. Inline action — shared low-weight pattern (Sprint 11 / Task 11.4).
   For "Detay →" / "Öneriyi Kullan" style contextual actions - explicitly
   NOT a primary CTA: no fill, no pill, no border (§16).
   -------------------------------------------------------------------------- */
.inline-action {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: none;
  padding: 0.3rem 0.2rem;
  min-height: 40px; /* touch target, matches the app's existing 40px convention */
  font-family: var(--font-ui);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--color-brand-accent);
  cursor: pointer;
  text-decoration: none;
}
.inline-action:hover { text-decoration: underline; }
.inline-action:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-control-ds);
}

/* --------------------------------------------------------------------------
   8b. Button hierarchy — foundation (Sprint 14 / Task 14.2B).
   New, additive classes — no existing button class (.btn-good/.btn-
   critical/.theme-toggle-btn in style.css, still in real use everywhere)
   is renamed, removed, or aliased here. These are available for
   incremental adoption by future surface tasks; no production template
   is rewired onto them in this task (§13 compatibility constraint).
   Danger is reserved for genuinely destructive actions only (§10).
   -------------------------------------------------------------------------- */
.btn-ds {
  font-family: var(--font-ui);
  font-size: 0.86rem;
  font-weight: 600;
  border-radius: var(--radius-control-ds);
  padding: 9px 16px;
  line-height: 1.2;
  cursor: pointer;
  border: 1px solid transparent;
}
.btn-ds:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}
.btn-ds-primary {
  background: var(--color-brand-accent);
  color: var(--color-canvas);
}
.btn-ds-secondary {
  background: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-divider);
}
.btn-ds-quiet {
  background: transparent;
  color: var(--color-brand-accent);
  padding-left: 4px;
  padding-right: 4px;
}
.btn-ds-danger {
  background: transparent;
  color: var(--color-error);
  border-color: color-mix(in srgb, var(--color-error) 40%, transparent);
}

/* --------------------------------------------------------------------------
   9. Low-data / empty state — shared behavior (Sprint 11 / Task 11.4).
   Content-sized, never a forced min-height "fake" container (§17) - the
   absence of a height rule here IS the contract, not an oversight.
   -------------------------------------------------------------------------- */
.financial-empty-state {
  padding: var(--space-row-gap) 0;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

/* ==========================================================================
   Load order (docs/SPRINT_11_TASK_01_FOUNDATION.md §CSS Load Order):
   this file loads BEFORE static/css/style.css in templates/base.html.
   Legacy selectors in style.css still define their own --good/--critical/
   --surface-1/--radius-control/etc. in :root and :root[data-theme="light"]
   AFTER this file — for pages/components that consume THOSE tokens by
   name, legacy values continue to win by cascade order, unaffected by
   this file.

   STALE CLAIM, CORRECTED (Sprint 14 / Task 14.2B): this note originally
   read "for any page/component not yet migrated (all of them, as of
   Task 11.1)... nothing existing changes appearance" — true when
   written, no longer true. By Sprint 14, `.financial-row`/`.financial-
   list`/`.t-financial-hero`/`.t-page-title`/`.t-section-title`/`.t-
   label`/`.t-metadata`/`.status-badge--*`/`.inline-action` are real,
   live, widely-adopted rendering paths (Dashboard, İşlemler, Bütçe,
   Kartlar & Borçlar, Hesaplar, Raporlar, Net Servet, Nakit Akışı all
   consume them directly — grep-confirmed, not assumed). Task 14.2B's
   own neutral-color and typography-scale updates in this file
   therefore DID change real, live rendering — see
   docs/SPRINT_14_TASK_02B_VISUAL_LANGUAGE_IMPLEMENTATION.md for the
   full before/after verification, not just this one historical
   font-family example.
   ========================================================================== */