/* ==========================================================================
   Developer Studio — Design Tokens / CSS Variables
   Flat design system: no shadows, no gradients, no border-radius.
   ========================================================================== */

:root {
  /* ---- Color: Monochrome base + single accent ---------------------------- */
  --color-black: #0a0a0a;
  --color-ink: #111315;
  --color-ink-soft: #1c1f22;
  --color-gray-900: #2a2d31;
  --color-gray-700: #4a4f55;
  --color-gray-500: #6b7178;
  --color-gray-400: #8a9099;
  --color-gray-300: #c2c7cd;
  --color-gray-200: #e2e5e9;
  --color-gray-100: #f1f3f5;
  --color-gray-50: #f8f9fa;
  --color-white: #ffffff;

  /* Single accent color */
  --color-accent: #2f5bff;
  --color-accent-strong: #1d44d6;
  --color-accent-soft: #e8edff;

  /* Status colors */
  --color-success: #0f7b4f;
  --color-error: #c0322b;
  --color-warning: #9a6700;

  /* ---- Semantic tokens (Light theme) ------------------------------------ */
  --bg-page: var(--color-white);
  --bg-surface: var(--color-gray-50);
  --bg-surface-alt: var(--color-gray-100);
  --bg-inverse: var(--color-ink);

  --text-primary: var(--color-ink);
  --text-secondary: var(--color-gray-700);
  --text-muted: var(--color-gray-500);
  --text-inverse: var(--color-white);
  --text-accent: var(--color-accent);

  --border-color: var(--color-gray-200);
  --border-strong: var(--color-gray-300);
  --border-inverse: var(--color-gray-900);

  --accent: var(--color-accent);
  --accent-strong: var(--color-accent-strong);
  --accent-soft: var(--color-accent-soft);
  --on-accent: var(--color-white);

  /* ---- Typography ------------------------------------------------------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono",
    Menlo, monospace;

  --fs-xs: 0.75rem;    /* 12px */
  --fs-sm: 0.875rem;   /* 14px */
  --fs-base: 1rem;     /* 16px */
  --fs-md: 1.125rem;   /* 18px */
  --fs-lg: 1.375rem;   /* 22px */
  --fs-xl: 1.75rem;    /* 28px */
  --fs-2xl: 2.25rem;   /* 36px */
  --fs-3xl: 3rem;      /* 48px */
  --fs-4xl: 3.75rem;   /* 60px */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-base: 1.6;

  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.08em;

  /* ---- Spacing scale ---------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* ---- Layout ----------------------------------------------------------- */
  --container-max: 1200px;
  --container-narrow: 800px;
  --container-pad: var(--space-5);
  --header-height: 72px;

  /* ---- Borders ---------------------------------------------------------- */
  --border-width: 1px;
  --border-width-strong: 2px;
  --radius: 0; /* Sharp edges only */

  /* ---- Motion ----------------------------------------------------------- */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 320ms ease;

  /* ---- Z-index ---------------------------------------------------------- */
  --z-header: 100;
  --z-mobile-menu: 200;
  --z-modal: 300;
  --z-toast: 400;
  --z-progress: 500;
}

/* ---- Dark theme overrides ----------------------------------------------- */
[data-theme="dark"] {
  --bg-page: var(--color-ink);
  --bg-surface: var(--color-ink-soft);
  --bg-surface-alt: var(--color-gray-900);
  --bg-inverse: var(--color-gray-50);

  --text-primary: var(--color-gray-50);
  --text-secondary: var(--color-gray-300);
  --text-muted: var(--color-gray-400);
  --text-inverse: var(--color-ink);

  --border-color: var(--color-gray-900);
  --border-strong: var(--color-gray-700);
  --border-inverse: var(--color-gray-200);

  --accent: #5c80ff;
  --accent-strong: #7d99ff;
  --accent-soft: #1a2440;
  --on-accent: var(--color-white);
}