/*
 * theme.css — Lumière Optical's design tokens.
 * Mood: studio-minimal × swiss. Ivory ground, hairline grid, square corners,
 * bronze hardware-tone accent for links/highlights, near-black for filled
 * actions. Numeric data (mobiles, Rx, order numbers) reads in tabular mono.
 */

:root {
  --canvas: #fafaf9;
  --surface: #fdfdfc;
  --surface-2: #f1eee6;
  --border: #e4e0d5;
  --border-strong: #c7bfab;
  --ink: #14171b;
  --muted: #67696b;

  --accent: #1b1d22;
  --accent-hover: #33363d;
  --accent-ink: #fafaf9;
  --accent-text: #7f6134;
  --accent-strong: #1b1d22;
  --accent-soft: #efe4cd;
  --accent-border: #cbb385;

  --success: #2f6b46;
  --success-ink: #ffffff;
  --success-soft: #e2ede4;
  --success-strong: #245335;
  --warning: #93591c;
  --warning-ink: #ffffff;
  --warning-soft: #f1e6d2;
  --warning-strong: #7c4a15;
  --danger: #9c2b2b;
  --danger-ink: #ffffff;
  --danger-soft: #f3dedc;
  --danger-strong: #832222;

  --chart-1: #1b1d22;
  --chart-2: #7f6134;
  --chart-3: #5c7266;
  --chart-4: #8a5a3c;
  --chart-5: #3f5a6b;
  --chart-6: #6b5b7a;

  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display-weight: 500;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.08em;

  --radius-btn: 0px;
  --radius-card: 0px;
  --radius-input: 0px;
  --border-w: 1px;
  --border-strong-w: 1px;
  --shadow-card: none;
  --shadow-raised: 0 16px 32px -12px rgba(20, 23, 27, 0.16);
  --shadow-btn: none;
  --card-pad: 1.5rem;
  --caps: uppercase;
  --caps-tracking: 0.06em;
  --btn-weight: 500;
  --measure: 68ch;
}

html[data-theme="dark"] {
  --canvas: #131314;
  --surface: #1b1b1c;
  --surface-2: #242424;
  --border: #333331;
  --border-strong: #4c4a44;
  --ink: #f4f2ec;
  --muted: #a3a19a;

  --accent: #f0ece1;
  --accent-hover: #ffffff;
  --accent-ink: #17181a;
  --accent-text: #d2ab6c;
  --accent-strong: #e7d3a6;
  --accent-soft: #2c2618;
  --accent-border: #4d3f24;

  --success: #4c9468;
  --success-ink: #0e1a12;
  --success-soft: #17281c;
  --success-strong: #7cc194;
  --warning: #c48a45;
  --warning-ink: #201404;
  --warning-soft: #2c2010;
  --warning-strong: #e0ac6c;
  --danger: #c15959;
  --danger-ink: #200909;
  --danger-soft: #2e1717;
  --danger-strong: #e08a8a;

  --chart-1: #f0ece1;
  --chart-2: #d2ab6c;
  --chart-3: #8fae9d;
  --chart-4: #c08e64;
  --chart-5: #7d9fb3;
  --chart-6: #a596b8;
}

/*
 * app.css — Vantage Optical's own rules: the ground, the bottom tab bar's
 * safe area, the order tracker line and the three screens no primitive
 * covers. Motion is deliberately absent here (brief: motion "none") — only
 * hover/focus states transition. Tokens only, per the design contract.
 */

/* A near-invisible hairline grid on the page ground — "white space as the
   material", not a texture that competes with the data. */
body {
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--border) 55%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--border) 55%, transparent) 1px, transparent 1px);
  background-size: 96px 96px;
  background-position: center top;
}

/* The bottom tab bar sits above the home indicator on a phone. */
.tabbar {
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -1px 0 var(--border);
}
.tabbar a:hover { color: var(--ink); }

/* ---- Dashboard status tile ------------------------------------------------ */
.stat-tile {
  @apply flex flex-col gap-3 border border-border bg-surface p-5 transition-colors duration-150;
}
.stat-tile:hover { border-color: var(--border-strong); }
.stat-tile .stat-icon {
  @apply grid size-9 place-items-center border border-border-strong text-accent-text;
}
.stat-tile .stat-value {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.stat-tile .stat-label {
  text-transform: var(--caps);
  letter-spacing: var(--caps-tracking);
  color: var(--muted);
}

/* ---- Order / lens tracker: Ordered -> Processing -> Lens Ready -> Specs Ready -> Delivered */
.tracker-row { @apply flex items-start; }
.tracker-step { @apply flex flex-1 flex-col items-center gap-2 text-center; }
.tracker-step .tracker-dot {
  @apply flex size-6 shrink-0 items-center justify-center border text-[10px] font-semibold;
  border-color: var(--border-strong);
  background: var(--surface);
  color: var(--muted);
}
.tracker-step.is-done .tracker-dot { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.tracker-step.is-current .tracker-dot { border-color: var(--accent-text); color: var(--accent-text); background: var(--accent-soft); }
.tracker-connector { @apply h-px flex-1; background: var(--border-strong); margin-top: 0.75rem; }
.tracker-connector.is-done { background: var(--accent); }
.tracker-step .tracker-label {
  font-size: 0.6875rem;
  text-transform: var(--caps);
  letter-spacing: var(--caps-tracking);
  color: var(--muted);
}
.tracker-step.is-done .tracker-label, .tracker-step.is-current .tracker-label { color: var(--ink); }

/* ---- Rx figures: an optometrist's own chart --------------------------- */
.rx-table { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.rx-table th { font-family: var(--font-body); }

/* Mono numerals wherever a mobile, an order number or an Rx figure appears. */
.mono-figure { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---- Kanban column (Issues board) -------------------------------------- */
.board-col { @apply flex min-w-0 flex-col gap-3 border border-border bg-surface-2 p-3; }
.board-col-head { @apply flex items-center justify-between px-1 pb-1; }

/* Product card image gets the one deliberate softness in an otherwise square system. */
.product-card .media { border-radius: 1.25rem; }