/* ============================================================
   Malbec OS — Colors & Type
   Source: Figma "Malbec OS Design System"
   Primary brand color: Malbec (deep burgundy wine) #621543
   Font family: Inter (all weights)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Ubuntu+Mono:wght@400;700&display=swap');

:root {
  /* ——— BRAND ——— */
  --malbec:            #621543;   /* primary brand — deep burgundy */
  --malbec-ink:        #090E19;   /* cover/brand ink — near-black navy */
  --indigo-deep:       #1E1562;   /* brand secondary accent */

  /* ——— NEUTRALS (warm paper scale) ——— */
  --paper:             #FFFBFA;   /* brand warm white */
  --white:             #FFFFFF;
  --n-50:              #FAFAFA;
  --n-100:             #F8F8F8;   /* card surface */
  --n-150:             #F4F4F5;   /* muted surface */
  --n-200:             #F1F0EE;   /* sand */
  --n-300:             #E4E2DF;   /* default border */
  --n-400:             #E7E3E1;
  --n-500:             #8C8C94;   /* muted text */
  --n-600:             #6B6B7A;
  --n-700:             #71717A;
  --n-800:             #3F3F46;   /* body text */
  --n-900:             #27272A;
  --n-ink:             #1A1A1F;   /* strong heading */
  --n-zinc-900:        #18181B;
  --n-zinc-950:        #09090B;

  /* ——— SEMANTIC (shadcn-parity) ——— */
  --background:        var(--white);
  --foreground:        var(--n-ink);
  --card:              var(--n-100);
  --card-foreground:   var(--n-ink);
  --popover:           var(--white);
  --popover-foreground:var(--n-ink);
  --primary:           var(--malbec);
  --primary-foreground:#FAFAFA;
  --secondary:         var(--n-300);
  --secondary-foreground: var(--malbec);
  --muted:             var(--n-150);
  --muted-foreground:  var(--n-500);
  --accent:            var(--n-150);
  --accent-foreground: var(--n-800);
  --destructive:       #DC2626;
  --destructive-foreground: #FAFAFA;
  --success:           #0A3D2F;
  --warning:           #891B1B;
  --info:              #246E80;
  --border:            var(--n-300);
  --input:             var(--n-300);
  --ring:              var(--malbec);

  /* Sidebar (matches Figma tokens) */
  --sidebar-background:        #FAFAFA;
  --sidebar-foreground:        var(--n-800);
  --sidebar-primary:           var(--malbec);
  --sidebar-primary-foreground:#FAFAFA;
  --sidebar-accent:            #F1F0EE;
  --sidebar-accent-foreground: var(--n-ink);
  --sidebar-border:            var(--n-300);
  --sidebar-ring:              var(--malbec);

  /* Charts */
  --chart-1: #621543;
  --chart-2: #1E1562;
  --chart-3: #246E80;
  --chart-4: #891B1B;
  --chart-5: #0A3D2F;

  /* ——— RADII ——— */
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius:    6px;   /* default */
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ——— SHADOWS ——— */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow:    0 4px 14px rgba(0,0,0,0.07);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.08);
  --shadow-lg: 0 16px 40px rgba(0,0,0,0.10);
  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--malbec) 25%, transparent);

  /* ——— SPACING (4 pt grid) ——— */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  /* ——— TYPOGRAPHY ——— */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Ubuntu Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-display: 'Inter', sans-serif; /* brand uses Inter 500 @ tight tracking */

  /* Base scale (rem-safe px) */
  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 14px;  /* app default */
  --fs-md:   16px;  /* long-form reading */
  --fs-lg:   18px;
  --fs-xl:   20px;
  --fs-2xl:  24px;
  --fs-3xl:  30px;
  --fs-4xl:  48px;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
}

/* ============================================================
   Semantic text styles
   Matches the Figma Typography specimen (/Style-Guide/Typography)
   ============================================================ */
html, body { background: var(--background); color: var(--foreground); }
body { font-family: var(--font-sans); font-size: var(--fs-base); line-height: 20px; -webkit-font-smoothing: antialiased; }

.h1, h1.malbec {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-4xl);
  line-height: 48px;
  letter-spacing: -0.012em;
  color: var(--n-800);
}
.h2, h2.malbec {
  font-weight: 700;
  font-size: var(--fs-3xl);
  line-height: 36px;
  letter-spacing: -0.007em;
  color: var(--n-800);
}
.h3, h3.malbec {
  font-weight: 700;
  font-size: var(--fs-2xl);
  line-height: 32px;
  letter-spacing: -0.006em;
  color: var(--n-800);
}
.h4, h4.malbec {
  font-weight: 700;
  font-size: var(--fs-xl);
  line-height: 28px;
  letter-spacing: -0.005em;
  color: var(--n-800);
}
.lead {
  font-weight: 400;
  font-size: var(--fs-xl);
  line-height: 28px;
  color: var(--n-800);
}
.large {
  font-weight: 700;
  font-size: var(--fs-lg);
  line-height: 28px;
  color: var(--n-800);
}
.p, p.malbec {
  font-size: var(--fs-md);
  line-height: 28px;
  color: var(--n-800);
}
.small {
  font-weight: 500;
  font-size: var(--fs-base);
  line-height: 14px;
}
.muted {
  font-size: var(--fs-base);
  color: var(--muted-foreground);
}
.blockquote {
  font-style: italic;
  font-size: var(--fs-md);
  line-height: 24px;
  border-left: 2px solid var(--border);
  padding-left: var(--s-4);
  color: var(--n-800);
}
.code-inline {
  font-family: var(--font-mono);
  background: var(--n-150);
  color: var(--n-800);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  font-size: 0.9em;
}

/* Brand wordmark */
.malbec-wordmark {
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: -0.070em;
  line-height: 1;
  color: var(--white);
}