/* ============================================================
   Hque design tokens
   --------------------------------------------------------------
   GitHub Primer-derived token vocabulary. Defines :root for
   light mode and [data-theme="dark"] for dark. Consumed
   directly by all *.razor.css and hque-overrides.css; mirrored
   verbatim in C# at Theme/HqueTheme.cs for MudBlazor (which
   types palette properties as MudColor and won't accept
   var(--…) strings).

   The legacy alias bridge that PRs 1–3b carried (--text,
   --surface, --accent etc.) is gone — all consumers migrated
   to these direct names by PR `theme/que-ui-sweep`.
   ============================================================ */

:root {
    /* --- Canvas / surfaces --- */
    --canvas-default: #FFFFFF;
    --canvas-subtle: #F6F8FA;
    --canvas-inset: #EFF2F5;
    --canvas-overlay: #FFFFFF;
    /* --- Borders --- */
    --border-default: #D0D7DE;
    --border-muted: #D8DEE4;
    --border-subtle: rgba(31, 35, 40, 0.10);
    /* --- Foreground / text --- */
    --fg-default: #1F2328;
    --fg-muted: #656D76;
    --fg-subtle: #8C959F;
    --fg-on-emphasis: #FFFFFF;
    /* --- Accent (Hque blue, same as marketing) --- */
    --accent-fg: #2563EB;
    --accent-emphasis: #2563EB;
    --accent-muted: rgba(37, 99, 235, 0.40);
    --accent-subtle: #DDEBFE;
    --accent-ring: rgba(37, 99, 235, 0.30);
    /* --- Semantic: success --- */
    --success-fg: #1A7F37;
    --success-emphasis: #1F883D;
    --success-muted: rgba(74, 194, 107, 0.40);
    --success-subtle: #DAFBE1;
    /* --- Semantic: attention (warning) --- */
    --attention-fg: #9A6700;
    --attention-emphasis: #BF8700;
    --attention-muted: rgba(212, 167, 44, 0.40);
    --attention-subtle: #FFF8C5;
    /* --- Semantic: danger --- */
    --danger-fg: #CF222E;
    --danger-emphasis: #CF222E;
    --danger-muted: rgba(255, 129, 130, 0.40);
    --danger-subtle: #FFEBE9;
    /* --- Semantic: info --- */
    --info-fg: #0969DA;
    --info-emphasis: #0969DA;
    --info-muted: rgba(84, 174, 255, 0.40);
    --info-subtle: #DDF4FF;
    /* --- Done / closed (record completion, like GitHub closed PRs) --- */
    --done-fg: #8250DF;
    --done-emphasis: #8250DF;
    --done-muted: rgba(194, 151, 255, 0.40);
    --done-subtle: #FBEFFF;
    /* --- Neutral mute (small variants for chips that aren't semantic) --- */
    --neutral-subtle: #EFF2F5;
    --neutral-muted: rgba(175, 184, 193, 0.20);
    /* --- Diff (audit / history views) --- */
    --diff-add-bg: #DAFBE1;
    --diff-add-fg: #1A7F37;
    --diff-del-bg: #FFEBE9;
    --diff-del-fg: #CF222E;
    /* --- Type --- */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    /* --- Layout primitives --- */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-pill: 999px;
    --sidebar-width: 360px;
    /* Settings (AdminLayout) docked nav — narrower than the wide --sidebar-width
       used by the Que split surface. Drives the dock-push / overlay widths in admin.css. */
    --admin-sidebar-width: 240px;
    --topbar-height: 52px;
    --subnav-height: 40px;
    --shadow-none: none;
    --shadow-resting: 0 1px 0 rgba(31, 35, 40, 0.04);
    --shadow-floating: 0 8px 24px rgba(140, 149, 159, 0.20);
    --focus-ring: 0 0 0 3px var(--accent-ring);
    /* Type scale — value-preserving. Every distinct px font-size present in the
       app at migration time has an EXACT token here (no folding); a migrated
       `font-size: NNpx` maps to the token of the identical value. T-shirt names
       carry the ramp; irregular in-between sizes (10/15/17/24/30/36) keep a
       value-named token so the mapping stays exact. See docs/styling-audit-report.md. */
    --text-8:   8px;   /* irregular small */
    --text-3xs: 9px;
    --text-10:  10px;  /* gap */
    --text-2xs: 11px;
    --text-xs:  12px;
    --text-sm:  13px;
    --text-md:  14px;  /* body baseline, matches Typography.Default */
    --text-15:  15px;  /* gap */
    --text-lg:  16px;
    --text-17:  17px;  /* gap */
    --text-xl:  18px;
    --text-2xl: 20px;
    --text-3xl: 22px;
    --text-24:  24px;  /* gap */
    --text-4xl: 26px;
    --text-5xl: 28px;
    --text-30:  30px;  /* irregular display */
    --text-6xl: 32px;
    --text-36:  36px;  /* irregular display */
    --text-7xl: 40px;
    --text-8xl: 48px;

    /* === Status tones — the single semantic surface every status component consumes.
       Each aliases an existing Primer token above, so dark mode is inherited
       automatically (no [data-theme="dark"] entries needed — the targets flip). === */
    --tone-neutral-fg: var(--fg-muted);
    --tone-info-fg:    var(--accent-fg);   /* one blue: Info/Scheduled folds into brand accent */
    --tone-success-fg: var(--success-fg);
    --tone-warning-fg: var(--attention-fg);
    --tone-danger-fg:  var(--danger-fg);
    --tone-done-fg:    var(--done-fg);

    /* Subtle chip backgrounds — Primer '-subtle' family. */
    --tone-neutral-bg: var(--neutral-subtle);
    --tone-info-bg:    var(--accent-subtle);
    --tone-success-bg: var(--success-subtle);
    --tone-warning-bg: var(--attention-subtle);
    --tone-danger-bg:  var(--danger-subtle);
    --tone-done-bg:    var(--done-subtle);

    /* Dot geometry — promotes the inline glow-dot idiom to tokens. */
    --dot-size: 6px;
    --dot-glow: 0 0 5px;

    /* === Categorical palette — distinction colours only, NOT meaning.
       Data stores the KEY (e.g. "teal"); components resolve to var(--cat-*). === */
    --cat-blue:   var(--accent-fg);
    --cat-green:  var(--success-fg);
    --cat-amber:  var(--attention-fg);
    --cat-purple: var(--done-fg);
    --cat-teal:   #0D9488;   /* PracticeHQ accent — the one genuinely-missing hue */
    --cat-pink:   #BF3989;   /* Primer 'sponsors' pink — in use as the Risk Analysis category */
}

/* ============================================================
   Dark mode tokens.
   ============================================================ */

[data-theme="dark"] {
  --canvas-default:   #0D1117;
  --canvas-subtle:    #161B22;
  --canvas-inset:     #010409;
  --canvas-overlay:   #161B22;

  --border-default:   #30363D;
  --border-muted:     #21262D;
  --border-subtle:    rgba(240, 246, 252, 0.10);

  --fg-default:       #E6EDF3;
  --fg-muted:         #7D8590;
  --fg-subtle:        #6E7681;
  --fg-on-emphasis:   #FFFFFF;

  --accent-fg:        #4493F8;
  --accent-emphasis:  #2563EB;
  --accent-muted:     rgba(56, 139, 253, 0.40);
  --accent-subtle:    rgba(56, 139, 253, 0.15);
  --accent-ring:      rgba(56, 139, 253, 0.30);

  --success-fg:       #3FB950;
  --success-emphasis: #238636;
  --success-muted:    rgba(46, 160, 67, 0.40);
  --success-subtle:   rgba(46, 160, 67, 0.15);

  --attention-fg:     #D29922;
  --attention-emphasis: #9E6A03;
  --attention-muted:  rgba(187, 128, 9, 0.40);
  --attention-subtle: rgba(187, 128, 9, 0.15);

  --danger-fg:        #F85149;
  --danger-emphasis:  #DA3633;
  --danger-muted:     rgba(248, 81, 73, 0.40);
  --danger-subtle:    rgba(248, 81, 73, 0.15);

  --info-fg:          #58A6FF;
  --info-emphasis:    #1F6FEB;
  --info-muted:       rgba(56, 139, 253, 0.40);
  --info-subtle:      rgba(56, 139, 253, 0.15);

  --done-fg:          #A371F7;
  --done-emphasis:    #8957E5;
  --done-muted:       rgba(163, 113, 247, 0.40);
  --done-subtle:      rgba(163, 113, 247, 0.15);

  --neutral-subtle:   #21262D;
  --neutral-muted:    rgba(110, 118, 129, 0.40);

  --diff-add-bg:      rgba(46, 160, 67, 0.15);
  --diff-add-fg:      #3FB950;
  --diff-del-bg:      rgba(248, 81, 73, 0.15);
  --diff-del-fg:      #F85149;

  --shadow-resting: 0 0 0 1px rgba(240, 246, 252, 0.04);
  --shadow-floating: 0 16px 32px rgba(1, 4, 9, 0.85);
}