/* Generated by Style Dictionary from contract/tokens/tokens.json. Do not edit. */
/* Resolved sys.* values for the backend web surface; mirrors the Swift/Kotlin */
/* token emit so web shares one source of truth with the native apps (ADR 0040). */

:root {
  --tcgm-spacing-1: 4px;
  --tcgm-spacing-2: 8px;
  --tcgm-spacing-3: 12px;
  --tcgm-spacing-4: 16px;
  --tcgm-spacing-5: 20px;
  --tcgm-spacing-6: 24px;
  --tcgm-spacing-7: 32px;
  --tcgm-spacing-8: 40px;
  --tcgm-spacing-9: 56px;
  --tcgm-spacing-10: 72px;
  --tcgm-radius-xs: 6px;
  --tcgm-radius-sm: 8px;
  --tcgm-radius-md: 12px;
  --tcgm-radius-lg: 16px;
  --tcgm-radius-xl: 24px;
  --tcgm-radius-pill: 999px;
  --tcgm-duration-fast: 120ms;
  --tcgm-duration-base: 200ms;
  --tcgm-duration-slow: 320ms;
  --tcgm-easing-standard: cubic-bezier(0.20, 0.70, 0.30, 1.00);
  --tcgm-easing-emphasized: cubic-bezier(0.16, 0.84, 0.18, 1.00);

  /* colour — light scheme (default) */
  --tcgm-color-background: #F6F1E6;
  --tcgm-color-surface: #FBF7EE;
  --tcgm-color-surface-elevated: #FFFFFF;
  --tcgm-color-surface-sunk: #EFE7D6;
  --tcgm-color-line: rgba(27, 24, 19, 0.1);
  --tcgm-color-line-strong: rgba(27, 24, 19, 0.18);
  --tcgm-color-text: #1B1813;
  --tcgm-color-text-muted: #5F564A;
  --tcgm-color-text-faint: #847A69;
  --tcgm-color-text-on-primary: #FBF7EE;
  --tcgm-color-primary: #B54E30;
  --tcgm-color-primary-pressed: #A84A2D;
  --tcgm-color-primary-soft: rgba(194, 90, 58, 0.1);
  --tcgm-color-primary-on-cream: #8E3A20;
  --tcgm-color-secondary: #1F4E55;
  --tcgm-color-secondary-soft: rgba(31, 78, 85, 0.1);
  --tcgm-color-success: #5E7A3D;
  --tcgm-color-warning: #C28A2E;
  --tcgm-color-danger: #8E3A2A;
  --tcgm-color-staff-line: rgba(27, 24, 19, 0.3);
  --tcgm-color-note-head: #1B1813;
  --tcgm-color-note-played: #C25A3A;
  --tcgm-color-measure-bar: rgba(27, 24, 19, 0.45);
}

/* dark scheme — system preference, unless an ancestor forces [data-theme="light"] */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tcgm-color-background: #15120E;
    --tcgm-color-surface: #1E1A14;
    --tcgm-color-surface-elevated: #25201A;
    --tcgm-color-surface-sunk: #100E0B;
    --tcgm-color-line: rgba(244, 237, 221, 0.1);
    --tcgm-color-line-strong: rgba(244, 237, 221, 0.2);
    --tcgm-color-text: #F4EDDD;
    --tcgm-color-text-muted: #B6AC95;
    --tcgm-color-text-faint: #877E6A;
    --tcgm-color-text-on-primary: #FBF7EE;
    --tcgm-color-primary: #B54E30;
    --tcgm-color-primary-pressed: #A84A2D;
    --tcgm-color-primary-soft: rgba(227, 122, 86, 0.16);
    --tcgm-color-secondary: #5E939B;
    --tcgm-color-secondary-soft: rgba(94, 147, 155, 0.16);
    --tcgm-color-success: #8FB05F;
    --tcgm-color-warning: #D6A24A;
    --tcgm-color-danger: #D6745E;
    --tcgm-color-staff-line: rgba(244, 237, 221, 0.32);
    --tcgm-color-note-head: #F4EDDD;
    --tcgm-color-note-played: #E37A56;
    --tcgm-color-measure-bar: rgba(244, 237, 221, 0.45);
  }
}

/* dark scheme — explicit opt-in (overrides system preference) */
[data-theme="dark"] {
  --tcgm-color-background: #15120E;
  --tcgm-color-surface: #1E1A14;
  --tcgm-color-surface-elevated: #25201A;
  --tcgm-color-surface-sunk: #100E0B;
  --tcgm-color-line: rgba(244, 237, 221, 0.1);
  --tcgm-color-line-strong: rgba(244, 237, 221, 0.2);
  --tcgm-color-text: #F4EDDD;
  --tcgm-color-text-muted: #B6AC95;
  --tcgm-color-text-faint: #877E6A;
  --tcgm-color-text-on-primary: #FBF7EE;
  --tcgm-color-primary: #B54E30;
  --tcgm-color-primary-pressed: #A84A2D;
  --tcgm-color-primary-soft: rgba(227, 122, 86, 0.16);
  --tcgm-color-secondary: #5E939B;
  --tcgm-color-secondary-soft: rgba(94, 147, 155, 0.16);
  --tcgm-color-success: #8FB05F;
  --tcgm-color-warning: #D6A24A;
  --tcgm-color-danger: #D6745E;
  --tcgm-color-staff-line: rgba(244, 237, 221, 0.32);
  --tcgm-color-note-head: #F4EDDD;
  --tcgm-color-note-played: #E37A56;
  --tcgm-color-measure-bar: rgba(244, 237, 221, 0.45);
}