/*
 * tokens.css — Manager Home v2 Design Tokens
 * Source of truth: design_handoff_home_redesign/screenshots/ (01–05)
 *
 * Usage: import in home.css before all rules, then reference as var(--hv-*)
 *
 * ── INCONSISTENCIES vs current home.css ──────────────────────────────────────
 *
 * [1] BRIEFING BORDER
 *     Design (01, 05): Briefing card has NO visible border — only the fill.
 *     home.css: .hv-briefing has border: 1px solid var(--border)
 *     Fix: remove border or set border-color: transparent.
 *
 * [2] STATUS CHIP VARIANTS MISSING
 *     Design (02, 03): Five distinct chip styles rendered in plan rows and the
 *     status key: Done ✓ (green), WIP ◑ (accent), At Risk ▲ (orange),
 *     Not started ○ (muted), Not Done ✗ (red-muted).
 *     home.css: only defines a generic .hv-status-chip — no --wip, --risk,
 *     --done, --not-started, --not-done variants.
 *     Fix: add .hv-chip--done, .hv-chip--wip, .hv-chip--risk,
 *          .hv-chip--not-started, .hv-chip--not-done.
 *
 * [3] "NEW PROBLEM" BADGE — TWO-LINE WRAP
 *     Design (02, 03): The NEW PROBLEM tag is narrow with "NEW" / "PROBLEM"
 *     on two lines (fixed ~52px wide). Current .hv-tag is single-line.
 *     Fix: add max-width: 52px; white-space: normal; text-align: center to
 *          .hv-tag--prob (or use a class variant .hv-tag--stack).
 *
 * [4] PAGE BACKGROUND COLOR
 *     Design (01–04 light): Main content area reads as ~#F2F4F8 (blue-gray).
 *     style.css --bg-app: #f9fafb (warmer, near-white). home.css does not
 *     override the view background, so cards sit on #f9fafb, not #F2F4F8.
 *     Fix: add background: var(--hv-bg-page) to #view-ceo-home in home.css.
 *
 * [5] ACCENT COLOUR SPLIT
 *     style.css global --accent: #4f46e5 (cooler indigo).
 *     home.css scoped --accent: #5546E6 (warmer violet, matching design).
 *     No code change needed — scoped override is correct — but worth knowing
 *     the two values differ intentionally.
 *
 * [6] DARK MODE PAGE BACKGROUND
 *     Design (05 dark): Content area behind cards looks ~#0E1019 (deep navy).
 *     style.css --bg-app: #0F0F10 (near-black, no blue). Differs subtly.
 *     Fix: same as [4] — set background: var(--hv-bg-page) on #view-ceo-home
 *     and use the dark value #0E1019 from the token below.
 *
 * [7] SENTIMENT EMOJI SIZE
 *     Design (01, 04): Emoji in the card row appears ~1.4rem.
 *     home.css: .hv-sentiment { font-size: 1.25rem } — slightly small.
 *     Fix: bump to 1.35–1.4rem.
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ══════════════════════════════════════════════════════════════
   TYPOGRAPHY
   Family: Plus Jakarta Sans, weights 400/500/600/700/800
   Body/app uses Inter — home view overrides to Plus Jakarta Sans
   ══════════════════════════════════════════════════════════════ */
:root {
  --hv-font-body:    'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --hv-font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --hv-font: var(--hv-font-display); /* alias used by home view */

  /* Scale — derived from screenshots, base ≈ 14px (0.875rem) */
  --hv-text-2xs:  0.62rem;   /*  9.9px  legend, cluster labels           */
  --hv-text-xs:   0.68rem;   /* 10.9px  eyebrow, 3p labels, sent-week    */
  --hv-text-sm:   0.74rem;   /* 11.8px  section labels, date chip, chips */
  --hv-text-md:   0.82rem;   /* 13.1px  comment meta, decision sub       */
  --hv-text-body: 0.88rem;   /* 14.1px  snippets, progress text          */
  --hv-text-base: 0.96rem;   /* 15.4px  card names                       */
  --hv-text-lg:   clamp(1.05rem, 1.7vw, 1.3rem); /* briefing body        */
  --hv-text-xl:   clamp(1.7rem, 3.2vw, 2.25rem); /* greeting h1          */

  /* Weights */
  --hv-w-regular:   400;
  --hv-w-medium:    500;   /* briefing body                             */
  --hv-w-semibold:  600;   /* dept pill, comment meta, link             */
  --hv-w-bold:      700;   /* names, labels, chips, most UI text        */
  --hv-w-extrabold: 800;   /* greeting h1, rank numbers, stat values    */

  /* Letter-spacing */
  --hv-track-heading:  -0.035em;  /* greeting h1                        */
  --hv-track-name:     -0.01em;   /* card names, signal titles           */
  --hv-track-normal:    0;
  --hv-track-chip:      0.03em;   /* status chips                        */
  --hv-track-label:     0.12em;   /* section labels (MY TEAM, etc.)      */
  --hv-track-eyebrow:   0.13em;   /* BRIEFING eyebrow                    */

  /* ══════════════════════════════════════════════════════════════
     SPACING
     ══════════════════════════════════════════════════════════════ */
  --hv-space-4:   4px;
  --hv-space-8:   8px;
  --hv-space-10: 10px;
  --hv-space-12: 12px;
  --hv-space-14: 14px;
  --hv-space-20: 20px;   /* card internal padding                      */
  --hv-space-32: 32px;   /* section gap                                */

  /* Named aliases */
  --hv-pad-card:     20px;
  --hv-pad-chip:     3px 7px;
  --hv-pad-btn-sm:   3px 9px;   /* comment button                       */
  --hv-pad-btn-md:   8px 16px;  /* primary / ghost button               */
  --hv-pad-read-btn: 9px 16px;  /* read-receipt button                  */
  --hv-pad-plan-row: 10px 12px; /* plan line inner row                  */
  --hv-pad-insight:  14px 16px;

  /* ══════════════════════════════════════════════════════════════
     RADII
     ══════════════════════════════════════════════════════════════ */
  --hv-r-xs:   5px;    /* tags / badges                               */
  --hv-r-sm:   7px;    /* dept pill, lw/tw pills, comment-btn         */
  --hv-r-md:   8px;    /* primary button, chevron                     */
  --hv-r-lg:   10px;   /* plan line, problem card, insight            */
  --hv-r-xl:   13px;   /* signal card, decision card                  */
  --hv-r-2xl:  14px;   /* team member card                            */
  --hv-r-3xl:  16px;   /* briefing card, commitments card             */
  --hv-r-full: 9999px; /* status chip pill                            */

  /* ══════════════════════════════════════════════════════════════
     SIZING
     ══════════════════════════════════════════════════════════════ */
  --hv-avatar-lg:  40px;   /* team card                                */
  --hv-avatar-md:  38px;   /* signal / open problems card              */
  --hv-avatar-sm:  26px;   /* member comment bubble                    */
  --hv-avatar-xs:  24px;   /* line comment bubble                      */
  --hv-chevron:    30px;   /* expand/collapse button                   */
  --hv-dot:         6px;   /* progress / problem dot                   */
  --hv-diamond:     7px;   /* briefing eyebrow diamond                 */
  --hv-sent-tile:  36px;   /* sentiment timeline tile (w + h)         */
  --hv-max-width: 1180px;
}

/* ══════════════════════════════════════════════════════════════
   LIGHT MODE  (source: screenshots 01–04)
   ══════════════════════════════════════════════════════════════ */
:root {
  /* Page + panels */
  --hv-bg-page:  #F2F4F8;  /* main content area background (blue-gray) */
  --hv-panel:    #FFFFFF;  /* card face                                 */
  --hv-panel-2:  #FAFBFD;  /* secondary surface, input bg              */

  /* Text */
  --hv-text:    #0E1320;   /* near-black with blue tint                */
  --hv-text-2:  #525A68;   /* secondary                                */
  --hv-muted:   #8A93A1;   /* muted / placeholder                      */

  /* Borders */
  --hv-border:   #ECEEF2;  /* card edge, input                         */
  --hv-border-2: #E0E4EA;  /* stronger border (read-btn, plan sep)     */

  /* Accent — indigo-violet; brighter than global #4f46e5 */
  --hv-accent:       #5546E6;
  --hv-accent-soft:  #EEECFD;   /* briefing bg, avatar, insight bg     */
  --hv-accent-text:  #4435CC;   /* links, active text                  */
  --hv-accent-hover: #3324B0;   /* pressed/hover                       */

  /* Elevation */
  --hv-shadow:       rgba(24,24,60,0.09);
  --hv-shadow-card:  0 1px 0 rgba(24,24,60,0.09);
  --hv-shadow-hover: 0 14px 32px rgba(24,24,60,0.09);
  --hv-hover-fill:   rgba(14,19,32,0.045);

  /* ── Status colours ── */

  /* Green — Done / LAST WK pill */
  --hv-good:    #1F9D63;
  --hv-good-bg: #E7F6EE;
  --hv-good-bd: #C7E9D6;

  /* Red — Problems */
  --hv-prob-tx: #C2402B;
  --hv-prob-bg: #FDECE8;
  --hv-prob-bd: #F6D4CC;

  /* Amber — Decisions */
  --hv-dec-tx:  #B07A0C;
  --hv-dec-bg:  #FBF3E3;
  --hv-dec-bd:  #F0E0BF;

  /* ── Status chip variants (plan lines + status key) ── */

  /* WIP ◑ — accent (purple) */
  --hv-wip-tx: #4435CC;
  --hv-wip-bg: #EEECFD;
  --hv-wip-bd: rgba(85,70,230,0.28);

  /* At Risk ▲ — orange */
  --hv-risk-tx: #C2570A;
  --hv-risk-bg: #FEF0E4;
  --hv-risk-bd: #F6CEAD;

  /* Not started ○ — muted */
  --hv-ns-tx: #8A93A1;
  --hv-ns-bg: #FAFBFD;
  --hv-ns-bd: #E0E4EA;

  /* Not Done ✗ — red-muted */
  --hv-nd-tx: #B03030;
  --hv-nd-bg: #FDECEC;
  --hv-nd-bd: #F6CCCC;
}

/* ══════════════════════════════════════════════════════════════
   DARK MODE  (source: screenshot 05)
   ══════════════════════════════════════════════════════════════ */
html.theme-dark {
  --hv-bg-page:  #0E1019;  /* deep navy — main content area            */
  --hv-panel:    #13161E;  /* card background                          */
  --hv-panel-2:  #171B23;  /* secondary surface                        */

  --hv-text:    #F2F4F8;
  --hv-text-2:  #AAB2BE;
  --hv-muted:   #79818E;

  --hv-border:   rgba(255,255,255,0.08);
  --hv-border-2: rgba(255,255,255,0.14);

  --hv-accent:       #6F60F2;
  --hv-accent-soft:  rgba(111,96,242,0.18);
  --hv-accent-text:  #B3A8FB;
  --hv-accent-hover: #8A7CF8;

  --hv-shadow:       rgba(0,0,0,0.55);
  --hv-shadow-card:  0 1px 0 rgba(0,0,0,0.55);
  --hv-shadow-hover: 0 14px 32px rgba(0,0,0,0.55);
  --hv-hover-fill:   rgba(255,255,255,0.055);

  --hv-good:    #34B877;
  --hv-good-bg: rgba(52,184,119,0.14);
  --hv-good-bd: rgba(52,184,119,0.32);

  --hv-prob-tx: #F0998C;
  --hv-prob-bg: rgba(225,101,91,0.14);
  --hv-prob-bd: rgba(225,101,91,0.32);

  --hv-dec-tx:  #EBC069;
  --hv-dec-bg:  rgba(233,180,76,0.13);
  --hv-dec-bd:  rgba(233,180,76,0.30);

  --hv-wip-tx: #B3A8FB;
  --hv-wip-bg: rgba(111,96,242,0.18);
  --hv-wip-bd: rgba(111,96,242,0.38);

  --hv-risk-tx: #F2A56B;
  --hv-risk-bg: rgba(220,100,40,0.15);
  --hv-risk-bd: rgba(220,100,40,0.32);

  --hv-ns-tx: #79818E;
  --hv-ns-bg: rgba(255,255,255,0.04);
  --hv-ns-bd: rgba(255,255,255,0.14);

  --hv-nd-tx: #F08888;
  --hv-nd-bg: rgba(220,80,80,0.13);
  --hv-nd-bd: rgba(220,80,80,0.28);
}

/*
 * ── ICON NOTES (non-CSS, for reference) ─────────────────────────────────────
 * All icons in the design are TEXT CHARACTERS, not SVG or icon fonts:
 *   ✓  Done          — U+2713 CHECK MARK, color var(--hv-good)
 *   ◑  WIP           — U+25D1 CIRCLE WITH RIGHT HALF BLACK, color var(--hv-accent)
 *   ▲  At Risk       — U+25B2 UP-POINTING TRIANGLE, color var(--hv-risk-tx)
 *   ○  Not started   — U+25CB WHITE CIRCLE, color var(--hv-muted)
 *   ✗  Not Done      — U+2717 BALLOT X, color var(--hv-nd-tx)
 *   ♦  Briefing      — U+2666 BLACK DIAMOND SUIT (or CSS rotated square div)
 *   →  Link arrow    — U+2192, color var(--hv-accent-text)
 *   ›  Chevron       — drawn with border-right + border-bottom CSS (current impl)
 *
 * Size: all inline with text at current font-size (no separate sizing needed).
 * ─────────────────────────────────────────────────────────────────────────────
 */