/* TransferDesk design tokens. The only place colours, spacing and type sizes are defined (docs/REDESIGN.md §4.1).
   The look: soft stone surfaces, deep emerald for action, lime only on ink (dark) surfaces. */
:root {
  /* Surfaces */
  --bg: #F5F6F3;
  --surface: #FFFFFF;
  --surface-2: #F8F9F7;
  --surface-3: #F0F2EE;
  --border: #E4E7E2;
  --border-strong: #CED3CC;

  /* Text */
  --text: #0E1513;
  --text-2: #48524D;
  --text-3: #5F6863;   /* 5.3:1 on --bg, 5.8:1 on white (AA) */

  /* One accent: deep emerald */
  --accent: #0E6B54;
  --accent-hover: #0A5643;
  --accent-soft: #E8F3EE;
  --accent-border: #BFDCCF;
  --on-accent: #FFFFFF;

  /* Lime: a highlight for ink surfaces only (never text on white) */
  --lime: #C6EF5A;
  --lime-soft: rgba(198, 239, 90, 0.14);
  --on-lime: #0B1210;

  /* Ink: the dark surfaces (landing hero, sign-in panel, call to action) */
  --ink: #0B1210;
  --ink-2: #111A17;
  --ink-3: #1A2521;
  --ink-border: #24302B;
  --ink-text: #E6ECE9;
  --ink-muted: #8F9C96;
  --ink-line: rgba(255, 255, 255, 0.08);
  --ink-fill: rgba(255, 255, 255, 0.04);
  --ink-glow: rgba(30, 158, 106, 0.30);
  --lime-hover: #D3F57D;
  --brand-emerald: #1E9E6A;   /* the back sheet of the mark */

  /* Sidebar (light) */
  --sidebar-bg: #FFFFFF;
  --sidebar-text: #2A332F;
  --sidebar-muted: #5F6863;
  --sidebar-active: #E8F3EE;
  --sidebar-hover: #F3F5F2;
  --sidebar-border: #E4E7E2;
  --sidebar-strong: #0E1513;
  --scrim: rgba(11, 18, 16, 0.45);

  /* Status tones: text, background, border */
  --ok: #08704A;         --ok-bg: #EBF7F0;         --ok-border: #B4E2C8;
  --warn: #9A4A06;       --warn-bg: #FEF6E7;       --warn-border: #F6D7A0;
  --danger: #B42318;     --danger-bg: #FDF1EF;     --danger-border: #F6CBC5;
  --danger-hover: #95190F;
  --info: #1F5B9E;       --info-bg: #EEF5FC;       --info-border: #C2DAF2;
  --muted: #48524D;      --muted-bg: #F0F2EE;      --muted-border: #E1E5DF;
  --restricted: #5B3CC4; --restricted-bg: #F4F2FD; --restricted-border: #D8D1F7;

  /* Status tones as solid fills, for bars, dots and charts */
  --ok-fill: #1E9E6A;
  --warn-fill: #E39B2D;
  --danger-fill: #E0533F;
  --info-fill: #3B82C9;
  --muted-fill: #A3ACA7;
  --restricted-fill: #7C5CE0;

  /* Chart series: one family, emerald first */
  --c1: #0E6B54;
  --c2: #5FB49C;
  --c3: #A9CF3A;
  --c4: #E0A43A;
  --c5: #6E7FD6;
  --c6: #D9644A;
  --c7: #8A938F;

  /* Spacing */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 48px;

  /* Radius */
  --r-sm: 6px;
  --r: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(14, 21, 19, 0.04);
  --shadow-sm: 0 1px 3px rgba(14, 21, 19, 0.07), 0 1px 2px rgba(14, 21, 19, 0.04);
  --shadow-md: 0 6px 16px -6px rgba(14, 21, 19, 0.12), 0 2px 4px -2px rgba(14, 21, 19, 0.05);
  --shadow-lg: 0 18px 40px -12px rgba(14, 21, 19, 0.18), 0 4px 8px -4px rgba(14, 21, 19, 0.06);

  /* Type */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 18px;
  --fs-xl: 20px;
  --fs-2xl: 26px;
  --fs-3xl: 30px;
  --fs-4xl: 40px;

  /* Layout */
  --sidebar-w: 256px;
  --topbar-h: 60px;
  --content-max: 1320px;
  --reading-max: 720px;
  --form-max: 640px;
  --focus: 0 0 0 3px rgba(14, 107, 84, 0.22);
  --focus-danger: 0 0 0 3px rgba(180, 35, 24, 0.16);
  --topbar-bg: rgba(255, 255, 255, 0.88);
  --logo-edge: transparent;
  /* A QR code stays dark on white in every look: phone cameras read it that way. */
  --qr-paper: #FFFFFF;
  --qr-ink: #101828;

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-1: 0.12s;
  --dur-2: 0.2s;
  --dur-3: 0.32s;
}

/* Dark: the person's choice (Account -> Preferences, or the user menu). The app layout sets data-theme on <html>;
   public pages set none, so they stay light. "system" follows the device. Both blocks hold the same values. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0A0F0D;
  --surface: #111816;
  --surface-2: #16201C;
  --surface-3: #1B2622;
  --border: #26322D;
  --border-strong: #34433C;
  --text: #E6ECE9;
  --text-2: #A9B5AF;
  --text-3: #85918B;
  --accent: #3CC495;
  --accent-hover: #52D0A5;
  --accent-soft: #15302A;
  --accent-border: #23503F;
  --on-accent: #04120C;
  --ink: #15201C;
  --ink-2: #1A2622;
  --ink-3: #22302B;
  --ink-border: #2E3D37;
  --sidebar-bg: #101815;
  --sidebar-text: #D5DDD9;
  --sidebar-muted: #85918B;
  --sidebar-active: #17322A;
  --sidebar-hover: #17211D;
  --sidebar-border: #222D29;
  --sidebar-strong: #F0F4F2;
  --scrim: rgba(0, 0, 0, 0.6);
  --ok: #5FD49B;         --ok-bg: #0F2A1F;         --ok-border: #1E4D38;
  --warn: #F2B460;       --warn-bg: #2D2010;       --warn-border: #5A3E16;
  --danger: #FF8E80;     --danger-bg: #2E1512;     --danger-border: #5C2620;
  --danger-hover: #FF7360;
  --info: #7DB5F0;       --info-bg: #102033;       --info-border: #1F3B5C;
  --muted: #A9B5AF;      --muted-bg: #1B2622;      --muted-border: #2A3631;
  --restricted: #B4A1FF; --restricted-bg: #1F1838; --restricted-border: #3A2F66;
  --ok-fill: #2DB37C;
  --warn-fill: #E9A940;
  --danger-fill: #EA6A57;
  --info-fill: #5A9BDB;
  --muted-fill: #6E7873;
  --restricted-fill: #9479EA;
  --c1: #3CC495;
  --c2: #7FD0B5;
  --c3: #B6DD4E;
  --c4: #EDB65A;
  --c5: #8C9BEA;
  --c6: #EB8068;
  --c7: #9AA49F;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 6px 16px -6px rgba(0, 0, 0, 0.55), 0 2px 4px -2px rgba(0, 0, 0, 0.30);
  --shadow-lg: 0 18px 40px -12px rgba(0, 0, 0, 0.65), 0 4px 8px -4px rgba(0, 0, 0, 0.35);
  --focus: 0 0 0 3px rgba(60, 196, 149, 0.35);
  --focus-danger: 0 0 0 3px rgba(255, 142, 128, 0.30);
  --topbar-bg: rgba(17, 24, 22, 0.86);
  --logo-edge: var(--ink-border);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    color-scheme: dark;
    --bg: #0A0F0D;
    --surface: #111816;
    --surface-2: #16201C;
    --surface-3: #1B2622;
    --border: #26322D;
    --border-strong: #34433C;
    --text: #E6ECE9;
    --text-2: #A9B5AF;
    --text-3: #85918B;
    --accent: #3CC495;
    --accent-hover: #52D0A5;
    --accent-soft: #15302A;
    --accent-border: #23503F;
    --on-accent: #04120C;
    --ink: #15201C;
    --ink-2: #1A2622;
    --ink-3: #22302B;
    --ink-border: #2E3D37;
    --sidebar-bg: #101815;
    --sidebar-text: #D5DDD9;
    --sidebar-muted: #85918B;
    --sidebar-active: #17322A;
    --sidebar-hover: #17211D;
    --sidebar-border: #222D29;
    --sidebar-strong: #F0F4F2;
    --scrim: rgba(0, 0, 0, 0.6);
    --ok: #5FD49B;         --ok-bg: #0F2A1F;         --ok-border: #1E4D38;
    --warn: #F2B460;       --warn-bg: #2D2010;       --warn-border: #5A3E16;
    --danger: #FF8E80;     --danger-bg: #2E1512;     --danger-border: #5C2620;
    --danger-hover: #FF7360;
    --info: #7DB5F0;       --info-bg: #102033;       --info-border: #1F3B5C;
    --muted: #A9B5AF;      --muted-bg: #1B2622;      --muted-border: #2A3631;
    --restricted: #B4A1FF; --restricted-bg: #1F1838; --restricted-border: #3A2F66;
    --ok-fill: #2DB37C;
    --warn-fill: #E9A940;
    --danger-fill: #EA6A57;
    --info-fill: #5A9BDB;
    --muted-fill: #6E7873;
    --restricted-fill: #9479EA;
    --c1: #3CC495;
    --c2: #7FD0B5;
    --c3: #B6DD4E;
    --c4: #EDB65A;
    --c5: #8C9BEA;
    --c6: #EB8068;
    --c7: #9AA49F;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-md: 0 6px 16px -6px rgba(0, 0, 0, 0.55), 0 2px 4px -2px rgba(0, 0, 0, 0.30);
    --shadow-lg: 0 18px 40px -12px rgba(0, 0, 0, 0.65), 0 4px 8px -4px rgba(0, 0, 0, 0.35);
    --focus: 0 0 0 3px rgba(60, 196, 149, 0.35);
    --focus-danger: 0 0 0 3px rgba(255, 142, 128, 0.30);
    --topbar-bg: rgba(17, 24, 22, 0.86);
    --logo-edge: var(--ink-border);
  }
}