/* ── Design tokens ─────────────────────────────
   :root           — base tokens (semantic colors, brand palette, type scale,
                     font weights, line-heights, neutral scale, radii)
   body[data-color]— per-project palette
*/

:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --border: #e0e0e0;
  --text: #2c2c2c;
  --text-muted: #b0b0b0;

  --green: #58cc02;
  --green-dark: #46a302;
  --green-light: #d7ffb8;
  --green-hover: #63de02;       /* btn--primary hover */
  --green-shadow: #2a7a3a;      /* break-phase active button shadow (deeper than --green-dark) */
  --blue: #9889AF;
  --blue-dark: #7a6d8f;
  --blue-light: #ede8f5;
  --purple: #6f447d;
  --purple-dark: #291030;
  --purple-light: #e0cfe5;
  --purple-hover: #7d4f8c;      /* btn--accent / segmented active hover */
  --yellow: #ffc800;
  --yellow-dark: #e4a600;
  --yellow-light: #fff4c8;
  --red: #ff4b4b;
  --red-dark: #cc3b3b;
  --red-light: #ffe8e8;

  /* Corner radii. --radius and --radius-sm both 12px today — kept that way for
     existing call sites; the named additions below cover values that were
     previously hard-coded literals. */
  --radius:       12px;
  --radius-sm:    12px;
  --radius-xs:    4px;
  --radius-tight: 6px;
  --radius-md:    8px;
  --radius-pop:   10px;  /* popovers, menus */
  --radius-card:  16px;  /* large surfaces (auth card) */
  --radius-lg:    24px;  /* modal */
  --radius-pill:  999px;

  /* Chunky shadow scale. Depth-only — concatenate with the desired color:
       box-shadow: var(--shadow-chunky-rest) var(--green-dark);
     Used by buttons, day tiles, calendar cards, auth card. */
  --shadow-chunky-rest:    0 4px 0;
  --shadow-chunky-lifted:  0 6px 0;
  --shadow-chunky-pressed: 0 1px 0;
  --shadow-chunky-thin:    0 2px 0;

  /* Focus ring depth. Concatenate with halo color, e.g.
       box-shadow: var(--shadow-focus-3) var(--blue-light); */
  --shadow-focus-3: 0 0 0 3px;
  --shadow-focus-2: 0 0 0 2px;

  /* Type scale — every font-size in style.css maps to one of these. */
  --text-sm:      12px; /* covers 10, 11, 12 — small captions, labels */
  --text-md:      14px; /* covers 13, 14 — default body */
  --text-lg:      16px; /* covers 15, 16 */
  --text-xl:      18px; /* covers 18, 19, 20 */
  --text-2xl:     22px; /* covers 22, 24 */
  --text-3xl:     28px;
  --text-4xl:     32px; /* mobile focus timer */
  --text-display: 42px;
  --text-hero:    56px; /* desktop focus timer */

  /* Font weight scale. Nunito loaded weights: 400, 600, 700, 800, 900 (+500 used once).
     Names follow Tailwind/CSS conventions for cross-codebase familiarity. */
  --font-normal:    400;
  --font-semibold:  600;
  --font-bold:      700;
  --font-extrabold: 800; /* most common heading/value weight */
  --font-black:     900;

  /* Line-height. Bare numbers are unitless multipliers of font-size. */
  --leading-tight:   1;     /* compact UI text — buttons, badges, single-line labels */
  --leading-snug:    1.3;   /* week-summary cell — dense numeric labels */
  --leading-relaxed: 1.45;  /* popover descriptions — dense prose, tighter than body */
  --leading-normal:  1.5;   /* body / multi-line text */

  /* Neutral scale — for hex values not already covered by --surface/--text/
     --text-muted/--border. Per-project palette hex (in body[data-color] blocks)
     intentionally stays literal. */
  --neutral-0:    #ffffff;
  --neutral-50:   #fafafa;
  --neutral-100:  #f5f5f5;
  --neutral-200:  #e8ecf1;
  --neutral-300:  #e0e0e0;
  --neutral-400:  #d1d1d1;
  --neutral-500:  #b0b0b0;
  --neutral-800:  #252c35; /* dark surface */
  --neutral-900:  #2c2c2c; /* text · dark elevated · tooltip bg */
  --neutral-1000: #000000;

  /* Semantic tokens matching Figma variable names */
  --primary:             #6f447d;
  --primary-dark:        #291030;
  --primary-placeholder: #7a707d;
  --primary-disabled:    #b4a9b8;
  --text-primary:        #250033;
  --text-secondary:      #463a4a;
  --text-tertiary:       #887e8c;

  /* Glass surface tokens */
  --glass-heavy:         rgba(255,255,255,0.30);
  --glass-medium:        rgba(255,255,255,0.16);
  --glass-input:         rgba(250,250,250,0.90);
  --glass-border:        rgba(255,255,255,0.50);
  --glass-border-subtle: rgba(255,255,255,0.20);
}

/* ── Per-project color palette ──────────────────
   Each color sets the per-project tints consumed by the calendar and chrome:
     --day-met-* (bg/border/highlight/text)         → met-day fill + streak halo
     --unmet-*   (bg/border/text)                   → partial-day tile (entry < goal)
     --accent / --accent-bg                         → project-tinted text/icon (.pill--accent)
     --today-text                                   → today's value text (today tile uses default chrome)
   Active color set by JS via `document.body.dataset.color = cfg.color`. */
body[data-color="purple"] {
  --today-text:        #463a4a;
  --day-met-bg:        #6f447d;  --day-met-border: #291030; --day-met-highlight: #d4bfe0; --day-met-text: var(--neutral-0);
  --accent:            #6f447d;  --accent-bg:      #e0cfe5;
  --unmet-bg:          #e0cfe5;  --unmet-border:   #6d4e75; --unmet-text: #463a4a;
}
body[data-color="green"] {
  --today-text: #2d6601;
  --day-met-bg: var(--green); --day-met-border: var(--green-dark); --day-met-highlight: var(--green-light); --day-met-text: var(--neutral-0);
  --accent: var(--green-dark); --accent-bg: var(--green-light);
  --unmet-bg: #ecf5dc; --unmet-border: #c6dca0; --unmet-text: #4a6320;
}
body[data-color="yellow"] {
  --today-text: #7a5f00;
  --day-met-bg: var(--yellow); --day-met-border: var(--yellow-dark); --day-met-highlight: var(--yellow-light); --day-met-text: #5a3d00;
  --accent: var(--yellow-dark); --accent-bg: var(--yellow-light);
  --unmet-bg: #fbf0d0; --unmet-border: #ead68a; --unmet-text: #6b5118;
}
body[data-color="blue"] {
  --today-text: #1a5a9e;
  --day-met-bg: var(--blue); --day-met-border: var(--blue-dark); --day-met-highlight: var(--blue-light); --day-met-text: var(--neutral-0);
  --accent: var(--blue-dark); --accent-bg: var(--blue-light);
  --unmet-bg: #e6edf5; --unmet-border: #b8c5d8; --unmet-text: #3e4a63;
}
body[data-color="red"] {
  --today-text: #8b1a1a;
  --day-met-bg: var(--red); --day-met-border: var(--red-dark); --day-met-highlight: var(--red-light); --day-met-text: var(--neutral-0);
  --accent: var(--red-dark); --accent-bg: var(--red-light);
  --unmet-bg: #f5dede; --unmet-border: #dba8a8; --unmet-text: #703232;
}