/* Lazarev Cloud design tokens — vendored from the LC DS package */
/* ============================================================
   LAZAREV CLOUD — Webfonts
   All three families are Google Fonts. Imported here so the
   single styles.css entry point ships them to consumers.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Spline+Sans+Mono:wght@300;400;500&family=Inter:wght@400;500;600;700&display=swap");
/* ============================================================
   LAZAREV CLOUD — Color tokens
   Minimal monochrome core + a single hot-red accent.
   Black & white do the heavy lifting; red is the signal.
   ============================================================ */

:root {
  /* ---- Brand primitives ---- */
  --lz-red: #f81a2c;        /* the signal color — logo, accents, CTAs */
  --lz-red-ink: #c70f1e;    /* pressed / darker red */
  --lz-blue: #0000a3;       /* secondary deep blue (rare, for contrast marks) */

  --lz-black: #000000;
  --lz-white: #ffffff;

  /* ---- Neutral ramp (cool-neutral, near-black to near-white) ---- */
  --lz-ink-900: #0a0a0b;
  --lz-ink-800: #161618;
  --lz-ink-700: #232327;
  --lz-ink-600: #3a3a40;
  --lz-ink-500: #5b5b63;
  --lz-ink-400: #8a8a92;
  --lz-ink-300: #b6b6bd;
  --lz-ink-200: #d9d9de;
  --lz-ink-100: #ececef;
  --lz-ink-50:  #f6f6f7;

  /* ---- Extended accent set (playful, use one at a time) ---- */
  --lz-orange: #ff902e;
  --lz-yellow: #f0ee88;
  --lz-salmon: #f3a799;
  --lz-pink:   #ee98ef;
  --lz-sky:    #96b5f5;
  --lz-lavender: #dbd0fb;
  --lz-electric: #2c1ad7;

  /* ============================================================
     Semantic aliases — reference these in components
     ============================================================ */

  /* Surfaces */
  --surface-page:    var(--lz-white);
  --surface-inverse: var(--lz-black);
  --surface-raised:  var(--lz-white);
  --surface-sunken:  var(--lz-ink-50);
  --surface-muted:   var(--lz-ink-100);

  /* Text */
  --text-strong:   var(--lz-black);
  --text-body:     var(--lz-ink-800);
  --text-muted:    var(--lz-ink-500);
  --text-subtle:   var(--lz-ink-400);
  --text-on-dark:  var(--lz-white);
  --text-on-accent: var(--lz-white);
  --text-accent:   var(--lz-red);

  /* Lines */
  --border-subtle: var(--lz-ink-200);
  --border-strong: var(--lz-black);
  --border-accent: var(--lz-red);

  /* Accent / interactive */
  --accent:        var(--lz-red);
  --accent-hover:  #ff3343;
  --accent-press:  var(--lz-red-ink);
  --accent-soft:   #fde7e9;

  /* ============================================================
     Semantic STATUS colors  [added for the component pack]
     Error reuses the brand red so the signal stays single-hued.
     success / warning / info are minimal, desaturated to sit
     quietly inside the monochrome system. Each has a base (text/
     icon/stroke), a -soft (tint fill) and an -ink (pressed/strong).
     ============================================================ */
  --status-success:      #1f8f57;
  --status-success-soft: #e4f4ec;
  --status-success-ink:  #156b41;

  --status-warning:      #b8791b;
  --status-warning-soft: #fbefda;
  --status-warning-ink:  #8a5a12;

  --status-error:        var(--lz-red);
  --status-error-soft:   var(--accent-soft);
  --status-error-ink:    var(--lz-red-ink);

  --status-info:         #2f5fd0;
  --status-info-soft:    #e6ecfb;
  --status-info-ink:     #2348a3;

  /* Focus ring */
  --focus-ring: var(--lz-red);
}
/* ============================================================
   LAZAREV CLOUD — Dark theme
   Opt-in theme scope. Only semantic aliases flip; brand
   primitives stay fixed, so every component that references the
   semantic surface, text and border tokens inherits dark mode.
   Enable by setting data-theme on the html element to dark.
   ============================================================ */

[data-theme="dark"] {
  --surface-page:    var(--lz-ink-900);
  --surface-inverse: var(--lz-white);
  --surface-raised:  var(--lz-ink-800);
  --surface-sunken:  #060607;
  --surface-muted:   var(--lz-ink-700);

  --text-strong:   var(--lz-white);
  --text-body:     var(--lz-ink-200);
  --text-muted:    var(--lz-ink-400);
  --text-subtle:   var(--lz-ink-500);
  --text-on-dark:  var(--lz-white);

  --border-subtle: var(--lz-ink-700);
  --border-strong: var(--lz-white);

  --accent-soft:   #2a0f12;

  --status-success-soft: #11271c;
  --status-warning-soft: #2a2010;
  --status-error-soft:   #2a0f12;
  --status-info-soft:    #131d33;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6);
}
/* ============================================================
   LAZAREV CLOUD — Typography tokens
   Poppins   → display / headings (geometric, friendly)
   Spline Sans Mono → mono signature (tagline, labels, code)
   Inter     → body / UI text
   ============================================================ */

:root {
  /* Families */
  --font-display: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "Spline Sans Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Weights */
  --fw-light:    300; /* @kind font */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */

  /* Type scale (rem, 16px base) */
  --fs-display:  7.5rem;   /* 120px — hero wordmark moments */
  --fs-h1:       3.5rem;   /* 56px  */
  --fs-h2:       2.5rem;   /* 40px  */
  --fs-h3:       1.75rem;  /* 28px  */
  --fs-h4:       1.25rem;  /* 20px  */
  --fs-body-lg:  1.125rem; /* 18px  */
  --fs-body:     1rem;     /* 16px  */
  --fs-body-sm:  0.875rem; /* 14px  */
  --fs-caption:  0.75rem;  /* 12px  */

  /* Line heights */
  --lh-tight:   1.0;   /* @kind font */
  --lh-snug:    1.15;  /* @kind font */
  --lh-normal:  1.5;   /* @kind font */
  --lh-relaxed: 1.65;  /* @kind font */

  /* Tracking */
  --tracking-tight:  -0.02em; /* @kind font */
  --tracking-normal: 0;       /* @kind font */
  --tracking-wide:   0.04em;  /* @kind font */
  --tracking-mono:   0.02em;  /* @kind font */
}
/* ============================================================
   LAZAREV CLOUD — Spacing, radii, shadows, motion
   8px base grid. Sharp-to-soft radii. Minimal shadows.
   ============================================================ */

:root {
  /* Spacing (8px grid, with 4px half-step) */
  --space-1:  0.25rem;  /* 4  */
  --space-2:  0.5rem;   /* 8  */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  3rem;     /* 48 */
  --space-8:  4rem;     /* 64 */
  --space-9:  6rem;     /* 96 */
  --space-10: 8rem;     /* 128 */

  /* Radii — sharp-first. One working UI radius (sm); pill reserved for toggle/meter tracks; full for discs. */
  --radius-none: 0;
  --radius-sm:   4px;    /* the only UI corner radius — buttons, inputs, cards, badges, chips, bubbles */
  --radius-pill: 999px;  /* capsule — toggle & meter tracks only (Switch, Progress) */
  --radius-full: 50%;    /* discs only — logo mark, avatars */

  /* Borders */
  --border-w:    1px;
  --border-w-2:  2px;

  /* Shadows — restrained, neutral */
  --shadow-sm: 0 1px 2px rgba(10, 10, 11, 0.06);
  --shadow-md: 0 4px 16px rgba(10, 10, 11, 0.08);
  --shadow-lg: 0 12px 40px rgba(10, 10, 11, 0.12);
  --shadow-accent: 0 8px 24px rgba(248, 26, 44, 0.28);

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-normal: 200ms; /* @kind other */
  --dur-slow:   360ms; /* @kind other */

  /* Layout */
  --container-max: 1200px; /* @kind spacing */
}