/* Design tokens (M1). Light theme by default, dark via prefers-color-scheme (UI-4).
   Everything visual is expressed through these custom properties. */

:root {
  color-scheme: light dark;

  /* Type: system stack only (UI-3) */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-md: 0.9375rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --leading: 1.45;
  --tracking-caps: 0.07em;

  /* Paper & ink */
  --paper: #f5f3ee;
  --paper-sunken: #ebe8e1;
  --surface: #ffffff;
  --surface-raised: #fbfaf7;
  --ink: #1f1d1a;
  --ink-muted: #5d5850;
  --ink-subtle: #8b857b;
  --line: #e3dfd6;
  --line-strong: #cec8bc;
  --scrim: rgb(24 21 17 / 0.48);

  /* Accents */
  --accent: #2b50d8;
  --accent-hover: #2142b9;
  --accent-soft: #e8ecfc;
  --accent-ink: #1d3aa6;
  --on-accent: #ffffff;
  --brand: #e4572e;
  --brand-ink: #ffffff;
  --focus: #2b50d8;

  /* Status */
  --danger: #c4352b;
  --danger-hover: #a72a21;
  --danger-soft: #fbe8e5;
  --on-danger: #ffffff;
  --warn: #9a5b00;
  --warn-soft: #fff0d3;
  --ok: #1d7448;
  --ok-soft: #e0f3e8;

  /* Board surfaces */
  --column-bg: rgb(246 244 239 / 0.8);
  --column-edge: rgb(255 255 255 / 0.6);
  --column-text: var(--ink);
  --card-bg: #ffffff;
  --card-shadow: 0 1px 0 rgb(31 29 26 / 0.06), 0 1px 3px rgb(31 29 26 / 0.1);
  --card-shadow-hover: 0 2px 0 rgb(31 29 26 / 0.05), 0 6px 14px rgb(31 29 26 / 0.14);
  --card-shadow-drag: 0 18px 36px rgb(31 29 26 / 0.28), 0 3px 8px rgb(31 29 26 / 0.18);
  --glass: rgb(20 18 15 / 0.28);
  --glass-strong: rgb(20 18 15 / 0.42);
  --glass-edge: rgb(255 255 255 / 0.18);
  --on-glass: #ffffff;
  --board-dim: transparent;

  /* Shape & depth */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  --shadow-pop: 0 12px 32px rgb(31 29 26 / 0.18), 0 2px 6px rgb(31 29 26 / 0.08);
  --shadow-modal: 0 24px 64px rgb(20 18 15 / 0.32);

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

  /* Sizes */
  --touch: 44px;
  --control: 36px;
  --topbar: 52px;
  --column-width: 284px;
  --column-width-phone: 85vw;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --fast: 120ms;
  --medium: 220ms;

  /* Safe areas (PWA-3) */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  /* Film grain laid over board backgrounds (a data: image; CSP img-src allows data:) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Label palette (LBL-1): soft tint + strong ink, readable in both themes */
  --label-red-bg: #fde0dc;     --label-red-fg: #a3271e;
  --label-orange-bg: #ffe4cc;  --label-orange-fg: #9c4a05;
  --label-yellow-bg: #fff1b8;  --label-yellow-fg: #7a5a00;
  --label-green-bg: #d8f2dc;   --label-green-fg: #1f6b35;
  --label-teal-bg: #ccf0ec;    --label-teal-fg: #0d6660;
  --label-blue-bg: #d9e8ff;    --label-blue-fg: #1c4f9c;
  --label-indigo-bg: #e1e2ff;  --label-indigo-fg: #3a3aa6;
  --label-purple-bg: #efdcfb;  --label-purple-fg: #6c2a91;
  --label-pink-bg: #fcdcec;    --label-pink-fg: #9a215c;
  --label-gray-bg: #e8e5df;    --label-gray-fg: #4f4b44;

  /* Avatar palette: colored initials */
  --avatar-1: #c4532b;
  --avatar-2: #b0761a;
  --avatar-3: #4f8a2b;
  --avatar-4: #1e8a7a;
  --avatar-5: #2b6cc4;
  --avatar-6: #5b4fc4;
  --avatar-7: #9b3fae;
  --avatar-8: #b83a6c;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #141519;
    --paper-sunken: #2b2e37; /* subtle fill; lighter than --surface in dark mode */
    --surface: #1e2027;
    --surface-raised: #252830;
    --ink: #ecebe6;
    --ink-muted: #b1ada4;
    --ink-subtle: #827e76;
    --line: #2d3039;
    --line-strong: #3d414c;
    --scrim: rgb(0 0 0 / 0.6);

    --accent: #7d97ff;
    --accent-hover: #98adff;
    --accent-soft: #232b4a;
    --accent-ink: #b4c3ff;
    --on-accent: #0c1022;
    --focus: #98adff;

    --danger: #ff7a6c;
    --danger-hover: #ff9488;
    --danger-soft: #3e1d1a;
    --on-danger: #1f0907;
    --warn: #f0b44c;
    --warn-soft: #3a2a0e;
    --ok: #5fcf92;
    --ok-soft: #15301f;

    --column-bg: rgb(17 18 22 / 0.74);
    --column-edge: rgb(255 255 255 / 0.07);
    --card-bg: #23262e;
    --card-shadow: 0 1px 0 rgb(0 0 0 / 0.3), 0 1px 3px rgb(0 0 0 / 0.35);
    --card-shadow-hover: 0 2px 0 rgb(0 0 0 / 0.3), 0 6px 16px rgb(0 0 0 / 0.45);
    --card-shadow-drag: 0 18px 40px rgb(0 0 0 / 0.6), 0 3px 8px rgb(0 0 0 / 0.4);
    --glass: rgb(0 0 0 / 0.32);
    --glass-strong: rgb(0 0 0 / 0.5);
    --glass-edge: rgb(255 255 255 / 0.1);
    --board-dim: rgb(0 0 0 / 0.34);
    --shadow-pop: 0 12px 32px rgb(0 0 0 / 0.5), 0 2px 6px rgb(0 0 0 / 0.3);
    --shadow-modal: 0 24px 64px rgb(0 0 0 / 0.6);

    --label-red-bg: #4a1f1b;     --label-red-fg: #ffb3aa;
    --label-orange-bg: #4a2a12;  --label-orange-fg: #ffc590;
    --label-yellow-bg: #43380f;  --label-yellow-fg: #f5dc7a;
    --label-green-bg: #1b3a23;   --label-green-fg: #9fe0ae;
    --label-teal-bg: #133a37;    --label-teal-fg: #8de0d6;
    --label-blue-bg: #1a2d4d;    --label-blue-fg: #a6c8ff;
    --label-indigo-bg: #262750;  --label-indigo-fg: #c0c2ff;
    --label-purple-bg: #36214a;  --label-purple-fg: #ddb5f7;
    --label-pink-bg: #47203a;    --label-pink-fg: #f8b2d4;
    --label-gray-bg: #33353c;    --label-gray-fg: #cdc9c1;
  }
}

/* Board background presets (BRD-3): layered mesh gradients, no images. */
.bg-lagoon {
  --board-bg: radial-gradient(100% 90% at 100% 0%, #6fdcc9 0%, transparent 55%),
    radial-gradient(90% 90% at 0% 100%, #1d48b8 0%, transparent 62%),
    linear-gradient(135deg, #2aa0b4 0%, #2a62c6 100%);
  --board-tint: #2a7fbd;
}
.bg-ember {
  --board-bg: radial-gradient(100% 90% at 100% 0%, #ffbf73 0%, transparent 55%),
    radial-gradient(90% 90% at 0% 100%, #b52a58 0%, transparent 60%),
    linear-gradient(135deg, #f27a3d 0%, #d6435c 100%);
  --board-tint: #e05a4b;
}
.bg-moss {
  --board-bg: radial-gradient(100% 90% at 100% 0%, #c3d987 0%, transparent 55%),
    radial-gradient(90% 90% at 0% 100%, #1f5a45 0%, transparent 60%),
    linear-gradient(135deg, #7aa35a 0%, #3a7559 100%);
  --board-tint: #568c58;
}
.bg-dusk {
  --board-bg: radial-gradient(90% 80% at 100% 0%, #f5a37e 0%, transparent 55%),
    radial-gradient(100% 90% at 0% 100%, #2a2775 0%, transparent 60%),
    linear-gradient(135deg, #8d4f9b 0%, #43399a 100%);
  --board-tint: #6a4598;
}
.bg-sand {
  --board-bg: radial-gradient(90% 80% at 100% 0%, #f3d9a4 0%, transparent 55%),
    radial-gradient(90% 90% at 0% 100%, #8f5328 0%, transparent 60%),
    linear-gradient(135deg, #c99456 0%, #b0723f 100%);
  --board-tint: #b47a45;
}
.bg-glacier {
  --board-bg: radial-gradient(90% 80% at 100% 0%, #d6ebf7 0%, transparent 55%),
    radial-gradient(90% 90% at 0% 100%, #33558f 0%, transparent 60%),
    linear-gradient(135deg, #6f9fc8 0%, #4b72a8 100%);
  --board-tint: #5b84b6;
}
.bg-orchard {
  --board-bg: radial-gradient(100% 90% at 100% 0%, #ecdf6d 0%, transparent 55%),
    radial-gradient(90% 90% at 0% 100%, #1f8a76 0%, transparent 60%),
    linear-gradient(135deg, #a7cc58 0%, #3ba487 100%);
  --board-tint: #5eaa6f;
}
.bg-berry {
  --board-bg: radial-gradient(100% 90% at 100% 0%, #f687bb 0%, transparent 55%),
    radial-gradient(90% 90% at 0% 100%, #5c1850 0%, transparent 60%),
    linear-gradient(135deg, #c8468a 0%, #7d2565 100%);
  --board-tint: #a83479;
}
.bg-graphite {
  --board-bg: radial-gradient(100% 90% at 100% 0%, #7d8898 0%, transparent 55%),
    radial-gradient(90% 90% at 0% 100%, #1d222b 0%, transparent 60%),
    linear-gradient(135deg, #4c5564 0%, #2b313b 100%);
  --board-tint: #4a5260;
}
.bg-night {
  --board-bg: radial-gradient(90% 80% at 100% 0%, #3f63b5 0%, transparent 55%),
    radial-gradient(100% 90% at 0% 100%, #0a1029 0%, transparent 60%),
    linear-gradient(135deg, #22306a 0%, #101838 100%);
  --board-tint: #24336a;
}