/*
 * SyncBuild Design System — colors + type tokens
 *
 * Source of truth: SyncBuild - Copy/web/src/index.css (shadcn CSS vars)
 * and SyncBuild - Copy/web/tailwind.config.js.
 *
 * Two layers of tokens:
 *   1. Base tokens (raw HSL triplets, matching shadcn's convention so
 *      they can be composed as `hsl(var(--bg))`). These are 1:1 with
 *      the shipping app.
 *   2. Semantic tokens (fg1, fg2, bg1, brand-600, h1, body, code…) —
 *      convenience aliases that spell out *role*. Use these in new
 *      work; they resolve to the base tokens below.
 *
 * Wrap a root in `.theme-dark` to flip to dark mode. Both variants
 * ship from the app.
 */

:root {
  /* ── Base (shadcn raw HSL triplets) ────────────────────────── */
  --sb-background:             0 0% 100%;
  --sb-foreground:             222.2 84% 4.9%;

  --sb-card:                   0 0% 100%;
  --sb-card-foreground:        222.2 84% 4.9%;

  --sb-popover:                0 0% 100%;
  --sb-popover-foreground:     222.2 84% 4.9%;

  --sb-primary:                340 55% 50%;       /* #C23B6A — Brick Rose */
  --sb-primary-foreground:     0 0% 100%;

  --sb-secondary:              210 40% 96.1%;
  --sb-secondary-foreground:   222.2 47.4% 11.2%;

  --sb-muted:                  210 40% 96.1%;
  --sb-muted-foreground:       215.4 16.3% 46.9%;

  --sb-accent:                 210 40% 96.1%;
  --sb-accent-foreground:      222.2 47.4% 11.2%;

  --sb-destructive:            0 84.2% 60.2%;
  --sb-destructive-foreground: 210 40% 98%;

  --sb-border:                 214.3 31.8% 91.4%;
  --sb-input:                  214.3 31.8% 91.4%;
  --sb-ring:                   229 92% 54%;

  /* Semantic status tints — always used as low-alpha bg + full text. */
  --sb-green-bg:               142 76% 94%;       /* green-50 */
  --sb-green-fg:               142 72% 29%;       /* green-700 */
  --sb-amber-bg:               48 96% 89%;        /* amber-50 */
  --sb-amber-fg:               32 95% 31%;        /* amber-700 */
  --sb-red-bg:                 0 86% 94%;         /* red-50 */
  --sb-red-fg:                 0 74% 42%;         /* red-700 */

  /* Radii */
  --sb-radius:                 0.5rem;            /* 8px — cards, dialogs, inputs */
  --sb-radius-md:              calc(var(--sb-radius) - 2px);  /* 6px */
  --sb-radius-sm:              calc(var(--sb-radius) - 4px);  /* 4px */

  /* Spacing scale (4px grid) */
  --sb-space-1: 0.25rem;  /* 4px */
  --sb-space-2: 0.5rem;   /* 8px */
  --sb-space-3: 0.75rem;  /* 12px */
  --sb-space-4: 1rem;     /* 16px */
  --sb-space-5: 1.25rem;  /* 20px */
  --sb-space-6: 1.5rem;   /* 24px */
  --sb-space-8: 2rem;     /* 32px */
  --sb-space-12: 3rem;    /* 48px */

  /* Elevation (one layer, used everywhere) */
  --sb-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --sb-shadow-md: 0 4px 10px rgba(15, 23, 42, 0.08);   /* hover on linked cards */

  /* ── Semantic color aliases (use these in new work) ────────── */
  --fg1:        hsl(var(--sb-foreground));            /* primary text */
  --fg2:        hsl(var(--sb-muted-foreground));      /* secondary text */
  --fg-on-brand: hsl(var(--sb-primary-foreground));
  --bg1:        hsl(var(--sb-background));            /* page bg */
  --bg2:        hsl(var(--sb-card));                  /* raised surface */
  --bg-muted:   hsl(var(--sb-muted));                 /* subtle shaded bg */

  --brand:      hsl(var(--sb-primary));               /* #C23B6A */
  --brand-tint: hsl(var(--sb-primary) / 0.1);         /* active nav, icon chip */
  --brand-soft: hsl(var(--sb-primary) / 0.05);

  --border:     hsl(var(--sb-border));
  --ring:       hsl(var(--sb-ring));

  --success-bg: hsl(var(--sb-green-bg));
  --success-fg: hsl(var(--sb-green-fg));
  --warn-bg:    hsl(var(--sb-amber-bg));
  --warn-fg:    hsl(var(--sb-amber-fg));
  --danger-bg:  hsl(var(--sb-red-bg));
  --danger-fg:  hsl(var(--sb-red-fg));
  --danger:     hsl(var(--sb-destructive));

  /* ── Type tokens ───────────────────────────────────────────── */
  --sb-font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --sb-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  --sb-text-xs:   0.75rem;    /* 12px */
  --sb-text-sm:   0.875rem;   /* 14px */
  --sb-text-base: 1rem;       /* 16px */
  --sb-text-lg:   1.125rem;   /* 18px */
  --sb-text-xl:   1.25rem;    /* 20px */
  --sb-text-2xl:  1.5rem;     /* 24px */

  --sb-weight-regular:  400;
  --sb-weight-medium:   500;
  --sb-weight-semibold: 600;

  --sb-leading-tight:  1.2;
  --sb-leading-snug:   1.35;
  --sb-leading-normal: 1.5;
}

.theme-dark,
:root.theme-dark {
  --sb-background:             222.2 84% 4.9%;
  --sb-foreground:             210 40% 98%;

  --sb-card:                   222.2 84% 4.9%;
  --sb-card-foreground:        210 40% 98%;

  --sb-popover:                222.2 84% 4.9%;
  --sb-popover-foreground:     210 40% 98%;

  --sb-primary:                340 60% 60%;       /* Brick Rose lifted 10pts in L for dark surfaces */
  --sb-primary-foreground:     0 0% 100%;

  --sb-secondary:              217.2 32.6% 17.5%;
  --sb-secondary-foreground:   210 40% 98%;

  --sb-muted:                  217.2 32.6% 17.5%;
  --sb-muted-foreground:       215 20.2% 65.1%;

  --sb-accent:                 217.2 32.6% 17.5%;
  --sb-accent-foreground:      210 40% 98%;

  --sb-destructive:            0 62.8% 30.6%;
  --sb-destructive-foreground: 210 40% 98%;

  --sb-border:                 217.2 32.6% 17.5%;
  --sb-input:                  217.2 32.6% 17.5%;
  --sb-ring:                   229 92% 64%;

  --sb-green-bg:               142 72% 14%;
  --sb-green-fg:               142 70% 76%;
  --sb-amber-bg:               32 60% 16%;
  --sb-amber-fg:               48 96% 76%;
  --sb-red-bg:                 0 62% 18%;
  --sb-red-fg:                 0 86% 82%;
}

/* ── Semantic type recipes ─────────────────────────────────────
 * These map the app's actual usage (from pages in web/src/pages/*)
 * to reusable classes. Use these directly on elements, or inline
 * the values (font-size + weight + line-height).
 */

.sb-h1 {
  font-family: var(--sb-font-sans);
  font-size: var(--sb-text-xl);        /* 20px — PageHeader title */
  font-weight: var(--sb-weight-semibold);
  line-height: var(--sb-leading-tight);
  color: var(--fg1);
  letter-spacing: -0.01em;
}

.sb-h2 {
  font-family: var(--sb-font-sans);
  font-size: var(--sb-text-lg);        /* 18px — Card titles */
  font-weight: var(--sb-weight-semibold);
  line-height: var(--sb-leading-snug);
  color: var(--fg1);
}

.sb-h3 {
  font-family: var(--sb-font-sans);
  font-size: var(--sb-text-base);      /* 16px — Section header inside a card */
  font-weight: var(--sb-weight-semibold);
  line-height: var(--sb-leading-snug);
  color: var(--fg1);
}

.sb-display {
  /* Stat tile value — the largest numeric display in the app. */
  font-family: var(--sb-font-sans);
  font-size: var(--sb-text-2xl);       /* 24px */
  font-weight: var(--sb-weight-semibold);
  line-height: var(--sb-leading-tight);
  color: var(--fg1);
  letter-spacing: -0.02em;
}

.sb-body {
  font-family: var(--sb-font-sans);
  font-size: var(--sb-text-sm);        /* 14px — default body in app */
  font-weight: var(--sb-weight-regular);
  line-height: var(--sb-leading-normal);
  color: var(--fg1);
}

.sb-body-lg {
  font-family: var(--sb-font-sans);
  font-size: var(--sb-text-base);      /* 16px — forms, reading copy */
  font-weight: var(--sb-weight-regular);
  line-height: var(--sb-leading-normal);
  color: var(--fg1);
}

.sb-label {
  font-family: var(--sb-font-sans);
  font-size: var(--sb-text-sm);
  font-weight: var(--sb-weight-medium);
  line-height: var(--sb-leading-snug);
  color: var(--fg1);
}

.sb-meta {
  font-family: var(--sb-font-sans);
  font-size: var(--sb-text-xs);        /* 12px — metadata, timestamps */
  font-weight: var(--sb-weight-regular);
  line-height: var(--sb-leading-snug);
  color: var(--fg2);
}

.sb-eyebrow {
  /* Sidebar section label — the ONLY uppercase treatment in the app. */
  font-family: var(--sb-font-sans);
  font-size: 11px;
  font-weight: var(--sb-weight-semibold);
  line-height: 1.2;
  color: var(--fg2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sb-code {
  font-family: var(--sb-font-mono);
  font-size: 0.85em;
  font-weight: var(--sb-weight-regular);
  color: var(--fg1);
  background: var(--bg-muted);
  padding: 0.1em 0.35em;
  border-radius: var(--sb-radius-sm);
}