/* n1lab Design System — Foundations
   Import this file in any artifact. All tokens are CSS custom properties on :root.
   Dark mode is the default; light mode is opt-in via [data-theme="light"]. */

@import url("https://rsms.me/inter/inter.css");

:root {
  /* ─────────────────────────────────────────────────────────────
     Color — Neutrals (dark, default)
  ───────────────────────────────────────────────────────────── */
  --bg-primary:   #0B0D0F;   /* app background */
  --bg-secondary: #12161A;   /* cards */
  --bg-tertiary:  #1A2025;   /* elevated surfaces */
  --border-subtle:#26303A;   /* separators */
  --border-strong:#3A4654;   /* focused / pressed borders */

  --text-primary:   #F5F7FA;
  --text-secondary: #A8B3BD;
  --text-tertiary:  #73808C;
  --text-disabled:  #4D5762;

  /* Accent — single, muted desaturated blue. Means: active / selected / focused / today / progress */
  --accent-primary:      #6C8DFF;
  --accent-primary-hover:#849FFF;
  --accent-primary-soft: #1C2B52;     /* tinted background for selected chips, etc */
  --accent-primary-ring: rgba(108, 141, 255, 0.35);

  /* Semantic — desaturated. The app does not reward or punish behaviour. */
  --success: #4FA67A;
  --success-soft: #1A2E26;
  --warning: #D1A15C;
  --warning-soft: #2E2620;
  --danger:  #C56B6B;
  --danger-soft:  #2E1F1F;
  --neutral-signal: #7E8792;

  /* Chart palette — cool, low-saturation. Use in this order. */
  --chart-1: #6C8DFF;
  --chart-2: #7E8792;
  --chart-3: #4FA67A;
  --chart-4: #D1A15C;
  --chart-5: #A88FBF;
  --chart-6: #6FA3B8;

  /* ─────────────────────────────────────────────────────────────
     Typography
  ───────────────────────────────────────────────────────────── */
  --font-sans: "Inter", "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;

  /* Display */
  --text-display-lg: 700 40px/1.1 var(--font-sans);
  --text-display-md: 700 32px/1.15 var(--font-sans);
  /* Headers */
  --text-h1: 700 28px/1.2 var(--font-sans);
  --text-h2: 650 22px/1.25 var(--font-sans);
  --text-h3: 650 18px/1.3 var(--font-sans);
  --text-h4: 600 16px/1.35 var(--font-sans);
  /* Body */
  --text-body-lg: 400 17px/1.5 var(--font-sans);
  --text-body:    400 15px/1.5 var(--font-sans);
  --text-body-sm: 400 13px/1.45 var(--font-sans);
  /* Label / caption / data */
  --text-label:   500 13px/1.3 var(--font-sans);
  --text-caption: 400 12px/1.35 var(--font-sans);
  --text-data:    500 15px/1.3 var(--font-mono);   /* tabular numerics */

  /* Letter spacing — slightly tighter on display, neutral elsewhere */
  --tracking-display: -0.02em;
  --tracking-tight: -0.01em;
  --tracking-normal: 0em;
  --tracking-wide: 0.04em;

  /* ─────────────────────────────────────────────────────────────
     Spacing — strict 4pt grid
  ───────────────────────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Touch targets */
  --touch-min: 44px;

  /* ─────────────────────────────────────────────────────────────
     Radius — soft but not bubbly
  ───────────────────────────────────────────────────────────── */
  --radius-sm: 8px;     /* chips, inputs */
  --radius-md: 14px;    /* cards, buttons */
  --radius-lg: 20px;    /* sheets, modals */
  --radius-xl: 28px;    /* full-screen sheets */
  --radius-pill: 999px; /* pill chips, sliders */

  /* ─────────────────────────────────────────────────────────────
     Shadows — restrained. Dark relies on borders + layered surfaces.
  ───────────────────────────────────────────────────────────── */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.40);   /* dialogs, toasts */

  /* ─────────────────────────────────────────────────────────────
     Motion
  ───────────────────────────────────────────────────────────── */
  --motion-tap:   90ms;
  --motion-card: 200ms;
  --motion-modal:240ms;

  --ease-standard: cubic-bezier(0.25, 1, 0.5, 1);    /* gentle spring, no bounce */
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);

  /* ─────────────────────────────────────────────────────────────
     Z-index
  ───────────────────────────────────────────────────────────── */
  --z-base: 0;
  --z-sticky: 10;
  --z-tabbar: 20;
  --z-sheet: 50;
  --z-modal: 60;
  --z-toast: 70;
}

/* Light mode — secondary, mirrors structure */
[data-theme="light"] {
  --bg-primary:   #F5F7FA;
  --bg-secondary: #FFFFFF;
  --bg-tertiary:  #F0F2F5;
  --border-subtle:#E1E5EA;
  --border-strong:#C7CDD4;

  --text-primary:   #0B0D0F;
  --text-secondary: #4D5762;
  --text-tertiary:  #73808C;
  --text-disabled:  #A8B3BD;

  --accent-primary-soft: #E5EBFF;
  --accent-primary-ring: rgba(108, 141, 255, 0.30);

  --success-soft: #E5F1EB;
  --warning-soft: #F4ECDD;
  --danger-soft:  #F4E0E0;

  --shadow-sm: 0 1px 2px rgba(11, 13, 15, 0.06);
  --shadow-md: 0 2px 8px rgba(11, 13, 15, 0.08);
  --shadow-lg: 0 8px 24px rgba(11, 13, 15, 0.12);
}

/* ─────────────────────────────────────────────────────────────
   Base elements — semantic mappings
─────────────────────────────────────────────────────────────── */
* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;  /* tabular nums GLOBALLY */
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-primary);
  color: var(--text-primary);
  font: var(--text-body);
  font-feature-settings: "cv11", "ss01", "ss03";
  letter-spacing: var(--tracking-normal);
}

h1, .h1 { font: var(--text-h1); letter-spacing: var(--tracking-tight); margin: 0; color: var(--text-primary); }
h2, .h2 { font: var(--text-h2); letter-spacing: var(--tracking-tight); margin: 0; color: var(--text-primary); }
h3, .h3 { font: var(--text-h3); margin: 0; color: var(--text-primary); }
h4, .h4 { font: var(--text-h4); margin: 0; color: var(--text-primary); }

.display-lg { font: var(--text-display-lg); letter-spacing: var(--tracking-display); }
.display-md { font: var(--text-display-md); letter-spacing: var(--tracking-display); }

p, .body { font: var(--text-body); color: var(--text-primary); margin: 0; }
.body-lg  { font: var(--text-body-lg);  color: var(--text-primary); }
.body-sm  { font: var(--text-body-sm);  color: var(--text-secondary); }
.label    { font: var(--text-label);    color: var(--text-secondary); letter-spacing: var(--tracking-tight); }
.caption  { font: var(--text-caption);  color: var(--text-tertiary); }
.data     { font: var(--text-data);     color: var(--text-primary); }

.muted     { color: var(--text-secondary); }
.dim       { color: var(--text-tertiary); }
.accent    { color: var(--accent-primary); }
.ok        { color: var(--success); }
.warn      { color: var(--warning); }
.bad       { color: var(--danger); }

/* Card primitive */
.card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.card--elevated {
  background: var(--bg-tertiary);
}

/* Hairline rule */
hr, .rule {
  border: 0;
  border-top: 1px solid var(--border-subtle);
  margin: 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Selection */
::selection {
  background: var(--accent-primary-soft);
  color: var(--text-primary);
}