/* Lokstack marketing site: semantic + component tokens (layer 2 and 3).
   Primitives come from tokens.css (brand/BRANDING.md). Components in web.css only use the variables below. */
:root {
  /* Extra primitives the web needs (warm neutrals from the brand guide) */
  --sp-linen: #F3F4F0;
  --sp-stone: #E3E0D8;
  --sp-stone-strong: #CFCBC0;
  --sp-moss-600: #5C665F;        /* secondary text on Chalk, 5.9:1 */
  --sp-brand-600: #005A3D;       /* primary hover */
  --sp-amber-900: #542A00;

  /* Semantic: light */
  --c-bg: var(--sp-ink-50);
  --c-surface: var(--sp-white);
  --c-surface-2: var(--sp-linen);
  --c-border: var(--sp-stone);
  --c-border-strong: var(--sp-stone-strong);
  --c-text: var(--sp-ink-900);
  --c-muted: var(--sp-moss-600);
  --c-primary: var(--sp-brand-500);
  --c-primary-hover: var(--sp-brand-600);
  --c-on-primary: var(--sp-white);
  --c-signal: var(--sp-brand-400);
  --c-tint: var(--sp-brand-50);
  --c-ring: var(--sp-brand-400);
  --c-pro: var(--sp-amber-500);
  --c-pro-bg: var(--sp-amber-soft);
  --c-pro-text: var(--sp-amber-900);
  --c-ok: var(--sp-green);
  --c-warn: var(--sp-amber);
  --c-bad: var(--sp-red);
  /* Always-dark band (privacy, final call to action) */
  --c-band: var(--sp-forest);
  --c-band-2: #234A39;
  --c-band-text: #F1F6F2;
  --c-band-muted: #B9CBBF;

  /* Type (fluid) */
  --w-display: clamp(2.5rem, 1.3rem + 5vw, 4.75rem);
  --w-h1: clamp(2.1rem, 1.2rem + 3.6vw, 3.5rem);
  --w-h2: clamp(1.75rem, 1.1rem + 2.4vw, 2.75rem);
  --w-h3: clamp(1.15rem, 1.05rem + .4vw, 1.375rem);
  --w-lead: clamp(1.125rem, 1rem + .5vw, 1.375rem);
  --w-body: 1.0625rem;
  --w-small: .9375rem;
  --w-micro: .8125rem;

  /* Layout */
  --w-max: 1200px;
  --w-narrow: 760px;
  --w-gutter: clamp(20px, 4vw, 40px);
  --w-section: clamp(72px, 9vw, 128px);
  --w-header: 68px;

  /* Component tokens */
  --btn-radius: 12px;
  --btn-h: 48px;
  --card-radius: var(--radius-lg);
  --card-shadow: 0 1px 2px rgba(22, 24, 22, .04), 0 10px 30px rgba(22, 24, 22, .06);
  --card-shadow-hover: 0 1px 2px rgba(22, 24, 22, .05), 0 18px 44px rgba(22, 24, 22, .10);
  --window-shadow: 0 2px 4px rgba(22, 24, 22, .05), 0 30px 80px rgba(22, 24, 22, .18);
  --header-bg: rgba(248, 250, 246, .82);

  /* Motion: Jakub's polish range for a marketing page, Emil's speed for controls */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --t-press: 120ms;
  --t-hover: 180ms;
  --t-reveal: 560ms;
  --t-swap: 240ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg: #121412;
    --c-surface: #1A1E1B;
    --c-surface-2: #222723;
    --c-border: #2E352F;
    --c-border-strong: #3F4841;
    --c-text: #F1F4EF;
    --c-muted: #A6B0A8;
    --c-primary: var(--sp-brand-400);
    --c-primary-hover: #34D399;
    --c-on-primary: #04231A;
    --c-tint: #16261F;
    --c-pro-bg: #2B2112;
    --c-pro-text: #FBBF68;
    --c-band: #0E1B15;
    --c-band-2: #17291F;
    --card-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .28);
    --card-shadow-hover: 0 1px 2px rgba(0, 0, 0, .35), 0 18px 44px rgba(0, 0, 0, .4);
    --window-shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 30px 80px rgba(0, 0, 0, .5);
    --header-bg: rgba(18, 20, 18, .82);
  }
}