/*
 * theme.css — SheetView's design-system values.
 * Soft-saas mood pulled quiet: 10px corners, one soft shadow step, tabular
 * numerals and mono cell-tags so the dashboard reads as a data instrument.
 */

:root {
  --canvas: #f7f8f6;
  --surface: #fbfcfb;
  --surface-2: #eef1ee;
  --border: #e0e4de;
  --border-strong: #c7cdc4;
  --ink: #1e211f;
  --muted: #636463;
  --accent: #178754;
  --accent-hover: #136c44;
  --accent-ink: #ffffff;
  --accent-text: #146c4a;
  --accent-strong: #137247;
  --accent-soft: #e4f2e9;
  --accent-border: #bfe0cc;
  --success: #178754;
  --success-ink: #ffffff;
  --success-soft: #e4f2e9;
  --success-strong: #146c4a;
  --warning: #a15f13;
  --warning-ink: #ffffff;
  --warning-soft: #f5ecdd;
  --warning-strong: #8a4f0d;
  --danger: #b3261e;
  --danger-ink: #ffffff;
  --danger-soft: #f7e2e0;
  --danger-strong: #942019;
  --chart-1: #178754;
  --chart-2: #1d6f91;
  --chart-3: #b98a2e;
  --chart-4: #7d5ba6;
  --chart-5: #c1554f;
  --chart-6: #4c8c6b;

  --font-display: "Manrope", 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, Consolas, monospace;
  --display-weight: 700;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.06em;

  --radius-btn: 10px;
  --radius-card: 10px;
  --radius-input: 10px;
  --radius-lg: 10px;
  --radius-xl: 10px;
  --border-w: 1px;
  --border-strong-w: 1px;
  --shadow-card: 0 1px 2px color-mix(in srgb, var(--ink) 5%, transparent), 0 6px 16px color-mix(in srgb, var(--ink) 6%, transparent);
  --shadow-raised: 0 10px 30px color-mix(in srgb, var(--ink) 14%, transparent);
  --shadow-btn: none;
  --card-pad: 1.5rem;
  --caps: uppercase;
  --caps-tracking: 0.03em;
  --btn-weight: 600;
  --measure: 68ch;
}

html[data-theme="dark"] {
  --canvas: #14171a;
  --surface: #1b1f1e;
  --surface-2: #232827;
  --border: #2c322f;
  --border-strong: #3d443f;
  --ink: #edf1ed;
  --muted: #9aa39d;
  --accent: #22a06a;
  --accent-hover: #2bb87b;
  --accent-ink: #06170e;
  --accent-text: #4fe0a0;
  --accent-strong: #6fe3ae;
  --accent-soft: #17301f;
  --accent-border: #285c3e;
  --success: #22a06a;
  --success-ink: #06170e;
  --success-soft: #163625;
  --success-strong: #6fe3ae;
  --warning: #d68a3e;
  --warning-ink: #201200;
  --warning-soft: #3a2917;
  --warning-strong: #f0b473;
  --danger: #dd6b62;
  --danger-ink: #200504;
  --danger-soft: #3a1e1c;
  --danger-strong: #f3948c;
  --chart-1: #34c286;
  --chart-2: #4ea8d9;
  --chart-3: #e0ad4f;
  --chart-4: #ab8adf;
  --chart-5: #e08078;
  --chart-6: #7fc7a2;
}

/*
 * app.css — SheetView's own ground: the faint spreadsheet-grid behind the
 * sign-in card. Everything else is primitives + utilities from tokens.
 */

.auth-grid {
  background-color: var(--canvas);
  background-image:
    linear-gradient(color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: center;
}