/* Mise Design System — source of truth: Figma "Mise — Inso" (RqAfmeFH8J7aK07fkLzxzz)
 *
 * Monochrome. Light by default, dark as the inverse. There is no accent hue:
 * emphasis comes from black, weight and space — never from colour.
 * The only chromatic token in the system is --color-destructive.
 *
 * Every colour is a neutral (chroma 0). If you find yourself wanting a hue,
 * you want contrast or spacing instead.
 */
:root {
  /* Primitives — neutral ramp, chroma 0 */
  --neutral-0:    oklch(1 0 0);      /* #FFFFFF */
  --neutral-25:   oklch(0.985 0 0);  /* #FAFAFA */
  --neutral-50:   oklch(0.973 0 0);  /* #F6F6F6 */
  --neutral-100:  oklch(0.955 0 0);  /* #F1F1F1 */
  --neutral-200:  oklch(0.922 0 0);  /* #E8E8E8 */
  --neutral-300:  oklch(0.87 0 0);   /* #D9D9D9 */
  --neutral-400:  oklch(0.715 0 0);  /* #ACACAC */
  --neutral-500:  oklch(0.596 0 0);  /* #8A8A8A */
  --neutral-600:  oklch(0.49 0 0);   /* #6B6B6B */
  --neutral-700:  oklch(0.39 0 0);   /* #525252 */
  --neutral-800:  oklch(0.28 0 0);   /* #383838 */
  --neutral-900:  oklch(0.19 0 0);   /* #212121 */
  --neutral-950:  oklch(0.13 0 0);   /* #141414 */
  --neutral-1000: oklch(0 0 0);      /* #000000 */

  /* The one chromatic exception — destructive actions must not read as ordinary */
  --red-500: oklch(0.577 0.215 27.325);
  --red-600: oklch(0.505 0.213 27.518);

  /* Color — backgrounds */
  --color-bg-base: var(--neutral-100);      /* page / app canvas */
  --color-bg-surface: var(--neutral-0);     /* panels, cards, sidebar rows */
  --color-bg-elevated: var(--neutral-0);    /* modals, menus — lifted by shadow */
  --color-bg-subtle: var(--neutral-200);    /* placeholder tiles, hover fills */
  --color-secondary-fill: var(--neutral-100);

  /* Color — text & foreground */
  --color-text-primary: var(--neutral-950);
  --color-text-secondary: var(--neutral-600);
  --color-text-tertiary: var(--neutral-500);
  --color-text-muted: var(--neutral-400);

  /* Color — emphasis & status.
     "Accent" is black here: the strongest thing on the page, not a hue. */
  --color-accent: var(--neutral-950);
  --color-destructive: var(--red-600);
  --color-destructive-outline: oklch(0.577 0.215 27.325 / 0.4);
  --color-white: var(--neutral-0);
  /* The logo is the one deliberate spot of colour. Same in both themes. */
  --color-logo: oklch(0.751 0.178 57.6);
  /* Marketing-site hero gradient, from the Figma Website frame. Warm on purpose. */
  --color-hero-from: oklch(0.62 0.2 48);        /* deep orange */
  --color-hero-via: oklch(0.86 0.15 88 / 0.6);  /* warm yellow, 60% */
  --color-hero-to: oklch(0.93 0 0 / 0);         /* transparent warm white */
  --color-button-fill: var(--neutral-1000);  /* filled button — pure black, per Figma */

  /* Color — border */
  --color-border: var(--neutral-200);
  --color-border-strong: var(--neutral-300);

  /* Alpha variants — their own tokens, never color-mix() */
  --color-bg-base-90: oklch(0.955 0 0 / 0.9);
  --color-overlay: oklch(1 0 0 / 0.7);
  --color-overlay-strong: oklch(0.955 0 0 / 0.85);
  --color-scrim: oklch(0.13 0 0 / 0.25);       /* behind modals */
  --color-tint: oklch(0.13 0 0 / 0.05);        /* hover wash on light */
  --color-tint-strong: oklch(0.13 0 0 / 0.09); /* active wash on light */
  --color-hairline: oklch(0.13 0 0 / 0.06);    /* inset 0.5px edge */
  --color-hairline-strong: oklch(0.13 0 0 / 0.12); /* swatch ring, outline button edge */
  --color-pro-from: var(--neutral-800);
  --color-pro-to: var(--neutral-950);

  /* Font family.
     UI is a neutral grotesque. GT Flexa Mono appears in the Figma as library
     *content* (a font being previewed), not as the interface face — see
     docs/figma-notes.md before promoting it to the UI. */
  --font-sans: "Inter", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale (size / line-height, weight, letter-spacing) */
  --text-display: 36px;   --leading-display: 40px;   --tracking-display: -0.7px;
  --text-h1: 30px;        --leading-h1: 36px;        --tracking-h1: -0.4px;
  --text-h2: 24px;        --leading-h2: 32px;
  --text-h3: 18px;        --leading-h3: 28px;
  --text-body-lg: 18px;   --leading-body-lg: 28px;
  --text-body: 16px;      --leading-body: 24px;
  --text-label: 14px;     --leading-label: 20px;
  --text-caption: 13px;   --leading-caption: 19.5px;
  --text-overline: 12px;  --leading-overline: 16px;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* Spacing — multiples of 4px base */
  --spacing-2xs: 2px;
  --spacing-xs: 4px;
  --spacing-sm: 6px;
  --spacing-md: 8px;
  --spacing-base: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-2xl: 24px;
  --spacing-3xl: 32px;
  --spacing-4xl: 40px;
  --spacing-5xl: 48px;
  --spacing-6xl: 64px;
  --spacing-7xl: 96px;
  --spacing-8xl: 128px;

  /* Layout */
  --layout-page-width: 1440px;
  --layout-sidebar-width: 240px;
  --layout-inspector-width: 280px;
  --layout-modal-width: 500px;
  --layout-padding-x: 64px;

  /* Radius */
  --radius-xs: 4px;   /* favicons, small thumbnails */
  --radius-sm: 6px;   /* sidebar nav buttons, tag pills */
  --radius-md: 8px;   /* action buttons, link cards, icon containers */
  --radius-lg: 12px;  /* content cards, settings panels */
  --radius-xl: 16px;  /* dialogs, overlay panels */
  --radius-full: 9999px; /* status pills, badges, circular */

  /* Shadows / elevation.
     Light monochrome asks for restraint: a hairline border does most of the
     work, shadow only marks what genuinely floats. */
  --shadow-hairline: inset 0 0 0 0.5px var(--color-hairline);
  --shadow-card: 0 1px 2px 0 oklch(0.13 0 0 / 0.06);
  --shadow-card-hover: 0 0 0 0.5px var(--color-border-strong), 0 4px 12px 0 oklch(0.13 0 0 / 0.1);
  --shadow-raised: 0 1px 2px 0 oklch(0.13 0 0 / 0.08), inset 0 0 0 0.5px var(--color-hairline);
  --shadow-overlay: 0 1px 3px 0 oklch(0.13 0 0 / 0.08), 0 8px 24px 0 oklch(0.13 0 0 / 0.12);
  --shadow-modal: 0 8px 32px 0 oklch(0.13 0 0 / 0.16);
  --shadow-hero-cta: 0 4px 6px -4px oklch(0.13 0 0 / 0.15), 0 10px 15px -3px oklch(0.13 0 0 / 0.12);

  /* Blurs */
  --blur-backdrop: 8px;
  --blur-button: 4px;

  /* Borders */
  --border-default: 1px solid var(--color-border);
  --border-hairline: 0.5px solid var(--color-border);
  --border-destructive: 1px solid var(--color-destructive-outline);
}

/* Dark theme — the same monochrome system, inverted.
   Applied via [data-theme="dark"] on <html>. Light is the default, so
   [data-theme="light"] needs no block: it inherits :root. */
[data-theme="dark"] {
  --color-bg-base: var(--neutral-950);
  --color-bg-surface: var(--neutral-900);
  --color-bg-elevated: var(--neutral-800);
  --color-bg-subtle: var(--neutral-800);
  --color-secondary-fill: var(--neutral-800);

  --color-text-primary: var(--neutral-50);
  --color-text-secondary: var(--neutral-400);
  --color-text-tertiary: var(--neutral-500);
  --color-text-muted: var(--neutral-600);

  --color-accent: var(--neutral-0);
  --color-destructive: var(--red-500);
  --color-destructive-outline: oklch(0.577 0.215 27.325 / 0.5);
  --color-button-fill: var(--neutral-0);

  --color-border: var(--neutral-800);
  --color-border-strong: var(--neutral-700);

  --color-bg-base-90: oklch(0.13 0 0 / 0.9);
  --color-overlay: oklch(0.19 0 0 / 0.7);
  --color-overlay-strong: oklch(0.28 0 0 / 0.85);
  --color-scrim: oklch(0 0 0 / 0.5);
  --color-tint: oklch(1 0 0 / 0.06);
  --color-tint-strong: oklch(1 0 0 / 0.1);
  --color-hairline: oklch(1 0 0 / 0.06);
  --color-hairline-strong: oklch(1 0 0 / 0.14);
  --color-pro-from: var(--neutral-300);
  --color-pro-to: var(--neutral-0);

  --shadow-card: 0 1px 2px 0 oklch(0 0 0 / 0.4);
  --shadow-card-hover: 0 0 0 0.5px var(--color-border-strong), 0 4px 12px 0 oklch(0 0 0 / 0.5);
  --shadow-raised: 0 1px 2px 0 oklch(0 0 0 / 0.4), inset 0 0 0 0.5px var(--color-hairline);
  --shadow-overlay: 0 1px 3px 0 oklch(0 0 0 / 0.4), 0 8px 24px 0 oklch(0 0 0 / 0.55);
  --shadow-modal: 0 8px 32px 0 oklch(0 0 0 / 0.6);
  --shadow-hero-cta: 0 4px 6px -4px oklch(0 0 0 / 0.5), 0 10px 15px -3px oklch(0 0 0 / 0.45);
}

/* Theme toggle button */
.theme-toggle {
  background: none; border: none; cursor: pointer; padding: 0;
  width: 32px; height: 32px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md); color: var(--color-text-tertiary);
  transition: color 150ms ease, background-color 150ms ease;
}
.theme-toggle:hover { color: var(--color-text-primary); background: var(--color-tint); }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }

/* Buttons — 40px landing / 32px app, Inter Medium */
.btn {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-label);
  line-height: var(--leading-label);
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  height: 40px;
  padding: 0 var(--spacing-lg);
}
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn:disabled, .link--underlined:disabled { opacity: 0.4; cursor: not-allowed; }
.btn--sm { height: 32px; font-size: var(--text-caption); line-height: var(--leading-caption); }

.btn--primary { background: var(--color-button-fill); color: var(--color-bg-surface); }
.btn--primary:hover { background: var(--neutral-800); }
.btn--primary:active { background: var(--neutral-700); }
[data-theme="dark"] .btn--primary:hover { background: var(--neutral-200); }
[data-theme="dark"] .btn--primary:active { background: var(--neutral-300); }

.btn--secondary {
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  box-shadow: 0 0 0 1px var(--color-border);
}
.btn--secondary:hover { background: var(--color-secondary-fill); }
.btn--secondary:active { background: var(--color-bg-subtle); }

.btn--ghost { background: none; color: var(--color-text-tertiary); border-radius: var(--radius-sm); height: 32px; font-size: var(--text-caption); }
.btn--ghost:hover { color: var(--color-text-primary); background: var(--color-tint); }
.btn--ghost:active { background: var(--color-tint-strong); }

.btn--badge { background: none; color: var(--color-text-primary); border-radius: var(--radius-full); height: 32px; font-size: var(--text-caption); }
.btn--badge:hover { background: var(--color-tint); }
.btn--badge:active { background: var(--color-tint-strong); }

.btn--destructive { background: none; color: var(--color-destructive); border: var(--border-destructive); height: 32px; font-size: var(--text-caption); }
.btn--destructive:hover { background: oklch(0.577 0.215 27.325 / 0.08); border-color: var(--color-destructive); }
.btn--destructive:active { background: oklch(0.577 0.215 27.325 / 0.15); }

.btn--icon { background: none; width: 32px; height: 32px; padding: 0; border-radius: var(--radius-md); color: var(--color-text-tertiary); }
.btn--icon svg { width: 20px; height: 20px; }
.btn--icon:hover { background: var(--color-tint); color: var(--color-text-primary); }
.btn--icon:active { background: var(--color-tint-strong); }

.btn--text { background: none; height: auto; padding: 0; border-radius: 0; color: var(--color-text-primary); }
.btn--text:hover { color: var(--color-text-secondary); }
.btn--text:active { color: var(--color-text-tertiary); }

.link--underlined {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-label);
  line-height: var(--leading-label);
  color: var(--color-text-secondary);
  text-decoration: underline;
  text-decoration-color: var(--color-border-strong);
  text-underline-offset: 4px;
  cursor: pointer;
}
.link--underlined:hover { color: var(--color-text-primary); text-decoration-color: var(--color-text-primary); }
.link--underlined:active { color: var(--color-text-secondary); }