/* LUMA design tokens (SPEC D13). The only file with raw colour values.
   Themes (data-theme) x modes (data-mode) set colour roles; every other file uses the roles.
   The contrast of every text and UI pair is checked by tests/js/contrast.test.cjs. */
@layer tokens, base, layout, components, features, utilities;

@layer tokens {
  :root {
    color-scheme: light;
    --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;

    /* Type scale x text size (Normal 1.0, Gross 1.15, Sehr gross 1.3); the floor is 13 px, 15 px on the wall. */
    --text-scale: 1;
    --text-floor: 13px;
    --text-xs: max(var(--text-floor), calc(13px * var(--text-scale)));
    --text-sm: max(var(--text-floor), calc(14px * var(--text-scale)));
    --text-md: max(var(--text-floor), calc(16px * var(--text-scale)));
    --text-lg: calc(20px * var(--text-scale));
    --text-xl: calc(26px * var(--text-scale));
    --text-2xl: calc(34px * var(--text-scale));
    --text-display: calc(56px * var(--text-scale));
    --weight-regular: 500;
    --weight-bold: 700;
    --weight-heavy: 800;
    --tracking-eyebrow: 0.08em;

    /* Space: 4-pt scale. */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;

    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-pill: 999px;
    --tap-min: 48px;
    --focus-ring: 3px;

    --duration-fast: 120ms;
    --duration-normal: 220ms;
    --ease: cubic-bezier(0.2, 0, 0, 1);

    --header-height: 64px;
    --rail-width: 96px;
    --bar-height: 72px;

    /* QR codes stay dark on white in every theme and mode (scanners need the contrast). */
    --color-qr-bg: #ffffff;
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --duration-fast: 0ms;
      --duration-normal: 0ms;
    }
  }

  /* Wall tablets: larger floor and a larger body/heading scale (read from 1-2 m); Home fits itself to
     the viewport whatever the sizes (features/home/index.js fitSide). */
  :root[data-device='wall'] {
    --text-floor: 15px;
    --wall-scale: 1.15;
    --text-md: max(var(--text-floor), calc(16px * var(--text-scale) * var(--wall-scale)));
    --text-lg: calc(20px * var(--text-scale) * var(--wall-scale));
    --text-xl: calc(26px * var(--text-scale) * var(--wall-scale));
  }
  :root[data-text-scale='1.15'] { --text-scale: 1.15; }
  :root[data-text-scale='1.3'] { --text-scale: 1.3; }

  /* ---------------------------------------------------------------- Morgenlicht (default) */
  :root[data-theme='morgenlicht'][data-mode='light'] {
    --color-bg: #f2f4ef;
    --color-bg-glow: #dcebe2;
    --color-surface: #fffefb;
    --color-surface-2: #edf2ed;
    --color-line: #dce4dc;
    --color-field-border: #6b7a72;
    --color-text: #25332f;
    --color-text-muted: #556860;
    --color-accent: #25634c;
    --color-accent-soft: #d9eade;
    --color-on-accent: #ffffff;
    --color-danger: #a8322a;
    --color-warning: #8a5a00;
    --color-warning-soft: #fbefd6;
    --color-success: #2a6a43;
    --color-focus: #1d5fb8;
    --color-shadow: #273d3014;
    --color-scrim: #18211e66;
  }
  :root[data-theme='morgenlicht'][data-mode='dark'] {
    color-scheme: dark;
    --color-bg: #18211e;
    --color-bg-glow: #25382e;
    --color-surface: #242e2a;
    --color-surface-2: #303e36;
    --color-line: #3b4841;
    --color-field-border: #8a9a92;
    --color-text: #edf2ef;
    --color-text-muted: #b1bfb8;
    --color-accent: #a7d6bc;
    --color-accent-soft: #35503f;
    --color-on-accent: #13201a;
    --color-danger: #f2a49b;
    --color-warning: #f0c97a;
    --color-warning-soft: #4a3a1c;
    --color-success: #9fd8b2;
    --color-focus: #8ab8f5;
    --color-shadow: #00000033;
    --color-scrim: #000000a0;
  }
  :root[data-theme='morgenlicht'][data-mode='night'] {
    color-scheme: dark;
    --color-bg: #050807;
    --color-bg-glow: #050807;
    --color-surface: #0b110f;
    --color-surface-2: #121a17;
    --color-line: #1d2824;
    --color-field-border: #5e6f67;
    --color-text: #a9bab2;
    --color-text-muted: #7f938a;
    --color-accent: #7fae95;
    --color-accent-soft: #17251e;
    --color-on-accent: #050807;
    --color-danger: #d48b83;
    --color-warning: #c9a868;
    --color-warning-soft: #1f1a0f;
    --color-success: #7fae95;
    --color-focus: #6f98cc;
    --color-shadow: #00000000;
    --color-scrim: #000000c0;
  }

  /* ---------------------------------------------------------------- Papier (warm paper) */
  :root[data-theme='papier'][data-mode='light'] {
    --color-bg: #f5f0e6;
    --color-bg-glow: #efe3cf;
    --color-surface: #fffdf8;
    --color-surface-2: #f1ebdf;
    --color-line: #e3dacb;
    --color-field-border: #7a6f5f;
    --color-text: #33291f;
    --color-text-muted: #63574a;
    --color-accent: #8a4b14;
    --color-accent-soft: #f2e2cc;
    --color-on-accent: #ffffff;
    --color-danger: #a8322a;
    --color-warning: #82560a;
    --color-warning-soft: #f8ebd2;
    --color-success: #3d6630;
    --color-focus: #1d5fb8;
    --color-shadow: #3d2e1a14;
    --color-scrim: #2a211866;
  }
  :root[data-theme='papier'][data-mode='dark'] {
    color-scheme: dark;
    --color-bg: #1d1915;
    --color-bg-glow: #2d251c;
    --color-surface: #2a241e;
    --color-surface-2: #362f27;
    --color-line: #463d33;
    --color-field-border: #9a8d7c;
    --color-text: #f3ece2;
    --color-text-muted: #c4b8a8;
    --color-accent: #e9b98a;
    --color-accent-soft: #4c3a28;
    --color-on-accent: #1d1915;
    --color-danger: #f2a49b;
    --color-warning: #f0c97a;
    --color-warning-soft: #4a3a1c;
    --color-success: #b5d7a3;
    --color-focus: #8ab8f5;
    --color-shadow: #00000033;
    --color-scrim: #000000a0;
  }
  :root[data-theme='papier'][data-mode='night'] {
    color-scheme: dark;
    --color-bg: #080605;
    --color-bg-glow: #080605;
    --color-surface: #110e0b;
    --color-surface-2: #1a1611;
    --color-line: #2a231c;
    --color-field-border: #6f6355;
    --color-text: #bcae9d;
    --color-text-muted: #908371;
    --color-accent: #c09670;
    --color-accent-soft: #241b13;
    --color-on-accent: #080605;
    --color-danger: #d48b83;
    --color-warning: #c9a868;
    --color-warning-soft: #1f1a0f;
    --color-success: #9fbb8f;
    --color-focus: #6f98cc;
    --color-shadow: #00000000;
    --color-scrim: #000000c0;
  }

  /* ---------------------------------------------------------------- Himmel (cool blue) */
  :root[data-theme='himmel'][data-mode='light'] {
    --color-bg: #eef3f9;
    --color-bg-glow: #dce8f6;
    --color-surface: #fcfdff;
    --color-surface-2: #e6eef7;
    --color-line: #d6e0ec;
    --color-field-border: #66768a;
    --color-text: #1f2b3a;
    --color-text-muted: #4f5f73;
    --color-accent: #1f5a8f;
    --color-accent-soft: #d8e6f5;
    --color-on-accent: #ffffff;
    --color-danger: #a8322a;
    --color-warning: #82560a;
    --color-warning-soft: #f8ebd2;
    --color-success: #2a6a43;
    --color-focus: #6b3fb0;
    --color-shadow: #1f2b3a14;
    --color-scrim: #141c2666;
  }
  :root[data-theme='himmel'][data-mode='dark'] {
    color-scheme: dark;
    --color-bg: #141b24;
    --color-bg-glow: #1d2a3a;
    --color-surface: #1f2833;
    --color-surface-2: #2a3542;
    --color-line: #37434f;
    --color-field-border: #8796a8;
    --color-text: #eaf0f7;
    --color-text-muted: #b2bfcd;
    --color-accent: #9cc7f0;
    --color-accent-soft: #2d4560;
    --color-on-accent: #101820;
    --color-danger: #f2a49b;
    --color-warning: #f0c97a;
    --color-warning-soft: #4a3a1c;
    --color-success: #9fd8b2;
    --color-focus: #d1b0ff;
    --color-shadow: #00000033;
    --color-scrim: #000000a0;
  }
  :root[data-theme='himmel'][data-mode='night'] {
    color-scheme: dark;
    --color-bg: #04070a;
    --color-bg-glow: #04070a;
    --color-surface: #0a0f15;
    --color-surface-2: #111821;
    --color-line: #1c2632;
    --color-field-border: #5f6f80;
    --color-text: #a7b6c6;
    --color-text-muted: #7d8da0;
    --color-accent: #7fa6cc;
    --color-accent-soft: #131e2a;
    --color-on-accent: #04070a;
    --color-danger: #d48b83;
    --color-warning: #c9a868;
    --color-warning-soft: #1f1a0f;
    --color-success: #7fae95;
    --color-focus: #a98fd6;
    --color-shadow: #00000000;
    --color-scrim: #000000c0;
  }

  /* ---------------------------------------------------------------- member colours 1..8
     Each: a tint (-bg) and an ink with >= 4.5:1 on its tint and on every theme's surface. */
  :root[data-mode='light'] {
    --member-1-bg: #dcefe3; --member-1-ink: #1f5c3d;
    --member-2-bg: #f8e1e7; --member-2-ink: #8a2846;
    --member-3-bg: #f6e8cc; --member-3-ink: #6f4508;
    --member-4-bg: #dde9f7; --member-4-ink: #1d4f86;
    --member-5-bg: #e9e2f6; --member-5-ink: #553090;
    --member-6-bg: #d4eeec; --member-6-ink: #125955;
    --member-7-bg: #fbe3d9; --member-7-ink: #8a3815;
    --member-8-bg: #e3e7ec; --member-8-ink: #39465a;
  }
  :root[data-mode='dark'] {
    --member-1-bg: #234231; --member-1-ink: #bfe8cd;
    --member-2-bg: #4a2532; --member-2-ink: #f6c3d1;
    --member-3-bg: #463415; --member-3-ink: #f2d8a2;
    --member-4-bg: #1f3651; --member-4-ink: #c0d9f5;
    --member-5-bg: #35284f; --member-5-ink: #d9cbf5;
    --member-6-bg: #173f3d; --member-6-ink: #b3e6e1;
    --member-7-bg: #4a2a1c; --member-7-ink: #f6c8b3;
    --member-8-bg: #333a45; --member-8-ink: #d3dae4;
  }
  :root[data-mode='night'] {
    --member-1-bg: #10201a; --member-1-ink: #8fb9a0;
    --member-2-bg: #221319; --member-2-ink: #c99aa8;
    --member-3-bg: #211a0d; --member-3-ink: #c4ab7c;
    --member-4-bg: #111b28; --member-4-ink: #92abc8;
    --member-5-bg: #191427; --member-5-ink: #ab9dcb;
    --member-6-bg: #0d1f1e; --member-6-ink: #87b6b1;
    --member-7-bg: #221510; --member-7-ink: #c79d8a;
    --member-8-bg: #171b21; --member-8-ink: #a2abb8;
  }
}