/*
 * theme.css — Lucent Optical design-system values.
 * Warm ivory boutique palette: near-white surfaces, near-black ink and
 * buttons, a single amber accent reserved for links and highlights.
 */

:root {
  --canvas: #faf8f4;
  --surface: #fdfcfa;
  --surface-2: #f2ece0;
  --border: #e7e0d2;
  --border-strong: #d2c6ad;
  --ink: #1c1a17;
  --muted: #6c6a66;

  --accent: #1c1a17;
  --accent-hover: #322e27;
  --accent-ink: #fdfcfa;
  --accent-text: #8b5b2c;
  --accent-strong: #1c1a17;
  --accent-soft: #f1e2c6;
  --accent-border: #e0c48f;

  --success: #2f7d4f;
  --success-ink: #ffffff;
  --success-soft: #e3efe2;
  --success-strong: #1f6b3c;
  --warning: #b3701f;
  --warning-ink: #ffffff;
  --warning-soft: #f6e8d1;
  --warning-strong: #935a12;
  --danger: #b3402c;
  --danger-ink: #ffffff;
  --danger-soft: #f6e0d9;
  --danger-strong: #96311f;

  --chart-1: #8b5b2c;
  --chart-2: #1c1a17;
  --chart-3: #b3701f;
  --chart-4: #2f7d4f;
  --chart-5: #5b7a95;
  --chart-6: #a24a5c;

  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-body: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display-weight: 600;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.06em;

  --radius-btn: 999px;
  --radius-card: 1.5rem;
  --radius-input: 0.875rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --border-w: 1px;
  --border-strong-w: 1px;
  --card-pad: 1.75rem;
  --btn-weight: 600;
  --measure: 68ch;

  --shadow-card: 0 1px 2px color-mix(in srgb, var(--ink) 5%, transparent),
    0 14px 30px -14px color-mix(in srgb, var(--ink) 22%, transparent);
  --shadow-raised: 0 24px 56px -18px color-mix(in srgb, var(--ink) 32%, transparent);
  --shadow-btn: 0 1px 2px color-mix(in srgb, var(--ink) 12%, transparent);
}

html[data-theme="dark"] {
  --canvas: #16130f;
  --surface: #211c15;
  --surface-2: #2a2318;
  --border: #3a3122;
  --border-strong: #52452e;
  --ink: #f5f0e6;
  --muted: #b2a996;

  --accent: #f5f0e6;
  --accent-hover: #e6ddc9;
  --accent-ink: #1c1a17;
  --accent-text: #d99a56;
  --accent-strong: #f5f0e6;
  --accent-soft: #3a2c18;
  --accent-border: #5c4526;

  --success: #3f9463;
  --success-ink: #0d1a12;
  --success-soft: #17301f;
  --success-strong: #83d6a4;
  --warning: #cf9a52;
  --warning-ink: #1c1a17;
  --warning-soft: #3a2c16;
  --warning-strong: #e2b57c;
  --danger: #c1573d;
  --danger-ink: #ffffff;
  --danger-soft: #3a2019;
  --danger-strong: #e4917a;

  --chart-1: #d99a56;
  --chart-2: #f5f0e6;
  --chart-3: #cf9a52;
  --chart-4: #83d6a4;
  --chart-5: #8fb0cc;
  --chart-6: #cf8598;

  --shadow-card: 0 1px 2px color-mix(in srgb, black 30%, transparent),
    0 18px 34px -16px color-mix(in srgb, black 60%, transparent);
  --shadow-raised: 0 28px 60px -18px color-mix(in srgb, black 70%, transparent);
  --shadow-btn: 0 1px 2px color-mix(in srgb, black 40%, transparent);
}

/*
 * app.css — THIS APP'S OWN CSS, for what no primitive and no utility covers:
 * the one screen that makes this app itself — a timer's dial, a kanban
 * board's columns, a seating plan, a game grid. Write those here, named for
 * what they are, in tokens only (var(--accent), var(--radius-card),
 * var(--font-display)). It loads last, after design.css and theme.css, and
 * wins. Ships empty.
 *
 * Not for restyling a primitive: those live in tailwind/components.css and
 * are yours to edit there. Not for colours: those live in theme.css.
 */

body {
  background:
    radial-gradient(60rem 30rem at 12% -10%, color-mix(in srgb, var(--accent-soft) 55%, transparent), transparent 60%),
    radial-gradient(50rem 26rem at 100% 0%, color-mix(in srgb, var(--accent-soft) 35%, transparent), transparent 55%),
    var(--canvas);
  background-attachment: fixed;
}

/* Horizontal strips — the recent-customers row, the prescription timeline —
   scroll without a visible scrollbar; the content itself signals more. */
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* An empty search-results panel takes no space and casts no shadow. */
#search-results:empty { display: none; }

/* Count-up target: rests at its resolved value until app.js animates it in
   from zero as it enters the viewport — the one motion this page allows. */
[data-countup] { font-variant-numeric: tabular-nums; }

@media (max-width: 380px) {
  .stat-hero .stat-num { font-size: 3rem; }
}