/**
 * Design Tokens - Framework Agnostic
 * Colors in hex for readability; alpha variants as rgba where needed.
 */

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-v20-latin-100.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-v20-latin-200.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-v20-latin-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-v20-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-v20-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-v20-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-v20-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-v20-latin-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-v20-latin-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colors - light theme (hex) */
  --background: #ffffff;
  --foreground: #0a0a0a;
  --card: var(--background);
  --card-foreground: var(--foreground);
  --popover: var(--background);
  --popover-foreground: var(--foreground);
  --primary: #171717;
  --primary-foreground: #fafafa;
  --secondary: #f5f5f5;
  --secondary-foreground: #171717;
  --muted: #f5f5f5;
  --muted-foreground: #737373;
  --accent: #f5f5f5;
  --accent-foreground: #171717;
  --destructive: #ef4444;
  --destructive-foreground: #fafafa;
  --border: #e5e5e5;
  --input: #e5e5e5;
  --input-bg: var(--background);
  --ring: #0a0a0a;

  /* Alpha variants (same visual depth as previous hsl() / alpha) */
  --muted-overlay: rgba(245, 245, 245, 0.3);
  --primary-hover: rgba(23, 23, 23, 0.9);
  --primary-muted: rgba(23, 23, 23, 0.8);
  --secondary-hover: rgba(245, 245, 245, 0.8);
  --destructive-hover: rgba(239, 68, 68, 0.9);
  --destructive-muted: rgba(239, 68, 68, 0.8);
  --destructive-border: rgba(239, 68, 68, 0.5);
  --destructive-subtle: rgba(239, 68, 68, 0.1);
  --success: #16a34a;
  --success-foreground: #fef2f2;
  --success-border: rgba(22, 163, 74, 0.5);
  --success-subtle: rgba(22, 163, 74, 0.1);
  --success-hover: rgba(22, 163, 74, 0.8);
  --warning: #eab308;
  --warning-foreground: #0c0a0e;
  --warning-border: rgba(234, 179, 8, 0.5);
  --warning-subtle: rgba(234, 179, 8, 0.1);
  --warning-hover: rgba(234, 179, 8, 0.8);
  --info: #2563eb;
  --info-border: rgba(37, 99, 235, 0.5);
  --info-subtle: rgba(37, 99, 235, 0.1);

  /* Radius - shadcn-like (slightly smaller) */
  --radius-s: 0.2rem;
  --radius-m: 0.3125rem;
  --radius-l: 0.625rem;
  --radius: var(--radius-l);

  /* Spacing - 7 sizes, proportionally smaller */
  --spacing-xxs: clamp(0.0625rem, 0.3vw + 0.1rem, 0.125rem);
  --spacing-xs: clamp(0.125rem, 0.4vw + 0.15rem, 0.25rem);
  --spacing-s: clamp(0.25rem, 0.6vw + 0.2rem, 0.5rem);
  --spacing-m: clamp(0.5rem, 0.8vw + 0.3rem, 0.75rem);
  --spacing-l: clamp(0.625rem, 1vw + 0.35rem, 1rem);
  --spacing-xl: clamp(0.75rem, 1.2vw + 0.4rem, 1.25rem);
  --spacing-xxl: clamp(1rem, 2vw + 0.5rem, 2rem);

  /* Typography - 7 sizes, proportionally smaller */
  --text-xxs: clamp(0.5rem, 0.4vw + 0.45rem, 0.625rem);
  --text-xxs--line-height: 1;
  --text-xs: clamp(0.5625rem, 0.5vw + 0.5rem, 0.6875rem);
  --text-xs--line-height: 1.25;
  --text-s: clamp(0.6875rem, 0.5vw + 0.55rem, 0.8125rem);
  --text-s--line-height: 1.25;
  --text-m: clamp(0.8125rem, 0.6vw + 0.6rem, 0.875rem);
  --text-m--line-height: 1.5;
  --text-l: clamp(0.875rem, 0.7vw + 0.65rem, 1rem);
  --text-l--line-height: 1.5;
  --text-xl: clamp(1rem, 1vw + 0.7rem, 1.25rem);
  --text-xl--line-height: 1.25;
  --text-xxl: clamp(1.25rem, 1.5vw + 0.8rem, 1.875rem);
  --text-xxl--line-height: 1.2;

  --leading-relaxed: 1.5;

  --icon-xs: 0.875rem;
  --icon-s: 1rem;
  --icon-m: 1.25rem;

  /* Component heights - shadcn default is 2.25rem */
  --height-s: 2rem;
  --height-m: 2.25rem;
  --height-l: 2.5rem;

  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --sans: var(--font-sans);
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, monospace;

  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark mode - hex */
.dark {
  --background: #0a0a0a;
  --foreground: #fafafa;
  --card: var(--background);
  --card-foreground: var(--foreground);
  --popover: var(--background);
  --popover-foreground: var(--foreground);
  --primary: #fafafa;
  --primary-foreground: #171717;
  --secondary: #262626;
  --secondary-foreground: #fafafa;
  --muted: #262626;
  --muted-foreground: #a3a3a3;
  --accent: #262626;
  --accent-foreground: #fafafa;
  --destructive: #b91c1c;
  --destructive-foreground: #fafafa;
  --border: #262626;
  --input: #262626;
  --input-bg: var(--muted-overlay);
  --ring: #d4d4d4;
    --warning-foreground: var(--warning);

  /* Dark mode alpha variants */
  --muted-overlay: rgba(38, 38, 38, 0.3);
  --primary-hover: rgba(250, 250, 250, 0.9);
  --primary-muted: rgba(250, 250, 250, 0.8);
  --secondary-hover: rgba(38, 38, 38, 0.8);
  --destructive-hover: rgba(185, 28, 28, 0.9);
  --destructive-muted: rgba(185, 28, 28, 0.8);
  --destructive-border: rgba(185, 28, 28, 0.5);
  --destructive-subtle: rgba(185, 28, 28, 0.1);
  --success-border: rgba(22, 163, 74, 0.5);
  --success-subtle: rgba(22, 163, 74, 0.1);
  --success-hover: rgba(22, 163, 74, 0.8);
  --warning-border: rgba(234, 179, 8, 0.5);
  --warning-subtle: rgba(234, 179, 8, 0.1);
  --warning-hover: rgba(234, 179, 8, 0.8);
  --info-border: rgba(37, 99, 235, 0.5);
  --info-subtle: rgba(37, 99, 235, 0.1);
}

* {
  border-color: var(--border);
}

html {
    overscroll-behavior-y: none;
}

body {
    background-color: var(--background);
    color: var(--foreground);
    font-family: var(--font-sans);
    font-feature-settings: "rlig" 1, "calt" 1;
    line-height: 1.5;
}

/* Form controls and buttons use system font by default; force inheritance */
button, input, select, textarea, .btn, .dropdown__trigger, .dropdown__item,
.dashboard__nav-item, .theme-toggle {
  font-family: inherit;
}

button:focus-visible,
a[href]:focus-visible,
input:focus-visible,
textarea:focus-visible,
[draggable]:focus-visible,
[contenteditable]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
}

select:focus-visible {
    outline: none;
    box-shadow: none;
}