/* Repair Lab design tokens. Loaded first on every page.
   v7 look: near-white page, dark grey text, one standard blue accent, Instrument Sans throughout,
   medium rounded corners, 1px borders and very light shadows. The pastel names below all map to one light grey.
   Token NAMES are frozen because page stylesheets use them; only values change. New tokens are added at the end. */

/* Instrument Sans is a variable font (wght axis), self-hosted. SIL Open Font License 1.1, see fonts/OFL-InstrumentSans.txt. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Surfaces and text */
  --paper: #fafafa;          /* page background, near white */
  --surface-1: #ffffff;      /* cards, header, tables, inputs */
  --surface-sunk: #f4f4f5;   /* wells, table header row, code chips */
  --ink-1: #18181b;          /* body text, dark grey */
  --ink-2: #3f3f46;          /* secondary text */
  --ink-soft: #63636b;       /* muted text, 5.9:1 on paper */
  --hairline: #e4e4e7;       /* borders */
  --hairline-strong: #d4d4d8; /* button and card borders */
  --input-line: #8a8a93;     /* form-control border: 3.65:1 on paper */

  /* Brand and status. --green is the frozen name of the primary accent, which is now blue. */
  --green: #2563eb;          /* primary accent (blue): buttons, links, progress, selected states */
  --green-deep: #1d4ed8;     /* hover on the accent */
  --green-tint: #eff4ff;     /* selected backgrounds */
  --orange: #c4570f;         /* non-text fills only: the pending hatch */
  --orange-text: #9a3f07;
  --orange-tint: #fbefe4;    /* light stripe of the pending hatch */

  --notice-bg: #fdf6e3;      /* the one yellow: demo strip, warnings, sample-number notes */
  --notice-line: #e9d59f;
  --notice-ink: #5b4300;

  --ok-line: #c7d7fe;
  --bad-line: #f1c0bb;
  --info-line: #c7d7fe;
  --focus-ring: #2563eb;

  /* Dark surface: only where one is truly needed (skip link). No dark cards. */
  --night: #18181b;
  --night-2: #27272a;
  --night-line: rgba(255, 255, 255, .14);
  --on-night: #ffffff;
  --on-night-soft: #b7bfcc;
  --lime: #c7d7fe;

  /* Type */
  --font-text: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-text);
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --fs-xs: .8125rem;
  --fs-sm: .875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 1.875rem;
  --fs-3xl: 2.25rem;

  /* Shape and depth: borders do the work, shadows only on dialogs, menus and toasts */
  --r-sm: 8px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;

  --shadow-card: 0 1px 2px rgba(24, 24, 27, .04);
  --shadow-lift: 0 1px 2px rgba(24, 24, 27, .05), 0 8px 24px -12px rgba(24, 24, 27, .18);
  --shadow-pop: 0 16px 40px -16px rgba(24, 24, 27, .3);

  /* Motion. Everything that moves is keyed off html.motion and turned off by prefers-reduced-motion. */
  --ease-out: cubic-bezier(.2, .75, .25, 1);
  --ease-spring: cubic-bezier(.3, 1.3, .5, 1);
  --dur-fast: 140ms;
  --dur-med: 260ms;
  --dur-slow: 700ms;

  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 5rem;

  /* Legacy names used by app.css, remapped (theme.css sets them again after app.css) */
  --bg: var(--paper);
  --surface: var(--surface-1);
  --surface-2: var(--surface-sunk);
  --ink: var(--ink-1);
  --muted: var(--ink-soft);
  --line: var(--hairline);
  --line-strong: var(--hairline-strong);
  --brand: var(--green);
  --brand-strong: var(--green-deep);
  --brand-soft: var(--green-tint);
  --leaf: var(--green);
  --radius: var(--r-md);
  --radius-lg: var(--r-lg);
  --shadow: var(--shadow-card);
  --focus: 0 0 0 2px #ffffff, 0 0 0 4px var(--focus-ring);
  --font: var(--font-text);
  --mono: var(--font-mono);

  /* "Gradients": all flat colours now. Names kept because page stylesheets use them. */
  --grad-brand: #2563eb;
  --grad-button: #2563eb;
  --grad-button-hover: #1d4ed8;
  --grad-fill: #2563eb;
  --grad-night: #18181b;
  /* Page-header band, painted edge to edge with border-image (see theme.css .page-head):
     flat paper, and the last pixel is the hairline under the band. */
  --grad-band: linear-gradient(180deg, var(--paper) calc(100% - 1px), var(--hairline) calc(100% - 1px));
  --glow-band: none;

  /* Success: its own green, separate from the blue accent (checked in, ready, verified). */
  --success: #1e6b3c;
  --success-bg: #e9f3ec;
  --success-line: #b9d8c3;

  /* v6: warm second colour and soft pastel washes for big panels */
  --coral: #2563eb;
  --coral-ink: #3f3f46;
  --coral-tint: #f4f4f5;
  --sun-tint: #f4f4f5;
  --mint-tint: #f4f4f5;
  --sky-tint: #f4f4f5;
  --violet-tint: #f4f4f5;
}