/* ==========================================================================
   Gapboard — design tokens
   Values come from the Claude Design project (Gapboard Current / WeekBoardOG).
   Shared by the app (index.html, before app.css) and the public site
   (site/index.html), so both draw from one palette, light and dark.
   ========================================================================== */

:root {
  /* surfaces */
  --bg: #E3E4E6;
  --surface: #F1F1F2;
  --surface-2: #EDEDEF;
  --card: #FFFFFF;
  --field: #F5F5F6;
  --pill: #EFEFF1;

  /* lines */
  --line: #E1E2E5;
  --line-soft: #E4E5E8;
  --line-faint: #E9EAEC;
  --line-strong: #D2D4D8;
  --dash: #C9CBD0;

  /* text */
  --ink: #1F2430;
  --ink-2: #3F4550;
  --muted: #5C6270;
  --muted-2: #6B7280;
  --faint: #8A8F9A;
  --faint-2: #9AA0AA;

  /* accent */
  --accent: #4C2FBF;
  --accent-ink: #3B2A9E;
  --accent-line: #B7ADEB;
  --accent-soft: #EDEAFA;
  --today-bg: #FBFAFF;

  /* status */
  --ok: #1F6B4A;
  --ok-soft: #EAF3EE;
  --warn: #C0392B;
  --warn-soft: #FBE9E7;
  --warn-line: #E8C3BC;
  --warn-ink: #B4332A;

  /* text on the ink and accent buttons, and the hover behind a pill */
  --on-ink: #FFFFFF;
  --on-accent: #FFFFFF;
  --hover: #E5E5E8;
  --scrim: rgba(31, 36, 48, .18);
  --scrim-strong: rgba(31, 36, 48, .42);
  --quest-chip: #EDEAFA;
  --quest-chip-ink: #3B2A9E;
  --sunken: #EDEDEF;

  /* a card with no area — area colours themselves live on the board */
  --none: #9AA0AA;

  /* day strip fills */
  --deep: repeating-linear-gradient(135deg, #8B79E8 0 3px, #B9AEF2 3px 6px);
  --mtg: repeating-linear-gradient(135deg, #9AA0AA 0 3px, #C4C8CE 3px 6px);
  --lunch: #C9CBD0;
  --mtg-solid: #3B4B9E;
  --track: #E4E5E8;

  /* shape */
  --r-pill: 999px;
  --r-card: 10px;
  --r-panel: 14px;
  --r-sheet: 16px;
  --r-btn: 11px;
  --r-field: 10px;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .04);
  --shadow-raised: 0 1px 3px rgba(0, 0, 0, .06);
  --shadow-sheet: 0 22px 60px rgba(0, 0, 0, .28);
  --shadow-drawer: -8px 0 24px rgba(0, 0, 0, .08);

  --font: Recursive, ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  font-family: var(--font);
  color-scheme: light;
}

/*
 * Dark: surfaces step up from the page instead of casting shadows; area
 * colours hold, purple and green brighten to stay legible. Values from the
 * WeekBoardDark and QuestBoardDark designs. The same tokens are set twice —
 * once for an explicit choice, once for "system" following the device — so
 * every colour has exactly one light definition and one dark one.
 */
:root[data-theme="dark"] {
  --bg: #16181C;
  --surface: #2C3037;
  --surface-2: #1E2126;
  --card: #22252B;
  --field: #1E2126;
  --pill: #2C3037;

  --line: #34383F;
  --line-soft: #34383F;
  --line-faint: #2C3037;
  --line-strong: #3A3F48;
  --dash: #3A3F48;

  --ink: #ECEEF2;
  --ink-2: #C3C8D1;
  --muted: #A2A8B4;
  --muted-2: #A2A8B4;
  --faint: #7C828E;
  --faint-2: #9AA0AA;

  --accent: #7B5CF0;
  --accent-ink: #A78BFA;
  --accent-line: #5A4A9E;
  --accent-soft: #272148;
  --today-bg: #1E2028;

  --ok: #5FD19A;
  --ok-soft: #172A21;
  --warn: #E8705F;
  --warn-soft: #33211F;
  --warn-line: #4A2A26;
  --warn-ink: #F08B7B;

  --on-ink: #16181C;
  --on-accent: #14161A;
  --hover: #34383F;
  --scrim: rgba(0, 0, 0, .45);
  --scrim-strong: rgba(0, 0, 0, .6);
  --quest-chip: #272148;
  --quest-chip-ink: #A78BFA;
  --sunken: #1E2126;

  --none: #9AA0AA;
  --mtg: repeating-linear-gradient(135deg, #9AA0AA 0 3px, #C4C8CE 3px 6px);
  --lunch: #3A3F48;
  --track: #2C3037;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .2);
  --shadow-raised: 0 1px 3px rgba(0, 0, 0, .3);
  --shadow-sheet: 0 22px 60px rgba(0, 0, 0, .6);
  --shadow-drawer: -8px 0 24px rgba(0, 0, 0, .4);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #16181C;
    --surface: #2C3037;
    --surface-2: #1E2126;
    --card: #22252B;
    --field: #1E2126;
    --pill: #2C3037;

    --line: #34383F;
    --line-soft: #34383F;
    --line-faint: #2C3037;
    --line-strong: #3A3F48;
    --dash: #3A3F48;

    --ink: #ECEEF2;
    --ink-2: #C3C8D1;
    --muted: #A2A8B4;
    --muted-2: #A2A8B4;
    --faint: #7C828E;
    --faint-2: #9AA0AA;

    --accent: #7B5CF0;
    --accent-ink: #A78BFA;
    --accent-line: #5A4A9E;
    --accent-soft: #272148;
    --today-bg: #1E2028;

    --ok: #5FD19A;
    --ok-soft: #172A21;
    --warn: #E8705F;
    --warn-soft: #33211F;
    --warn-line: #4A2A26;
    --warn-ink: #F08B7B;

    --on-ink: #16181C;
    --on-accent: #14161A;
    --hover: #34383F;
    --scrim: rgba(0, 0, 0, .45);
    --scrim-strong: rgba(0, 0, 0, .6);
    --quest-chip: #272148;
    --quest-chip-ink: #A78BFA;
    --sunken: #1E2126;

    --none: #9AA0AA;
    --mtg: repeating-linear-gradient(135deg, #9AA0AA 0 3px, #C4C8CE 3px 6px);
    --lunch: #3A3F48;
    --track: #2C3037;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, .2);
    --shadow-raised: 0 1px 3px rgba(0, 0, 0, .3);
    --shadow-sheet: 0 22px 60px rgba(0, 0, 0, .6);
    --shadow-drawer: -8px 0 24px rgba(0, 0, 0, .4);
    color-scheme: dark;
}
}

/* ==========================================================================
   Accent colours: the same family of shades as the purple above — button,
   text, outline, wash, today's column, the deep-work stripes — in other hues,
   chosen in Settings → Appearance (ui/theme.js ACCENTS). Purple is the
   default and has no block. The 98 and XP looks keep their own colours.
   ========================================================================== */

:root[data-accent="blue"]:not([data-theme="98"]):not([data-theme="xp"]) {
  --accent: #2563EB; --accent-ink: #1D4ED8; --accent-line: #BFDBFE; --accent-soft: #E0EAFE; --today-bg: #F8FAFF;
  --quest-chip: #E0EAFE; --quest-chip-ink: #1D4ED8; --on-accent: #FFFFFF;
  --deep: repeating-linear-gradient(135deg, #6E9BF5 0 3px, #BCD3FB 3px 6px);
}
:root[data-accent="teal"]:not([data-theme="98"]):not([data-theme="xp"]) {
  --accent: #0F766E; --accent-ink: #115E59; --accent-line: #99E3DA; --accent-soft: #DDF4F1; --today-bg: #F7FCFB;
  --quest-chip: #DDF4F1; --quest-chip-ink: #115E59; --on-accent: #FFFFFF;
  --deep: repeating-linear-gradient(135deg, #4FB3A8 0 3px, #A8DDD6 3px 6px);
}
:root[data-accent="green"]:not([data-theme="98"]):not([data-theme="xp"]) {
  --accent: #15803D; --accent-ink: #166534; --accent-line: #ADE5C0; --accent-soft: #DFF3E6; --today-bg: #F8FCF9;
  --quest-chip: #DFF3E6; --quest-chip-ink: #166534; --on-accent: #FFFFFF;
  --deep: repeating-linear-gradient(135deg, #5CB57D 0 3px, #AEDDBD 3px 6px);
}
:root[data-accent="yellow"]:not([data-theme="98"]):not([data-theme="xp"]) {
  --accent: #A16207; --accent-ink: #854D0E; --accent-line: #F1D58A; --accent-soft: #F8EFD2; --today-bg: #FEFCF6;
  --quest-chip: #F8EFD2; --quest-chip-ink: #854D0E; --on-accent: #FFFFFF;
  --deep: repeating-linear-gradient(135deg, #D9A83A 0 3px, #EED8A0 3px 6px);
}
:root[data-accent="orange"]:not([data-theme="98"]):not([data-theme="xp"]) {
  --accent: #C2410C; --accent-ink: #9A3412; --accent-line: #F6C2A3; --accent-soft: #FBE7DC; --today-bg: #FFFAF7;
  --quest-chip: #FBE7DC; --quest-chip-ink: #9A3412; --on-accent: #FFFFFF;
  --deep: repeating-linear-gradient(135deg, #E57A45 0 3px, #F4C1A5 3px 6px);
}
:root[data-accent="red"]:not([data-theme="98"]):not([data-theme="xp"]) {
  --accent: #BE123C; --accent-ink: #9F1239; --accent-line: #F5B6C3; --accent-soft: #FCE4E9; --today-bg: #FFF7F9;
  --quest-chip: #FCE4E9; --quest-chip-ink: #9F1239; --on-accent: #FFFFFF;
  --deep: repeating-linear-gradient(135deg, #E26A82 0 3px, #F3B7C4 3px 6px);
}
:root[data-accent="pink"]:not([data-theme="98"]):not([data-theme="xp"]) {
  --accent: #BE185D; --accent-ink: #9D174D; --accent-line: #F5B8D3; --accent-soft: #FCE4EF; --today-bg: #FFF8FB;
  --quest-chip: #FCE4EF; --quest-chip-ink: #9D174D; --on-accent: #FFFFFF;
  --deep: repeating-linear-gradient(135deg, #E06A9C 0 3px, #F3B8D1 3px 6px);
}
:root[data-accent="blue"][data-theme="dark"]:not([data-theme="98"]):not([data-theme="xp"]) {
  --accent: #5B8DEF; --accent-ink: #93B4F7; --accent-line: #2C4A85; --accent-soft: #1A2540; --today-bg: #1B2029;
  --quest-chip: #1A2540; --quest-chip-ink: #93B4F7; --on-accent: #14161A;
}
:root[data-accent="teal"][data-theme="dark"]:not([data-theme="98"]):not([data-theme="xp"]) {
  --accent: #2DB3A3; --accent-ink: #6FD1C4; --accent-line: #1F5E57; --accent-soft: #142B29; --today-bg: #1A2224;
  --quest-chip: #142B29; --quest-chip-ink: #6FD1C4; --on-accent: #14161A;
}
:root[data-accent="green"][data-theme="dark"]:not([data-theme="98"]):not([data-theme="xp"]) {
  --accent: #3DBA6B; --accent-ink: #7FD69D; --accent-line: #255E3A; --accent-soft: #15291D; --today-bg: #1A221D;
  --quest-chip: #15291D; --quest-chip-ink: #7FD69D; --on-accent: #14161A;
}
:root[data-accent="yellow"][data-theme="dark"]:not([data-theme="98"]):not([data-theme="xp"]) {
  --accent: #D6A632; --accent-ink: #E8C66B; --accent-line: #6B5320; --accent-soft: #2B2414; --today-bg: #22201A;
  --quest-chip: #2B2414; --quest-chip-ink: #E8C66B; --on-accent: #14161A;
}
:root[data-accent="orange"][data-theme="dark"]:not([data-theme="98"]):not([data-theme="xp"]) {
  --accent: #E8743A; --accent-ink: #F2A273; --accent-line: #7A3E22; --accent-soft: #2E1E16; --today-bg: #241D1A;
  --quest-chip: #2E1E16; --quest-chip-ink: #F2A273; --on-accent: #14161A;
}
:root[data-accent="red"][data-theme="dark"]:not([data-theme="98"]):not([data-theme="xp"]) {
  --accent: #E5566F; --accent-ink: #F08A9C; --accent-line: #7A2F3B; --accent-soft: #2E1A1E; --today-bg: #241B1D;
  --quest-chip: #2E1A1E; --quest-chip-ink: #F08A9C; --on-accent: #14161A;
}
:root[data-accent="pink"][data-theme="dark"]:not([data-theme="98"]):not([data-theme="xp"]) {
  --accent: #E0609A; --accent-ink: #EE93BB; --accent-line: #7A3155; --accent-soft: #2D1A24; --today-bg: #241B21;
  --quest-chip: #2D1A24; --quest-chip-ink: #EE93BB; --on-accent: #14161A;
}
@media (prefers-color-scheme: dark) {
  :root[data-accent="blue"]:not([data-theme="light"]):not([data-theme="98"]):not([data-theme="xp"]) {
    --accent: #5B8DEF; --accent-ink: #93B4F7; --accent-line: #2C4A85; --accent-soft: #1A2540; --today-bg: #1B2029;
    --quest-chip: #1A2540; --quest-chip-ink: #93B4F7; --on-accent: #14161A;
  }
  :root[data-accent="teal"]:not([data-theme="light"]):not([data-theme="98"]):not([data-theme="xp"]) {
    --accent: #2DB3A3; --accent-ink: #6FD1C4; --accent-line: #1F5E57; --accent-soft: #142B29; --today-bg: #1A2224;
    --quest-chip: #142B29; --quest-chip-ink: #6FD1C4; --on-accent: #14161A;
  }
  :root[data-accent="green"]:not([data-theme="light"]):not([data-theme="98"]):not([data-theme="xp"]) {
    --accent: #3DBA6B; --accent-ink: #7FD69D; --accent-line: #255E3A; --accent-soft: #15291D; --today-bg: #1A221D;
    --quest-chip: #15291D; --quest-chip-ink: #7FD69D; --on-accent: #14161A;
  }
  :root[data-accent="yellow"]:not([data-theme="light"]):not([data-theme="98"]):not([data-theme="xp"]) {
    --accent: #D6A632; --accent-ink: #E8C66B; --accent-line: #6B5320; --accent-soft: #2B2414; --today-bg: #22201A;
    --quest-chip: #2B2414; --quest-chip-ink: #E8C66B; --on-accent: #14161A;
  }
  :root[data-accent="orange"]:not([data-theme="light"]):not([data-theme="98"]):not([data-theme="xp"]) {
    --accent: #E8743A; --accent-ink: #F2A273; --accent-line: #7A3E22; --accent-soft: #2E1E16; --today-bg: #241D1A;
    --quest-chip: #2E1E16; --quest-chip-ink: #F2A273; --on-accent: #14161A;
  }
  :root[data-accent="red"]:not([data-theme="light"]):not([data-theme="98"]):not([data-theme="xp"]) {
    --accent: #E5566F; --accent-ink: #F08A9C; --accent-line: #7A2F3B; --accent-soft: #2E1A1E; --today-bg: #241B1D;
    --quest-chip: #2E1A1E; --quest-chip-ink: #F08A9C; --on-accent: #14161A;
  }
  :root[data-accent="pink"]:not([data-theme="light"]):not([data-theme="98"]):not([data-theme="xp"]) {
    --accent: #E0609A; --accent-ink: #EE93BB; --accent-line: #7A3155; --accent-soft: #2D1A24; --today-bg: #241B21;
    --quest-chip: #2D1A24; --quest-chip-ink: #EE93BB; --on-accent: #14161A;
  }
}