/* ======================================================================
   Mast — Design tokens
   Source of truth: src/renderer/styles.css + src/renderer/theme/tokens.ts
   in leonhoulier/mast. All values copied verbatim from the codebase.
   ====================================================================== */

:root {
  /* -------- Typography ------------------------------------------------ */
  --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-text:    "SF Pro Text",    -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Monaco, "Cascadia Mono", monospace;

  /* -------- Semantic dots (same light + dark) ------------------------- */
  --color-success-dot:  #34C759;   /* Apple system green  */
  --color-warning-dot:  #FF9F0A;   /* Apple system orange */
  --color-critical-dot: #FF3B30;   /* Apple system red    */
  --color-info-dot:     #0A84FF;   /* Apple system blue   */

  /* -------- Semantic fills — LIGHT ----------------------------------- */
  --color-success-bg:         rgba(236, 253, 243, 0.7);
  --color-success-text:       #166534;
  --color-warning-bg:         rgba(255, 247, 230, 0.7);
  --color-warning-bg-alt:     rgba(255, 249, 237, 0.7);
  --color-warning-text:       #92400E;
  --color-warning-text-alt:   #7C5E10;
  --color-warning-border:     rgba(242, 224, 180, 0.6);
  --color-critical-bg:        rgba(255, 241, 242, 0.7);
  --color-critical-text:      #9F1239;
  --color-info-bg:            rgba(234, 242, 255, 0.7);
  --color-info-text:          #1D4ED8;

  /* -------- Surface (frosted glass) — LIGHT -------------------------- */
  --color-surface-popover-start: rgba(255, 255, 255, 0.6);
  --color-surface-popover-end:   rgba(246, 248, 251, 0.65);
  --color-surface-header-start:  rgba(255, 255, 255, 0.4);
  --color-surface-header-end:    rgba(242, 245, 250, 0.4);
  --color-surface-card:          rgba(255, 255, 255, 0.45);
  --color-surface-card-alt:      rgba(255, 255, 255, 0.5);
  --color-surface-chip:          rgba(240, 243, 248, 0.55);
  --color-surface-border:        rgba(255, 255, 255, 0.6);

  /* -------- Borders — LIGHT ------------------------------------------ */
  --color-border-card:      rgba(0, 0, 0, 0.08);
  --color-border-card-alt:  rgba(0, 0, 0, 0.06);
  --color-border-card-soft: rgba(0, 0, 0, 0.05);
  --color-border-separator: rgba(0, 0, 0, 0.05);

  /* -------- Text — LIGHT --------------------------------------------- */
  --color-text-primary:        #101828;
  --color-text-primary-alt:    #111827;
  --color-text-primary-strong: #0F172A;
  --color-text-secondary:      #4B5563;
  --color-text-tertiary:       #475467;
  --color-text-muted:          #667085;
  --color-text-subtle:         #6B7280;
  --color-text-faint:          #8692A6;
  --color-text-placeholder:    #98A2B3;
  --color-text-pill-neutral:   #475467;

  /* -------- Shadows — LIGHT ------------------------------------------ */
  --shadow-panel: 0 28px 56px rgba(67, 82, 106, 0.18);
  --shadow-chip:  0 10px 24px rgba(23, 27, 39, 0.24);

  /* -------- Radii (extracted from SVG rx values) --------------------- */
  --radius-xs:  6px;   /* tight chips */
  --radius-sm: 12px;   /* cards, search bar */
  --radius-md: 17px;   /* search pill */
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-2xl: 28px;
  --radius-3xl: 34px;  /* outer popover */

  /* -------- Spacing (4px grid) --------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* -------- Popover geometry ----------------------------------------- */
  --popover-width:  380px;
  --popover-height: 600px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --shadow-panel: 0 28px 56px rgba(0, 0, 0, 0.55);
    --shadow-chip:  0 10px 24px rgba(0, 0, 0, 0.45);

    --color-success-bg:       #0F2A1A;
    --color-success-text:     #6EE7A8;
    --color-warning-bg:       #2B1F05;
    --color-warning-bg-alt:   #221804;
    --color-warning-text:     #FCD34D;
    --color-warning-text-alt: #FBD38D;
    --color-warning-border:   #5A4716;
    --color-critical-bg:      #2B0F10;
    --color-critical-text:    #FCA5A5;
    --color-info-bg:          #0A1F3C;
    --color-info-text:        #93C5FD;

    --color-surface-popover-start: rgba(17, 21, 28, 0.7);
    --color-surface-popover-end:   rgba(12, 15, 20, 0.75);
    --color-surface-header-start:  rgba(26, 31, 42, 0.5);
    --color-surface-header-end:    rgba(20, 24, 33, 0.5);
    --color-surface-card:          rgba(23, 27, 36, 0.35);
    --color-surface-card-alt:      rgba(27, 32, 41, 0.35);
    --color-surface-chip:          rgba(31, 36, 46, 0.5);
    --color-surface-border:        rgba(255, 255, 255, 0.08);

    --color-border-card:      rgba(255, 255, 255, 0.1);
    --color-border-card-alt:  rgba(255, 255, 255, 0.08);
    --color-border-card-soft: rgba(255, 255, 255, 0.06);
    --color-border-separator: rgba(255, 255, 255, 0.06);

    --color-text-primary:        #F9FAFB;
    --color-text-primary-alt:    #F3F4F6;
    --color-text-primary-strong: #FFFFFF;
    --color-text-secondary:      #D1D5DB;
    --color-text-tertiary:       #9CA3AF;
    --color-text-muted:          #9CA3AF;
    --color-text-subtle:         #9CA3AF;
    --color-text-faint:          #6B7280;
    --color-text-placeholder:    #6B7280;
    --color-text-pill-neutral:   #9CA3AF;
  }
}

/* ======================================================================
   Semantic type roles — typography scale from styles.css
   ds-title     13px / 600  row primary name
   ds-body      12px / 500  secondary info
   ds-caption   11px / 400  summaries
   ds-micro     10px / 400  timestamps, labels
   ds-badge      9px / 700  count badges, pills
   ds-label     10px / 700  uppercase tracking-wider section headers
   ====================================================================== */

html, body { font-family: var(--font-text); font-size: 13px; color: var(--color-text-primary); }

.ds-brand    { font-family: var(--font-display); font-size: 22px; font-weight: 700; line-height: 1.2; }
.ds-project  { font-family: var(--font-display); font-size: 15px; font-weight: 700; line-height: 1.3; }
.ds-title    { font-family: var(--font-text); font-size: 13px; font-weight: 600; }
.ds-body     { font-family: var(--font-text); font-size: 12px; font-weight: 500; }
.ds-caption  { font-family: var(--font-text); font-size: 11px; font-weight: 400; }
.ds-micro    { font-family: var(--font-text); font-size: 10px; font-weight: 400; }
.ds-badge    { font-family: var(--font-text); font-size: 9px;  font-weight: 700; }
.ds-label    { font-family: var(--font-text); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }
.ds-mono     { font-family: var(--font-mono); font-size: 11px; }

/* p/h map — lightweight defaults so raw HTML still reads on brand */
h1 { font-family: var(--font-display); font-size: 22px; font-weight: 700; margin: 0 0 8px; }
h2 { font-family: var(--font-display); font-size: 15px; font-weight: 700; margin: 0 0 6px; }
h3 { font-family: var(--font-text); font-size: 13px; font-weight: 600; margin: 0 0 4px; }
p  { font-family: var(--font-text); font-size: 12px; font-weight: 500; margin: 0; }
code, pre { font-family: var(--font-mono); font-size: 11px; }