/*
 * Buggie site kit: design tokens
 *
 * Every token of Buggie/UI/Components/Theme.swift as a CSS custom property, 1 CSS px = 1 app point.
 * Theme.swift is the source of truth. Where the prototype (~/Downloads/buggy/app-mock.css) disagrees,
 * Theme.swift wins. The "rendered surface" values at the end are measured from the real app renders
 * (output/launch-film/assets/native) because the app paints its light fills over a system material.
 *
 * Always light: Buggie keeps its own surfaces light in dark mode, so nothing here reacts to
 * prefers-color-scheme. Graphite is the control colour. Red is for recording or failure only,
 * green for a healthy connection only.
 */
:root {
  /* ---- Type ------------------------------------------------------------------------------ */
  --bk-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", system-ui, sans-serif;
  --bk-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --bk-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;

  /* Theme.Text: the app's scale (size in pt). Pair with a weight below. */
  --bk-text-micro: 9px;     /* badges, smallest sub-labels */
  --bk-text-caption: 10px;  /* metadata lines, tooltip text */
  --bk-text-label: 11px;    /* eyebrows, secondary labels, chips */
  --bk-text-body: 12px;     /* default body text */
  --bk-text-emphasis: 13px; /* a row's primary line (default semibold) */
  --bk-text-title: 15px;    /* section and panel headings (default semibold) */
  --bk-text-display: 30px;  /* onboarding step headlines (default bold) */

  --bk-weight-regular: 400;
  --bk-weight-medium: 500;
  --bk-weight-semibold: 600;
  --bk-weight-bold: 700;
  --bk-weight-heavy: 800;

  /* buggieEyebrow(): micro bold, 1.2 pt tracking, uppercase by the caller. */
  --bk-eyebrow-size: 9px;
  --bk-eyebrow-tracking: 1.2px;

  /* ---- Brand ----------------------------------------------------------------------------- */
  --bk-brand-glyph-on-light: #171619;
  --bk-brand-tile-top: #1c1b1f;
  --bk-brand-tile-bottom: #141316;
  --bk-brand-tile: linear-gradient(180deg, #1c1b1f, #141316);

  /* ---- Light surfaces (Theme.Light) ------------------------------------------------------- */
  --bk-ink: #242327;
  --bk-muted: #77757d;
  --bk-faint: #aaa4ad;
  --bk-line: #dedde1;
  --bk-panel: rgba(249, 249, 250, 0.94);       /* #F9F9FA @ .94 */
  --bk-bar-fill: rgba(248, 246, 242, 0.95);    /* #F8F6F2 @ .95 */
  --bk-bar-stroke: #e3ddef;
  --bk-strip-fill: #fffdfa;
  --bk-strip-stroke: #ded9e1;
  --bk-icon: #6f6973;
  --bk-icon-strong: #625d67;

  /* ---- Dark surfaces (Theme.Dark: HUD, tooltips) ---------------------------------------- */
  --bk-dark-ink: #ffffff;
  --bk-dark-ink-soft: rgba(255, 255, 255, 0.85);
  --bk-dark-muted: rgba(255, 255, 255, 0.62);
  --bk-dark-dim: rgba(255, 255, 255, 0.5);
  --bk-dark-faint: rgba(255, 255, 255, 0.38);
  --bk-dark-ghost: rgba(255, 255, 255, 0.25);
  --bk-dark-line: rgba(255, 255, 255, 0.10);
  --bk-dark-fill: rgba(255, 255, 255, 0.06);
  --bk-dark-fill-strong: rgba(255, 255, 255, 0.12);
  --bk-dark-tooltip: rgba(44, 39, 48, 0.96);   /* #2C2730 @ .96 */

  /* ---- Accent (graphite; the control colour) --------------------------------------------- */
  --bk-accent: #39343d;
  --bk-accent-strong: #27232b;
  --bk-accent-soft: #ece9ed;
  --bk-accent-border: #d3cfd5;
  --bk-accent-shadow: rgba(57, 52, 61, 0.17);  /* #39343D @ .17 */
  --bk-selected-fill: #f1eff1;
  --bk-selected-border: #d8d4da;
  --bk-selected-ink: #514c55;

  /* The prototype's accent-picker swatches. Optional extras: the app ships graphite. */
  --bk-swatch-graphite: #39343d;
  --bk-swatch-violet: #6f50d9;
  --bk-swatch-coral: #ee684f;
  --bk-swatch-jade: #299c7a;
  --bk-swatch-blue: #3478d4;

  /* ---- Status (never an accent) ---------------------------------------------------------- */
  --bk-red: #ef4e55;          /* recording, failure */
  --bk-red-ink: #c63d44;
  --bk-red-soft: #fff0f1;
  --bk-red-border: #efcdd0;
  --bk-green: #36a26f;        /* healthy connection */
  --bk-amber-ink: #87671a;    /* caution, "needs your answer" */
  --bk-amber-soft: #fbf3dc;
  --bk-amber-border: #ede0be;

  /* ---- Geometry -------------------------------------------------------------------------- */
  --bk-radius-small: 6px;     /* tooltips, chips, small tags */
  --bk-radius-medium: 8px;    /* buttons, rows, cards */
  --bk-radius-large: 12px;    /* panels and menus */
  --bk-radius-bar: 13px;      /* Theme.Radius.bar (the live capture bar draws 11) */
  --bk-radius-window: 16px;   /* quick window, project window */

  --bk-space-xs: 4px;
  --bk-space-s: 6px;
  --bk-space-m: 8px;
  --bk-space-l: 12px;
  --bk-space-xl: 16px;
  --bk-space-xxl: 24px;

  --bk-bar-button: 38px;      /* Theme.Metric.barButton */
  --bk-hit-target: 28px;      /* Theme.Metric.hitTarget */
  --bk-hold-to-open: 320ms;   /* Theme.Metric.holdToOpen */

  /* ---- Shadows --------------------------------------------------------------------------- */
  /* SwiftUI .shadow(radius: r) is a Gaussian of sigma r, i.e. CSS blur 2r. Buggie applies it to
     views drawn in two filled layers (material + tinted fill), and SwiftUI shadows each layer, so on
     screen a shadow is close to twice its nominal opacity. The values below are fitted to the real
     renders (whose export draws shadows upside down; these fall downwards, as in the app). */
  /* buggiePanel(): Accent.shadow, radius 18, y 8. */
  --bk-shadow-panel: 0 8px 36px rgba(57, 52, 61, 0.3);
  /* Quick window and capture shells: #4D3D5E @ .15 r14 y10, plus a 1 pt contact shadow. */
  --bk-shadow-bar: 0 10px 28px rgba(77, 61, 94, 0.28), 0 1px 2px rgba(0, 0, 0, 0.12);
  /* Menus (Fix target, audio source): #2C2730 @ .24 r17 y15. */
  --bk-shadow-menu: 0 15px 34px rgba(44, 39, 48, 0.42);
  /* Markup strip: #2C2730 @ .2 r14 y12. */
  --bk-shadow-strip: 0 12px 28px rgba(44, 39, 48, 0.36);
  /* Tooltip: #2C2730 @ .2 r9 y7 (one layer). */
  --bk-shadow-tooltip: 0 7px 18px rgba(44, 39, 48, 0.2);
  /* Brand tile: black @ .15 r2.5 y2. */
  --bk-shadow-tile: 0 2px 5px rgba(0, 0, 0, 0.15);

  /* ---- Rendered surfaces (measured from the real renders) --------------------------------- */
  /* The app fills these over NSVisualEffect material, so on screen they read a little deeper
     than the raw token. Use these when a page must match a screenshot. */
  --bk-surface-bar: #f7f6f2;      /* capture bar */
  --bk-surface-quick: #f5f4f0;    /* quick window, Fix menu, markup strip */
  --bk-surface-menu: #f4f3f3;     /* audio source menu */
  --bk-surface-panel: #f9f9fa;    /* Latest */

  /* Project window (ProjectStyle.swift) */
  --bk-project-window: #f8f8f9;
  --bk-project-sidebar: #ebe9ec;
  --bk-project-titlebar: #efedef;
  --bk-project-line: #d8d6da;
  --bk-project-card-line: #dcd9df;
  --bk-project-row-line: #e6e3e8;
  --bk-project-ink: #29262d;
  --bk-project-muted: #85818a;
  --bk-project-faint: #939097;

  /* Markup palette (ToolPieGeometry.colors) */
  --bk-draw-red: #ff4554;
  --bk-draw-black: #171519;
  --bk-draw-white: #ffffff;
  --bk-draw-yellow: #ffd84a;
  --bk-draw-purple: #845df9;

  /* ---- Marketing type scale -------------------------------------------------------------- */
  /* Big headings in the app's own family: SF Pro Display bold with the tight tracking of the
     project window's "Captures" title (28 pt, -1.1 pt ≈ -0.04em), and the uppercase letter-spaced
     eyebrow over it ("CAPTURE LIBRARY": 8 pt bold, 1 pt tracking ≈ 0.125em). */
  --bk-mkt-eyebrow-size: 12px;
  --bk-mkt-eyebrow-tracking: 0.14em;
  --bk-mkt-eyebrow-color: #8b8790;
  --bk-mkt-h1: clamp(44px, 6.4vw, 88px);
  --bk-mkt-h2: clamp(34px, 4.4vw, 56px);
  --bk-mkt-h3: clamp(24px, 2.6vw, 32px);
  --bk-mkt-tracking-h1: -0.045em;
  --bk-mkt-tracking-h2: -0.04em;
  --bk-mkt-tracking-h3: -0.03em;
  --bk-mkt-lead: clamp(17px, 1.5vw, 20px);
  --bk-mkt-body: 16px;
  --bk-mkt-ink: #29262d;
  --bk-mkt-muted: #85818a;
}

/* Optional accent switch for sites that want the prototype's picker. The app itself is graphite. */
[data-bk-accent="violet"] { --bk-accent: #6f50d9; --bk-accent-strong: #5a3fc0; }
[data-bk-accent="coral"]  { --bk-accent: #ee684f; --bk-accent-strong: #d4533b; }
[data-bk-accent="jade"]   { --bk-accent: #299c7a; --bk-accent-strong: #1f8265; }
[data-bk-accent="blue"]   { --bk-accent: #3478d4; --bk-accent-strong: #2862b3; }

/* ---- Marketing type helpers ------------------------------------------------------------- */
.bk-mkt-eyebrow {
  margin: 0;
  font: var(--bk-weight-bold) var(--bk-mkt-eyebrow-size)/1.2 var(--bk-font);
  letter-spacing: var(--bk-mkt-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--bk-mkt-eyebrow-color);
}
.bk-mkt-h1, .bk-mkt-h2, .bk-mkt-h3 {
  margin: 0;
  font-family: var(--bk-font-display);
  font-weight: var(--bk-weight-bold);
  color: var(--bk-mkt-ink);
  text-wrap: balance;
}
.bk-mkt-h1 { font-size: var(--bk-mkt-h1); line-height: 0.98; letter-spacing: var(--bk-mkt-tracking-h1); }
.bk-mkt-h2 { font-size: var(--bk-mkt-h2); line-height: 1.02; letter-spacing: var(--bk-mkt-tracking-h2); }
.bk-mkt-h3 { font-size: var(--bk-mkt-h3); line-height: 1.1; letter-spacing: var(--bk-mkt-tracking-h3); }
.bk-mkt-lead {
  margin: 0;
  font: var(--bk-weight-regular) var(--bk-mkt-lead)/1.45 var(--bk-font);
  color: var(--bk-mkt-muted);
  text-wrap: pretty;
}