/* ============================================================
   Obra shadcn/ui Design System — Core tokens
   Source: Obra shadcn/ui Pro 1.8.3 (Vega style of shadcn/ui)
   ============================================================ */

/* --------- Fonts (loaded from Google Fonts) --------- */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800&family=Geist+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700&family=Georgia&display=swap');

:root {
  /* =========================================================
     PRIMITIVE / RAW COLORS
     Tailwind neutral (the "In use" set from the Obra kit)
     + the 4 red tones the kit keeps by default
     ========================================================= */

  /* Neutrals (Tailwind neutral) */
  --neutral-50:  #FAFAFA;
  --neutral-100: #F5F5F5;
  --neutral-200: #E5E5E5;
  --neutral-300: #D4D4D4;
  --neutral-400: #A3A3A3;
  --neutral-500: #737373;
  --neutral-600: #525252;
  --neutral-700: #404040;
  --neutral-800: #262626;
  --neutral-900: #171717;
  --neutral-950: #0A0A0A;

  /* Red (destructive) — only the 4 tones in use */
  --red-200:  #FECACA;
  --red-600:  #DC2626;
  --red-700:  #B91C1C;
  --red-950:  #450A0A;

  /* Blue (chart) — the 4 tones in use */
  --blue-400: #2B7FFF;
  --blue-500: #155DFC;
  --blue-600: #1447E6;
  --blue-700: #193CB8;

  /* Static */
  --white: #FFFFFF;
  --black: #000000;

  /* =========================================================
     SEMANTIC COLORS (light theme — shadcn mapping)
     ========================================================= */
  --background:          var(--white);
  --foreground:          var(--neutral-950);

  --muted:               var(--neutral-100);
  --muted-foreground:    var(--neutral-500);

  --card:                var(--white);
  --card-foreground:     var(--neutral-950);

  --popover:             var(--white);
  --popover-foreground:  var(--neutral-950);

  --primary:             var(--neutral-900);   /* #171717 */
  --primary-foreground:  var(--neutral-50);

  --secondary:           var(--neutral-100);
  --secondary-foreground: var(--neutral-900);

  --accent:              var(--neutral-100);
  --accent-foreground:   var(--neutral-900);

  --destructive:         var(--red-600);
  --destructive-foreground: var(--white);

  --border:              var(--neutral-200);
  --input:               var(--neutral-200);
  --ring:                var(--neutral-950);

  /* Chart */
  --chart-1: var(--neutral-900);
  --chart-2: var(--neutral-500);
  --chart-3: var(--neutral-300);
  --chart-4: var(--blue-500);
  --chart-5: var(--red-600);

  /* =========================================================
     RADII
     ========================================================= */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius:    10px;   /* default */
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* =========================================================
     SHADOWS
     ========================================================= */
  --shadow-2xs: 0 1px 0 0 rgba(0,0,0,0.05);
  --shadow-xs:  0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-sm:  0 1px 3px 0 rgba(0,0,0,0.10), 0 1px 2px -1px rgba(0,0,0,0.10);
  --shadow-md:  0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.10);
  --shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -4px rgba(0,0,0,0.10);
  --shadow-xl:  0 20px 25px -5px rgba(0,0,0,0.10), 0 8px 10px -6px rgba(0,0,0,0.10);
  --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.25);
  --shadow-outline-btn: 0 2px 2px 0 rgba(0,0,0,0.05); /* outline button lift */

  /* =========================================================
     SPACING (Tailwind's 4px base, kit uses these)
     ========================================================= */
  --space-0: 0;
  --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;
  --space-20: 80px;

  /* =========================================================
     TYPOGRAPHY — fonts
     ========================================================= */
  --font-sans: 'Geist', 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-ui:   'Inter', 'Geist', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-serif:'Georgia', 'Times New Roman', Times, serif;

  /* Base type */
  --fs-h1: 48px;   --lh-h1: 1;    --tr-h1: -0.01em;    --fw-h1: 700;
  --fs-h2: 36px;   --lh-h2: 1.1;  --tr-h2: -0.01em;    --fw-h2: 700;
  --fs-h3: 24px;   --lh-h3: 1.2;  --tr-h3: -0.01em;    --fw-h3: 700;
  --fs-h4: 20px;   --lh-h4: 1.3;  --tr-h4: -0.01em;    --fw-h4: 600;

  --fs-p-lg: 18px; --lh-p-lg: 1.55;
  --fs-p:    16px; --lh-p:    1.5;
  --fs-p-sm: 14px; --lh-p-sm: 1.5;   --tr-p-sm: 0.005em;
  --fs-p-xs: 12px; --lh-p-xs: 1.5;   --tr-p-xs: 0.015em;
  --fs-cap:  11px; --lh-cap:  1.4;   --tr-cap:  0.01em;

  --fs-mono: 14px;

  /* =========================================================
     Foregrounds / text tokens (handy aliases)
     ========================================================= */
  --fg-1: var(--neutral-950);  /* primary text */
  --fg-2: var(--neutral-700);  /* secondary text */
  --fg-3: var(--neutral-500);  /* muted text, captions */
  --fg-4: var(--neutral-400);  /* placeholder, disabled */
  --fg-inverse: var(--neutral-50);

  /* =========================================================
     Motion
     ========================================================= */
  --ease-std:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:  cubic-bezier(0, 0, 0.2, 1);
  --ease-in:   cubic-bezier(0.4, 0, 1, 1);
  --dur-fast:  120ms;
  --dur-base:  180ms;
  --dur-slow:  300ms;
}

/* =========================================================
   DARK THEME — apply with [data-theme="dark"] or .dark
   ========================================================= */
[data-theme="dark"], .dark {
  --background:          var(--neutral-950);
  --foreground:          var(--neutral-50);

  --muted:               var(--neutral-900);
  --muted-foreground:    var(--neutral-400);

  --card:                var(--neutral-950);
  --card-foreground:     var(--neutral-50);

  --popover:             var(--neutral-900);
  --popover-foreground:  var(--neutral-50);

  --primary:             var(--neutral-50);
  --primary-foreground:  var(--neutral-900);

  --secondary:           var(--neutral-800);
  --secondary-foreground: var(--neutral-50);

  --accent:              var(--neutral-800);
  --accent-foreground:   var(--neutral-50);

  --destructive:         #7F1D1D;
  --destructive-foreground: var(--neutral-50);

  --border:              var(--neutral-800);
  --input:               var(--neutral-800);
  --ring:                var(--neutral-300);

  --fg-1: var(--neutral-50);
  --fg-2: var(--neutral-300);
  --fg-3: var(--neutral-400);
  --fg-4: var(--neutral-600);
}

/* =========================================================
   SEMANTIC ELEMENT STYLES
   Apply by adding classes (or import and wire to element tags)
   ========================================================= */
.ds-h1, h1.ds { font-family: var(--font-sans); font-weight: var(--fw-h1); font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tr-h1); color: var(--fg-1); margin: 0; }
.ds-h2, h2.ds { font-family: var(--font-sans); font-weight: var(--fw-h2); font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); color: var(--fg-1); margin: 0; }
.ds-h3, h3.ds { font-family: var(--font-sans); font-weight: var(--fw-h3); font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); color: var(--fg-1); margin: 0; }
.ds-h4, h4.ds { font-family: var(--font-sans); font-weight: var(--fw-h4); font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--tr-h4); color: var(--fg-1); margin: 0; }

.ds-p-lg { font-family: var(--font-sans); font-size: var(--fs-p-lg); line-height: var(--lh-p-lg); color: var(--fg-1); }
.ds-p    { font-family: var(--font-sans); font-size: var(--fs-p);    line-height: var(--lh-p);    color: var(--fg-1); }
.ds-p-sm { font-family: var(--font-sans); font-size: var(--fs-p-sm); line-height: var(--lh-p-sm); letter-spacing: var(--tr-p-sm); color: var(--fg-2); }
.ds-p-xs { font-family: var(--font-sans); font-size: var(--fs-p-xs); line-height: var(--lh-p-xs); letter-spacing: var(--tr-p-xs); color: var(--fg-3); }

.ds-caption { font-family: var(--font-sans); font-size: var(--fs-cap); font-weight: 500; line-height: var(--lh-cap); letter-spacing: var(--tr-cap); text-transform: uppercase; color: var(--fg-3); }

.ds-mono { font-family: var(--font-mono); font-size: var(--fs-mono); }
.ds-kbd  { font-family: var(--font-mono); font-size: 12px; padding: 2px 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--muted); color: var(--fg-2); box-shadow: var(--shadow-2xs); }

/* =========================================================
   Useful reset bits — include where helpful
   ========================================================= */
.ds-reset * { box-sizing: border-box; }
.ds-reset { color: var(--fg-1); background: var(--background); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }