/* tabtada design tokens. Source of truth: doc/design/README.md and the System.dc.html /
   System-dark.dc.html mockups. Copy into src/tabtada/web/static/css (T35).

   Theme selection, in order of precedence:
     1. <html data-theme="dark"> or <html data-theme="light"> (the manual toggle, persisted in a
        cookie/localStorage by app.js; the server may also render the attribute).
     2. no attribute: prefers-color-scheme.
   The dark values appear twice (media query and attribute) because CSS cannot share one block
   between a media query and a selector without a preprocessor; keep the two in step. */

/* Non-colour tokens: identical in both themes. */
:root {
  --tt-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tt-radius-sm: 10.4px;   /* inputs, selects */
  --tt-radius-md: 16px;     /* buttons, balance cards, banners, segmented control */
  --tt-radius-lg: 21.6px;   /* grouped lists, panels, dashed empty states */
  --tt-radius-xl: 28.8px;   /* bottom sheet top corners */
  --tt-radius-pill: 999px;  /* balance pills, round icon buttons */
  --tt-radius-avatar: 14px; /* 43px list avatar; 13px at 40px, 12px logo tile at 39px */
  --tt-radius-tab: 12.5px;  /* segmented tab inside a 16px control with 4px padding */
  --tt-gutter: 16px;        /* page side padding */
  --tt-target: 44px;        /* minimum for icon buttons, tabs, compact buttons */
  --tt-target-button: 48px; /* standard button and select-like row */
  --tt-target-primary: 52px;/* sticky-bar primary action and text fields */
  --tt-bar-clearance: 110px;/* main bottom padding so the sticky bar never covers content */
}

/* Light (default). */
:root {
  --tt-cream: #FBF1E7;
  --tt-surface: #FFFDF9;
  --tt-soft: #FFF0E4;
  --tt-line: #E9D9CA;
  --tt-line-dashed: #E0C9B6;
  --tt-line-placeholder: #C9AE98;
  --tt-field-line: #A08068;
  --tt-field-bg: #FFFFFF;
  --tt-ink: #33241C;
  --tt-muted: #765D50;
  --tt-warm: #9A5F3D;
  --tt-accent: #EE8F5A;
  --tt-on-accent: #33241C;
  --tt-brand-tile: #EE8F5A;
  --tt-on-brand-tile: #FFFFFF;
  --tt-positive: #246A52;
  --tt-positive-bg: #E8F4EC;
  --tt-negative: #A94C38;
  --tt-negative-bg: #FBE9E3;
  --tt-neutral-bg: #F3E4D6;
  --tt-danger: #9D392D;
  --tt-danger-bg: #FBE9E3;
  --tt-toast-bg: #33241C;
  --tt-toast-fg: #FBF1E7;
  --tt-scrim: rgba(38, 24, 15, 0.52);
  --tt-shadow-card: 0 5.6px 24px rgba(75, 42, 23, 0.06);
  --tt-shadow-bar: 0 -5px 16px rgba(30, 20, 12, 0.05);
  --tt-shadow-sheet: 0 -11px 32px rgba(40, 24, 14, 0.18);
}

/* Dark by system preference, unless the user forced light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tt-cream: #211A17;
    --tt-surface: #30251F;
    --tt-soft: #4A3227;
    --tt-line: #5B4538;
    --tt-line-dashed: #6B5244;
    --tt-line-placeholder: #8A6E5E;
    --tt-field-line: #977A68;
    --tt-field-bg: #3A2D26;
    --tt-ink: #FFF2E7;
    --tt-muted: #D1B9A8;
    --tt-warm: #E8AA84;
    --tt-accent: #F3A06F;
    --tt-on-accent: #33241C;
    --tt-brand-tile: #EE8F5A;
    --tt-on-brand-tile: #FFFFFF;
    --tt-positive: #9ADDB8;
    --tt-positive-bg: #244436;
    --tt-negative: #FFA895;
    --tt-negative-bg: #542E28;
    --tt-neutral-bg: #3A2D26;
    --tt-danger: #FFB0A0;
    --tt-danger-bg: #542E28;
    --tt-toast-bg: #FFF2E7;
    --tt-toast-fg: #211A17;
    --tt-scrim: rgba(0, 0, 0, 0.7);
    --tt-shadow-card: 0 5.6px 24px rgba(0, 0, 0, 0.12);
    --tt-shadow-bar: 0 -5px 16px rgba(0, 0, 0, 0.2);
    --tt-shadow-sheet: 0 -11px 32px rgba(0, 0, 0, 0.4);
  }
}

/* Dark by manual choice. */
:root[data-theme="dark"] {
  --tt-cream: #211A17;
  --tt-surface: #30251F;
  --tt-soft: #4A3227;
  --tt-line: #5B4538;
  --tt-line-dashed: #6B5244;
  --tt-line-placeholder: #8A6E5E;
  --tt-field-line: #977A68;
  --tt-field-bg: #3A2D26;
  --tt-ink: #FFF2E7;
  --tt-muted: #D1B9A8;
  --tt-warm: #E8AA84;
  --tt-accent: #F3A06F;
  --tt-on-accent: #33241C;
  --tt-brand-tile: #EE8F5A;
  --tt-on-brand-tile: #FFFFFF;
  --tt-positive: #9ADDB8;
  --tt-positive-bg: #244436;
  --tt-negative: #FFA895;
  --tt-negative-bg: #542E28;
  --tt-neutral-bg: #3A2D26;
  --tt-danger: #FFB0A0;
  --tt-danger-bg: #542E28;
  --tt-toast-bg: #FFF2E7;
  --tt-toast-fg: #211A17;
  --tt-scrim: rgba(0, 0, 0, 0.7);
  --tt-shadow-card: 0 5.6px 24px rgba(0, 0, 0, 0.12);
  --tt-shadow-bar: 0 -5px 16px rgba(0, 0, 0, 0.2);
  --tt-shadow-sheet: 0 -11px 32px rgba(0, 0, 0, 0.4);
}

/* Light by manual choice (needed so a forced light wins over a dark system). */
:root[data-theme="light"] {
  --tt-cream: #FBF1E7;
  --tt-surface: #FFFDF9;
  --tt-soft: #FFF0E4;
  --tt-line: #E9D9CA;
  --tt-line-dashed: #E0C9B6;
  --tt-line-placeholder: #C9AE98;
  --tt-field-line: #A08068;
  --tt-field-bg: #FFFFFF;
  --tt-ink: #33241C;
  --tt-muted: #765D50;
  --tt-warm: #9A5F3D;
  --tt-accent: #EE8F5A;
  --tt-on-accent: #33241C;
  --tt-brand-tile: #EE8F5A;
  --tt-on-brand-tile: #FFFFFF;
  --tt-positive: #246A52;
  --tt-positive-bg: #E8F4EC;
  --tt-negative: #A94C38;
  --tt-negative-bg: #FBE9E3;
  --tt-neutral-bg: #F3E4D6;
  --tt-danger: #9D392D;
  --tt-danger-bg: #FBE9E3;
  --tt-toast-bg: #33241C;
  --tt-toast-fg: #FBF1E7;
  --tt-scrim: rgba(38, 24, 15, 0.52);
  --tt-shadow-card: 0 5.6px 24px rgba(75, 42, 23, 0.06);
  --tt-shadow-bar: 0 -5px 16px rgba(30, 20, 12, 0.05);
  --tt-shadow-sheet: 0 -11px 32px rgba(40, 24, 14, 0.18);
}

:root {
  color-scheme: light dark;
}
:root[data-theme="light"] {
  color-scheme: light;
}
:root[data-theme="dark"] {
  color-scheme: dark;
}