/* ============================================================
   Lumen UI — design tokens + base. Import ONCE in your app entry:
     import "./lumen/lumen.css";
   Works with or without Tailwind. All components read these CSS
   custom properties at runtime — this file is REQUIRED.
   ============================================================ */

/* Primary: Tilda Sans (variable, bundled in ./fonts/) — full Cyrillic support. */
@font-face {
  font-family: "Tilda Sans";
  src: url("./fonts/TildaSans-VF.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Mono: JetBrains Mono — self-host for production if needed. */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400..600&display=swap');

:root {
  /* Base: warm neutral ramp */
  --neutral-0: #FFFFFF;
  --neutral-25: #FAFAF8;
  --neutral-50: #F6F6F3;
  --neutral-100: #F0F0EC;
  --neutral-200: #E7E7E2;
  --neutral-300: #D8D8D2;
  --neutral-400: #B3B3AC;
  --neutral-500: #8D8D86;
  --neutral-600: #6A6A64;
  --neutral-700: #494944;
  --neutral-800: #2C2C29;
  --neutral-900: #1D1D1B;

  /* Accent: one quiet blue, used sparingly (primary actions only) */
  --accent: oklch(0.58 0.15 255);
  --accent-strong: oklch(0.52 0.15 255);
  --accent-soft: oklch(0.95 0.03 255);
  --accent-fg: #FFFFFF;

  /* Semantic */
  --success: oklch(0.6 0.13 155);
  --success-soft: oklch(0.95 0.04 155);
  --warning: oklch(0.7 0.13 80);
  --warning-soft: oklch(0.96 0.05 90);
  --danger: oklch(0.56 0.17 27);
  --danger-soft: oklch(0.95 0.03 27);

  /* Identity palette: entity chips / avatars. Same lightness+chroma, hue varies. */
  --id-red: oklch(0.62 0.14 27);
  --id-orange: oklch(0.68 0.14 60);
  --id-yellow: oklch(0.75 0.13 95);
  --id-green: oklch(0.64 0.13 150);
  --id-blue: oklch(0.62 0.13 245);
  --id-violet: oklch(0.6 0.13 300);

  /* Semantic aliases */
  --bg-page: var(--neutral-25);      /* marketing pages */
  --bg-canvas: var(--neutral-100);   /* app desk behind floating cards */
  --surface-card: var(--neutral-0);
  --surface-inset: var(--neutral-50);/* bubbles, table headers, code wells */
  --surface-hover: var(--neutral-100);
  --text-1: var(--neutral-900);
  --text-2: var(--neutral-600);
  --text-3: var(--neutral-500);
  --border-1: var(--neutral-200);    /* hairlines, dividers */
  --border-2: var(--neutral-300);    /* control outlines */
}

:root {
  --font-sans: "Tilda Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Sizes — adult audience: generous base, nothing below 11px */
  --size-display: 56px;   /* hero headlines */
  --size-h1: 38px;        /* section headings */
  --size-h2: 27px;        /* card / article titles */
  --size-h3: 20px;        /* feature titles */
  --size-body: 16px;      /* default UI + prose */
  --size-sm: 14.5px;      /* secondary UI, table cells */
  --size-xs: 13.5px;      /* meta, timestamps */
  --size-micro: 12px;     /* mono section tags — ALWAYS uppercase+tracked */

  /* Leading */
  --leading-display: 1.1;
  --leading-heading: 1.25;
  --leading-body: 1.6;

  /* Tracking */
  --tracking-display: -0.015em;
  --tracking-micro: 0.09em;

  /* Weight: never bolder than 600 */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
}

:root {
  /* 4px base scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Radii: controls small, cards medium, floating windows large */
  --radius-xs: 4px;    /* section tags, entity chips */
  --radius-sm: 6px;    /* inputs, small buttons */
  --radius-md: 8px;    /* buttons, tool chips */
  --radius-lg: 12px;   /* cards, panels */
  --radius-xl: 16px;   /* floating app windows */
  --radius-pill: 999px;

  /* Layout */
  --container-max: 1264px;
  --content-max: 640px; /* prose measure */
}

:root {
  /* Shadows are whispers: cards mostly rely on hairline borders */
  --shadow-card: 0 1px 2px rgba(29, 29, 27, 0.04);
  --shadow-float: 0 2px 6px rgba(29, 29, 27, 0.05), 0 16px 40px rgba(29, 29, 27, 0.08);
  --shadow-overlay: 0 24px 64px rgba(29, 29, 27, 0.16);

  --ring-focus: 0 0 0 3px oklch(0.58 0.15 255 / 0.25);

  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;

  /* z-index scale */
  --z-dropdown: 50;
  --z-sticky: 80;
  --z-overlay: 100;
  --z-toast: 150;
}

:root {
  /* Springs: overshoot for playful elements, crisp settle for UI */
  --ease-spring: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-slow: 400ms;
  --duration-reveal: 600ms;
  --stagger: 60ms;
}
@keyframes lm-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes lm-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes lm-scale-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes lm-pulse-ring {
  0% { transform: scale(0.6); opacity: 0.7; }
  70% { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}
@keyframes lm-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.82); } }
@keyframes lm-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--size-body);
  line-height: var(--leading-body);
  color: var(--text-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--text-1); text-decoration: underline; text-decoration-color: var(--border-2); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--text-1); }
::selection { background: var(--accent-soft); }
/* Keyboard focus: one quiet ring everywhere, only for :focus-visible */
:where(button, input, select, textarea, a, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
  border-radius: var(--radius-sm);
}
/* Scrollbars match the system: thin, quiet, rounded */
* { scrollbar-width: thin; scrollbar-color: var(--neutral-300) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--neutral-300); border-radius: 4px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--neutral-400); border: 2px solid transparent; background-clip: content-box; }

/* ============================================================
   OPTIONAL: Tailwind CSS v4 theme mapping.
   Ignored by plain CSS; picked up automatically when this file
   is processed by Tailwind v4 (`@import "tailwindcss";` in your
   entry css, then `@import "./lumen/lumen.css";`).
   Gives you utilities like bg-card, text-ink-2, border-line,
   rounded-lg (12px), shadow-float, font-mono, text-accent.
   ============================================================ */
@theme {
  --color-page: #FAFAF8;
  --color-canvas: #F0F0EC;
  --color-card: #FFFFFF;
  --color-inset: #F6F6F3;
  --color-ink: #1D1D1B;
  --color-ink-2: #6A6A64;
  --color-ink-3: #8D8D86;
  --color-line: #E7E7E2;
  --color-line-2: #D8D8D2;
  --color-accent: oklch(0.58 0.15 255);
  --color-accent-strong: oklch(0.52 0.15 255);
  --color-accent-soft: oklch(0.95 0.03 255);
  --color-success: oklch(0.6 0.13 155);
  --color-success-soft: oklch(0.95 0.04 155);
  --color-warning: oklch(0.7 0.13 80);
  --color-warning-soft: oklch(0.96 0.05 90);
  --color-danger: oklch(0.56 0.17 27);
  --color-danger-soft: oklch(0.95 0.03 27);
  --color-id-red: oklch(0.62 0.14 27);
  --color-id-orange: oklch(0.68 0.14 60);
  --color-id-yellow: oklch(0.75 0.13 95);
  --color-id-green: oklch(0.64 0.13 150);
  --color-id-blue: oklch(0.62 0.13 245);
  --color-id-violet: oklch(0.6 0.13 300);
  --font-sans: "Tilda Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --shadow-card: 0 1px 2px rgba(29, 29, 27, 0.04);
  --shadow-float: 0 2px 6px rgba(29, 29, 27, 0.05), 0 16px 40px rgba(29, 29, 27, 0.08);
  --shadow-overlay: 0 24px 64px rgba(29, 29, 27, 0.16);
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}