/* ============================================================
   FocusFlow — Dark theme
   Accents are desaturated ~20% / lightened ~10% from pastel.
   ============================================================ */
[data-theme="dark"] {
  --color-base: #1A1A1E;
  --color-surface: #242428;
  --color-surface-alt: #2E2E34;
  --color-text: #C9C7C3;
  --color-text-dark: #E8E6E3;
  /* Was #8B8B96 (4.0:1 on --color-surface-alt), then #9D9DA9 — which still
     measured 3.99:1 on a .card--tinted background, the surface most muted
     metadata actually sits on. 4.81:1 on the palest tint now. */
  --color-text-muted: #ADADB8;
  --color-border: #363640;

  --color-peach: #D9AE9D;
  --color-apricot: #D6B894;
  --color-butter: #D4C68F;
  --color-sage: #A9C4B3;
  --color-sky: #A4BFDB;
  --color-lavender: #B6B2D6;
  --color-mauve: #C7AEC2;

  --color-success: #6FA88B;
  --color-warning: #D29A6E;
  --color-danger: #C97E7E;

  /* Dark theme inverts the badge pairing: light text on a deep tint. */
  --badge-danger-bg: #4A2B2B;   --badge-danger-fg: #F2BEBE;
  --badge-warning-bg: #4A3826;  --badge-warning-fg: #F2C89E;
  --badge-success-bg: #24402F;  --badge-success-fg: #AADFC3;

  /* Dark mixes accents TOWARDS the light text colour, so --accent-strong is
     already the brightest weight — marks and accent text reuse it (8.6:1+ on
     both dark surfaces) rather than being darkened into the background. */
  --accent: var(--color-sky);
  --accent-strong: color-mix(in srgb, var(--accent) 75%, var(--color-text-dark));
  --accent-mark: var(--accent-strong);
  --accent-text: var(--accent-strong);

  /* Weaker tints so text stays readable on them: at 22% / 26% body text
     measures 5.4:1 / 4.9:1 on the palest colour, titles 6.7:1+. (At the
     light themes' 30% / 45% the planner time labels measured 2.15:1.) */
  --tint-cell: 22%;
  --tint-block: 26%;
  --widget-tint: 12%;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.35);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.45);
}
[data-theme="dark"] body::before { opacity: 0.4; }