@custom-variant dark (&:is(.dark *));

:root {
  /* ── CHARCOAL + CRIMSON THEME ── */

  /* Backgrounds */
  --background: #f5f4f4;        /* warm off-white with slight warmth */
  --card: #ffffff;
  --card-foreground: #1a1010;
  --popover: #ffffff;
  --popover-foreground: #1a1010;

  /* Text */
  --foreground: #1a1010;        /* near-black with warm undertone */
  --muted: #ede9e9;             /* warm light gray */
  --muted-foreground: #5a4f4f;  /* warm dark gray */

  /* Primary = Crimson */
  --primary: #c0152a;           /* rich crimson red */
  --primary-foreground: #ffffff;

  /* Secondary = Deep Charcoal */
  --secondary: #2c2424;         /* deep charcoal with warmth */
  --secondary-foreground: #ffffff;

  /* Accent = Lighter Crimson / Rose */
  --accent: #e63950;            /* brighter crimson for hover/active */
  --accent-foreground: #ffffff;

  /* Destructive */
  --destructive: #991b1b;
  --destructive-foreground: #ffffff;

  /* Borders & Inputs */
  --border: #d4c8c8;            /* warm light border */
  --input: #8a7070;
  --ring: #f87171;              /* crimson ring on focus */

  /* Charts */
  --chart-1: #c0152a;
  --chart-2: #2c2424;
  --chart-3: #e63950;
  --chart-4: #7f1d1d;
  --chart-5: #fca5a5;

  /* Sidebar */
  --sidebar: #1e1414;           /* very dark charcoal */
  --sidebar-foreground: #f5f4f4;
  --sidebar-primary: #c0152a;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #e63950;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #3d2a2a;
  --sidebar-ring: #f87171;

  /* Typography */
  --font-sans: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-serif: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'Courier New', Courier, monospace;

  /* Shape */
  --radius: 0.5rem;             /* tighter radius — more serious/professional */

  /* Shadows — real depth now */
  --shadow-x: 0px;
  --shadow-y: 2px;
  --shadow-blur: 8px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.12;
  --shadow-color: #1a1010;
  --shadow-2xs: 0px 1px 2px 0px rgba(26,16,16,0.05);
  --shadow-xs:  0px 1px 3px 0px rgba(26,16,16,0.08);
  --shadow-sm:  0px 1px 3px 0px rgba(26,16,16,0.10), 0px 1px 2px -1px rgba(26,16,16,0.06);
  --shadow:     0px 2px 6px 0px rgba(26,16,16,0.10), 0px 1px 3px -1px rgba(26,16,16,0.06);
  --shadow-md:  0px 4px 12px 0px rgba(26,16,16,0.12), 0px 2px 4px -1px rgba(26,16,16,0.08);
  --shadow-lg:  0px 8px 24px 0px rgba(26,16,16,0.14), 0px 4px 8px -2px rgba(26,16,16,0.08);
  --shadow-xl:  0px 16px 40px 0px rgba(26,16,16,0.16), 0px 8px 16px -4px rgba(26,16,16,0.10);
  --shadow-2xl: 0px 24px 64px 0px rgba(26,16,16,0.20);

  --tracking-normal: normal;
  --spacing: 0.25rem;
}

@layer base {
  html, body {
    overflow-x: clip;
  }
  h1, h2, h3, h4, h5, h6, p, span, a, li {
    overflow-wrap: anywhere;
    word-wrap: break-word;
  }
  body {
    background-color: var(--background);
    color: var(--foreground);
  }
}