/*
 * Overslash Design System — colors & type
 *
 * Extracted directly from the Overslash dashboard design-tokens.css
 * (overfolder/overslash dashboard/src/lib/styles/design-tokens.css) and
 * cross-checked against the Figma design system frame.
 */

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

:root {
  /* ── Neutral palette ── */
  --neutral-50:  #fafafa;
  --neutral-100: #f5f5f7;
  --neutral-200: #e8e8ee;
  --neutral-300: #d1d4d9;
  --neutral-400: #a3a6b0;
  --neutral-500: #737580;
  --neutral-600: #545761;
  --neutral-700: #383a42;
  --neutral-800: #26282e;
  --neutral-900: #17191c;

  /* ── Primary palette (indigo) ── */
  --primary-50:  #ededff;
  --primary-100: #e0dffc;
  --primary-500: #6359d9;
  --primary-600: #4f45c2;
  --primary-700: #4238a8;

  /* ── Semantic ── */
  --success-500: #21b86b;
  --warning-500: #ebb01e;
  --error-500:   #e63836;
  --orange-500:  #eb8c26;

  /* ── Surfaces & borders ── */
  --color-bg:              var(--neutral-50);
  --color-surface:         #ffffff;
  --color-sidebar:         #f8f8fa;
  --color-border:          var(--neutral-200);
  --color-border-subtle:   var(--neutral-100);

  /* ── Text ── */
  --color-text-heading:     var(--neutral-900);
  --color-text:             var(--neutral-700);
  --color-text-secondary:   var(--neutral-500);
  --color-text-muted:       var(--neutral-400);
  --color-text-placeholder: var(--neutral-400);

  /* ── Interactive ── */
  --color-primary:        var(--primary-500);
  --color-primary-hover:  var(--primary-600);
  --color-primary-active: var(--primary-700);
  --color-primary-bg:     var(--primary-50);
  --color-danger:         var(--error-500);
  --color-success:        var(--success-500);
  --color-warning:        var(--warning-500);

  /* ── Badge tints (12 % default) ── */
  --badge-bg-success: rgba(33, 184, 107, 0.12);
  --badge-bg-warning: rgba(235, 176, 31, 0.12);
  --badge-bg-danger:  rgba(229, 56, 54, 0.12);
  --badge-bg-primary: rgba(99, 89, 217, 0.12);
  --badge-bg-neutral: #e8e8ed;
  --badge-bg-muted:   #f5f5f7;

  /* ── Typography ── */
  /* Self-hosted variable builds via @fontsource-variable (see fonts/README.md).
     The non-variable family names are kept as soft fallbacks. */
  --font-sans: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Roboto Mono Variable', 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* compound font tokens (font shorthand: weight size/line family) */
  --text-h1:          700 28px/36px var(--font-sans);
  --text-h2:          600 22px/28px var(--font-sans);
  --text-h3:          600 18px/24px var(--font-sans);
  --text-body-lg:     400 16px/24px var(--font-sans);
  --text-body:        400 14px/20px var(--font-sans);
  --text-body-medium: 500 14px/20px var(--font-sans);
  --text-body-sm:     400 12px/16px var(--font-sans);
  --text-label:       500 13px/18px var(--font-sans);
  --text-label-sm:    500 11px/14px var(--font-sans);
  --text-code:        400 13px/18px var(--font-mono);

  /* ── Spacing scale (4 px base) ── */
  --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;

  /* ── Radii ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 9999px;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 2px  rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.15);

  /* ── Layout ── */
  --sidebar-width-expanded:  240px;
  --sidebar-width-collapsed: 64px;
  --topbar-height:           56px;
}

/* ── Dark mode (opt-in via data-theme="dark") ── */
[data-theme='dark'] {
  --neutral-50:  #111213;
  --neutral-100: #1a1b1e;
  --neutral-200: #2a2b2f;
  --neutral-300: #3a3b40;
  --neutral-400: #6b6d73;
  --neutral-500: #8b8d92;
  --neutral-600: #b0b2b8;
  --neutral-700: #d4d5d9;
  --neutral-800: #e0e1e4;
  --neutral-900: #f0f1f2;

  --primary-50: rgba(99, 90, 217, 0.15);

  --color-bg:            #111213;
  --color-surface:       #1a1b1e;
  --color-sidebar:       #151618;
  --color-border:        #2a2b2f;
  --color-border-subtle: #1f2023;

  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.4);

  --badge-bg-success: rgba(33, 184, 107, 0.19);
  --badge-bg-warning: rgba(235, 176, 31, 0.19);
  --badge-bg-danger:  rgba(229, 56, 54, 0.19);
  --badge-bg-neutral: #2a2b2f;
  --badge-bg-muted:   #2a2b2f;
}

/* ────────────────────────────────────────────────────────────── */
/* Semantic element styles. Import this file and you get sane      */
/* defaults matching the dashboard without additional wiring.      */
/* ────────────────────────────────────────────────────────────── */

body {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1 { font: var(--text-h1); color: var(--color-text-heading); }
h2 { font: var(--text-h2); color: var(--color-text-heading); }
h3 { font: var(--text-h3); color: var(--color-text-heading); }
p  { font: var(--text-body); color: var(--color-text); }

code, kbd, pre, samp {
  font-family: var(--font-mono);
  font-size: 13px;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}
a:hover { color: var(--color-primary-hover); }

/* Utility classes used in cards & kits */
.mono      { font-family: var(--font-mono); }
.muted     { color: var(--color-text-muted); }
.secondary { color: var(--color-text-secondary); }
.label     { font: var(--text-label); color: var(--color-text-secondary); }
.label-sm  { font: var(--text-label-sm); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; }