/* ============================================================
   Alpic Design System — Colors & Type
   Extracted from the @alpic-ai/ui package (src/styles/tokens.css).
   Drop-in stylesheet for HTML prototypes and static artifacts.
   ============================================================ */

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

/* ─── Light theme (default) ─── */
:root {
  /* Brand */
  --alpic-brand: #e90060; /* primary */
  --alpic-brand-hover: #c70054;
  --alpic-brand-ring: #f22b79; /* focus ring / brand-secondary */
  --alpic-brand-subtle: #ffaac9;

  /* Neutrals — surfaces */
  --bg-primary: #ffffff;
  --bg-secondary: #f1f5f5;
  --bg-secondary-subtle: #f8fafa; /* card, sidebar */
  --bg-tertiary: #e3eaea;
  --bg-inverted: #071718;

  /* Foregrounds */
  --fg-primary: #121e1e;
  --fg-secondary: #3a4848;
  --fg-tertiary: #536262;
  --fg-quaternary: #6f7f7f; /* placeholder / tab quaternary */
  --fg-white: #ffffff;

  /* Borders */
  --border-primary: #acb8b8;
  --border-secondary: #c9d4d4;
  --border-tertiary: #e3eaea;

  /* Status */
  --success: #079455;
  --warning: #dc6803;
  --danger: #d92d20;
  --danger-hover: #b42318;

  --badge-success: #079455;
  --badge-warning: #dc6803;
  --badge-error: #d92d20;

  /* Overlay + shadow */
  --overlay: rgba(7, 23, 24, 0.7);
  --shadow-color: rgba(0, 0, 0, 0.1);

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-pill: 9999px;

  /* Fonts */
  --font-display: "Inter", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type — sizes */
  --fs-display-2xl: 72px;
  --fs-display-xl: 60px;
  --fs-display-lg: 48px;
  --fs-display-md: 36px;
  --fs-display-sm: 30px;
  --fs-display-xs: 24px;
  --fs-text-xl: 20px;
  --fs-text-lg: 18px;
  --fs-text-md: 16px;
  --fs-text-sm: 14px;
  --fs-text-xs: 12px;

  /* Type — line heights */
  --lh-display-2xl: 90px;
  --lh-display-xl: 72px;
  --lh-display-lg: 60px;
  --lh-display-md: 44px;
  --lh-display-sm: 38px;
  --lh-display-xs: 32px;
  --lh-text-xl: 30px;
  --lh-text-lg: 28px;
  --lh-text-md: 24px;
  --lh-text-sm: 20px;
  --lh-text-xs: 18px;

  /* Tracking */
  --tracking-display: -2px;
  --tracking-normal: 0;

  /* Spacing (4px 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;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(7, 23, 24, 0.04);
  --shadow-sm: 0 1px 2px rgba(7, 23, 24, 0.06), 0 1px 3px rgba(7, 23, 24, 0.08);
  --shadow-md:
    0 4px 8px -2px rgba(7, 23, 24, 0.08), 0 2px 4px -2px rgba(7, 23, 24, 0.04);
  --shadow-lg:
    0 12px 24px -6px rgba(7, 23, 24, 0.1), 0 4px 8px -2px rgba(7, 23, 24, 0.05);
  --shadow-focus: 0 0 0 4px rgba(242, 43, 121, 0.2);
}

/* ─── Dark theme ─── */
.dark,
[data-theme="dark"] {
  --bg-primary: #071718;
  --bg-secondary: #0c1c1c;
  --bg-secondary-subtle: #0c1c1c;
  --bg-tertiary: #162828;
  --bg-inverted: #ffffff;

  --fg-primary: #ffffff;
  --fg-secondary: #90a4a4;
  --fg-tertiary: #698080;
  --fg-quaternary: #465b5b;
  --fg-white: #ffffff;

  --border-primary: #213535;
  --border-secondary: #162828;
  --border-tertiary: #162828;

  --overlay: rgba(22, 40, 40, 0.7);
  --shadow-color: rgba(255, 255, 255, 0.08);

  --alpic-brand-hover: #f22b79;
}

/* ─── Base ─── */
html,
body {
  margin: 0;
  background: var(--bg-primary);
  color: var(--fg-primary);
  font-family: var(--font-body);
  font-size: var(--fs-text-md);
  line-height: var(--lh-text-md);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ─── Semantic type utilities (display) ─── */
.type-display-2xl {
  font-family: var(--font-display);
  font-size: var(--fs-display-2xl);
  line-height: var(--lh-display-2xl);
  letter-spacing: 0;
  font-weight: 600;
}
.type-display-xl {
  font-family: var(--font-display);
  font-size: var(--fs-display-xl);
  line-height: var(--lh-display-xl);
  letter-spacing: 0;
  font-weight: 600;
}
.type-display-lg {
  font-family: var(--font-display);
  font-size: var(--fs-display-lg);
  line-height: var(--lh-display-lg);
  letter-spacing: 0;
  font-weight: 600;
}
.type-display-md {
  font-family: var(--font-display);
  font-size: var(--fs-display-md);
  line-height: var(--lh-display-md);
  letter-spacing: 0;
  font-weight: 600;
}
.type-display-sm {
  font-family: var(--font-display);
  font-size: var(--fs-display-sm);
  line-height: var(--lh-display-sm);
  letter-spacing: 0;
  font-weight: 600;
}
.type-display-xs {
  font-family: var(--font-display);
  font-size: var(--fs-display-xs);
  line-height: var(--lh-display-xs);
  letter-spacing: 0;
  font-weight: 600;
}

/* ─── Semantic type utilities (text) ─── */
.type-text-xl {
  font-size: var(--fs-text-xl);
  line-height: var(--lh-text-xl);
}
.type-text-lg {
  font-size: var(--fs-text-lg);
  line-height: var(--lh-text-lg);
}
.type-text-md {
  font-size: var(--fs-text-md);
  line-height: var(--lh-text-md);
}
.type-text-sm {
  font-size: var(--fs-text-sm);
  line-height: var(--lh-text-sm);
}
.type-text-xs {
  font-size: var(--fs-text-xs);
  line-height: var(--lh-text-xs);
}

/* ─── Element semantic defaults ─── */
h1 {
  font: 600 var(--fs-display-sm) / var(--lh-display-sm) var(--font-display);
  letter-spacing: 0;
  margin: 0;
}
h2 {
  font: 600 var(--fs-display-xs) / var(--lh-display-xs) var(--font-display);
  letter-spacing: 0;
  margin: 0;
}
h3 {
  font: 600 var(--fs-text-lg) / var(--lh-text-lg) var(--font-display);
  margin: 0;
}
h4 {
  font: 600 var(--fs-text-md) / var(--lh-text-md) var(--font-display);
  margin: 0;
}
p {
  font: 400 var(--fs-text-md) / var(--lh-text-md) var(--font-body);
  margin: 0;
}
small {
  font-size: var(--fs-text-sm);
  line-height: var(--lh-text-sm);
  color: var(--fg-tertiary);
}
code,
pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* utility colors */
.fg-primary {
  color: var(--fg-primary);
}
.fg-secondary {
  color: var(--fg-secondary);
}
.fg-tertiary {
  color: var(--fg-tertiary);
}
.fg-quaternary {
  color: var(--fg-quaternary);
}
.fg-brand {
  color: var(--alpic-brand);
}
.bg-primary {
  background: var(--bg-primary);
}
.bg-secondary {
  background: var(--bg-secondary);
}
.bg-brand {
  background: var(--alpic-brand);
  color: var(--fg-white);
}
