/**
 * Forefront — design tokens.
 *
 * Every colour, size and spacing value in the application is named here. No
 * component stylesheet contains a literal colour. Dropping in a completely
 * different professional palette should mean editing this file and nothing
 * else.
 *
 * Two themes: light, and the dark block near the foot of this file. Every token
 * that carries colour is defined in both. Nothing else about the app changes —
 * no layout, no type, no hierarchy — so a screenshot of one is the other with
 * the lights off.
 *
 * Contrast: every text token clears WCAG AA (4.5:1) against EVERY surface it
 * can land on — white, the page, the subtle surface, the hover fill, the two
 * meaning washes and all five weekly washes — not merely against white. Worst
 * case of that set, in light:
 *
 *   --text-primary    #172033   14.6:1
 *   --text-secondary  #475569    6.8:1
 *   --text-muted      #55637a    5.5:1
 *   --text-faint      #5f6d80    4.7:1
 *
 * There is deliberately no sub-AA tier. An earlier draft had one, annotated
 * "decoration only, never information", and then used it for dates, counts,
 * hints and a button label — which is how that kind of token always ends up
 * being used. Quietness here comes from size and weight instead.
 *
 * Two themes × five accent families × every surface is several hundred pairs,
 * which is more than anyone will re-check by hand after nudging one hex, so it
 * is checked mechanically:  node tools/check-contrast.js
 */

:root {
  /* Tells the browser to render form controls, scrollbars and the <dialog>
     backdrop to match. Without it, dark mode has light scrollbars. */
  color-scheme: light;

  /* ---- Surfaces ---------------------------------------------------- */
  --bg-page:           #eef1f7;
  --bg-surface:        #ffffff;
  --bg-surface-subtle: #e6ebf3;
  --bg-overlay:        rgba(20, 28, 45, 0.30);

  /* The fill under a hovered button, count or menu row. Separate from
     --bg-surface-subtle, which it matches exactly here, because the two want
     opposite things in dark: a recessed panel goes darker, a hover goes
     lighter. Sharing one token made hovering a card's menu row dim it. */
  --bg-hover:          #e2e8f2;

  /* ---- Text -------------------------------------------------------- */
  --text-primary:   #1a2436;
  --text-secondary: #465369;
  --text-muted:     #545f75;
  --text-faint:     #5b677d;
  --text-inverse:   #ffffff;

  /* ---- Accents ----------------------------------------------------- *
   * Overridden per week by the [data-accent] blocks at the foot of this
   * file. Only these four move; everything above stays fixed so that
   * contrast and hierarchy never change with the week.                  */
  --accent-primary:   #3d5a80;
  --accent-strong:    #2d4562;
  --accent-secondary: #6a4a58;
  --focus-wash:       #f2f5fb;

  /* ---- Lines and depth --------------------------------------------- */
  --border-subtle:  #dee4ef;
  --border-muted:   #cad2e0;
  --border-strong:  #aab4c6;

  /* The soft halo on a focused text field. Kept out of the weekly rotation:
     it is three translucent pixels and nobody will ever notice it change hue,
     but every family would need a value and one of them would drift. */
  --ring:           rgba(61, 90, 128, 0.16);
  --shadow-card:    0 1px 2px rgba(20, 28, 45, 0.06);
  --shadow-raised:  0 2px 5px rgba(20, 28, 45, 0.08);
  --shadow-drag:    0 10px 26px rgba(20, 28, 45, 0.18);
  --shadow-dialog:  0 18px 48px rgba(20, 28, 45, 0.22);

  /* ---- Meaning ----------------------------------------------------- */
  --danger:      #97303c;
  --danger-wash: #fbf2f3;
  --ok:          #2c6a51;
  --warn:        #825c19;
  --warn-wash:   #fbf6ed;

  /* ---- Type -------------------------------------------------------- *
   * A system stack. Segoe UI on Windows 11, SF on macOS. No web fonts,
   * so nothing to download and nothing to fail offline.                 */
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
             "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --size-xs:  0.6875rem;   /* 11px — ages, counts             */
  --size-sm:  0.8125rem;   /* 13px — secondary labels         */
  --size-md:  0.9375rem;   /* 15px — card titles, body        */
  --size-lg:  1.0625rem;   /* 17px — lane headings            */
  --size-input: 1.25rem;   /* 20px — Quick Capture, still note-sized  */
  --size-xl:  1.5rem;      /* 24px — commitments              */
  --size-2xl: 1.875rem;    /* 30px — commitments, roomy       */

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semi:   600;

  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.14em;

  /* ---- Space ------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 8px;

  /* ---- Board geometry ---------------------------------------------- */
  --lane-base-width: 17.5rem;
  --lane-gap: var(--space-4);
  --board-max: 96rem;
  --focus-max: 62rem;
  --focus-aside: 15.5rem;

  /* ---- Motion ------------------------------------------------------ */
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
  --dur-fast: 90ms;
  --dur-normal: 160ms;
  --dur-view: 220ms;
}

/**
 * Weekly accent families.
 *
 * One is chosen from the calendar week number, so Forefront looks very slightly
 * different on Monday than it did the Monday before, and identical all week on
 * every machine. Nothing moves and no text changes contrast — only the accent
 * hue and the wash behind Focus. It is enough to stop the page becoming
 * wallpaper and not enough to notice as a "theme".
 *
 * All five are cool — blue, teal-blue, indigo, grey-blue, violet-grey. Two of
 * them used to be maroon and burgundy, on the theory that warmth added
 * variety; what it actually added was one week in five that felt like a
 * different, slightly agitated application. Variety inside a narrow, calm
 * range is the point. If a family ever needs replacing, replace it with
 * another cool one.
 *
 * Turn it off with WEEKLY_ACCENT_ROTATION in js/constants.js.
 */

[data-accent="slate"] {
  --accent-primary:   #3d5a80;
  --accent-strong:    #2d4562;
  --accent-secondary: #6a4a58;
  --focus-wash:       #f2f5fb;
}

[data-accent="steel"] {
  --accent-primary:   #345f79;
  --accent-strong:    #264858;
  --accent-secondary: #6a4a58;
  --focus-wash:       #eff5f8;
}

[data-accent="navy"] {
  --accent-primary:   #37477a;
  --accent-strong:    #283459;
  --accent-secondary: #644562;
  --focus-wash:       #f1f2fb;
}

[data-accent="stone"] {
  --accent-primary:   #47566c;
  --accent-strong:    #35414f;
  --accent-secondary: #6a4a58;
  --focus-wash:       #f1f3f8;
}

[data-accent="heather"] {
  --accent-primary:   #524a70;
  --accent-strong:    #3d3754;
  --accent-secondary: #644562;
  --focus-wash:       #f4f2fa;
}

/* ==================================================================
   Dark
   ==================================================================

   `data-theme` on <html> always holds the RESOLVED theme — "light" or "dark",
   never "system". js/theme.js resolves the preference, and an inline script in
   index.html sets the attribute before the first paint. That is why there is
   no `@media (prefers-color-scheme: dark)` copy of this block: duplicating a
   palette this size is how the two halves drift apart.

   Three things are genuinely different here, rather than inverted:

   1. Elevation comes from surface lightness, not shadow. A card is LIGHTER
      than the page; on light it is white against grey and lifted by a shadow.
      The shadows below still exist, but they are near-black and doing much
      less work.
   2. --text-inverse is dark. A primary button in dark mode is a light accent
      with dark text on it, which is the only way to keep a filled control
      readable without a fluorescent blue.
   3. Neither end is pure. The page is not #000 and the brightest text is not
      #fff: maximum contrast on a large dark field produces halation, where
      light text visibly bleeds into the background. Roughly 14:1 rather than
      21:1 is more comfortable to read for an hour and still clears AA twice
      over.                                                                   */

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

  /* ---- Surfaces ---------------------------------------------------- */
  --bg-page:           #11151d;
  --bg-surface:        #1a1f2a;
  --bg-surface-subtle: #161b24;
  --bg-hover:          #252c3a;
  --bg-overlay:        rgba(4, 6, 11, 0.68);

  /* ---- Text -------------------------------------------------------- */
  --text-primary:   #e6ebf5;
  --text-secondary: #b6c1d3;
  --text-muted:     #a1adc0;
  --text-faint:     #919eb3;
  --text-inverse:   #101520;

  /* ---- Accents ----------------------------------------------------- */
  --accent-primary:   #8aaad4;
  --accent-strong:    #a8c0e2;
  --accent-secondary: #d3a0b0;
  --focus-wash:       #161c28;

  /* ---- Lines and depth --------------------------------------------- */
  --border-subtle:  #242b38;
  --border-muted:   #313949;
  --border-strong:  #4a5568;
  --shadow-card:    0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-raised:  0 2px 6px rgba(0, 0, 0, 0.46);
  --shadow-drag:    0 12px 30px rgba(0, 0, 0, 0.58);
  --shadow-dialog:  0 20px 54px rgba(0, 0, 0, 0.62);
  --ring:           rgba(138, 170, 214, 0.24);

  /* ---- Meaning ----------------------------------------------------- */
  --danger:      #ee98a4;
  --danger-wash: #29181d;
  --ok:          #79c8a2;
  --warn:        #e0b25f;
  --warn-wash:   #282114;
}

/**
 * The weekly accent families again, in dark.
 *
 * Specificity does the work: [data-accent="x"] is one attribute selector,
 * :root[data-theme="dark"] is two, and :root[data-theme="dark"][data-accent="x"]
 * is three — so the light weekly block never leaks into dark, whatever order
 * the attributes end up in.
 *
 * Same rule as the light set: hue moves, hierarchy does not. Each family's
 * --accent-primary is bright enough to be link text on the darkest surface and
 * to carry dark --text-inverse when it is a button fill, and each --focus-wash
 * is a lift of about one step above --bg-page — felt rather than seen.
 */

:root[data-theme="dark"][data-accent="slate"] {
  --accent-primary:   #8aaad4;
  --accent-strong:    #a8c0e2;
  --accent-secondary: #d3a0b0;
  --focus-wash:       #161c28;
}

:root[data-theme="dark"][data-accent="steel"] {
  --accent-primary:   #7cadc9;
  --accent-strong:    #9cc5db;
  --accent-secondary: #d3a0b0;
  --focus-wash:       #141c22;
}

:root[data-theme="dark"][data-accent="navy"] {
  --accent-primary:   #97a6dd;
  --accent-strong:    #b2bfe9;
  --accent-secondary: #cf9cc2;
  --focus-wash:       #171a2a;
}

:root[data-theme="dark"][data-accent="stone"] {
  --accent-primary:   #a2aec4;
  --accent-strong:    #bcc5d6;
  --accent-secondary: #d3a0b0;
  --focus-wash:       #1a1e26;
}

:root[data-theme="dark"][data-accent="heather"] {
  --accent-primary:   #a9a3c6;
  --accent-strong:    #c2bdda;
  --accent-secondary: #cf9cc2;
  --focus-wash:       #1b1924;
}