/* SEMAI design tokens — przeniesione 1:1 z dist-v11/tokens/*.css.
   Fonty (Inter, JetBrains Mono) ładuje functions.php (wp_enqueue_style),
   dlatego @import z tokens/fonts.css został tu pominięty. */

/* ===== tokens/colors.css ===== */
/* SEMAI — Color System (Brandbook v1.0 §03)
   Dark-mode premium is the chosen surface (SEMAI Black #0B0B0E is a brand
   neutral for "tła premium, high contrast"). ONE chromatic voice: the SEMAI
   violet ramp, anchored on the three official hexes. No second accent, no
   cyan, no bluish-purple. Historical #8A2BE2 is forbidden. */

:root {
  /* ---- OFFICIAL BRAND COLORS ---- */
  --semai-black: #0B0B0E;      /* SEM in logo, main text, premium bg */
  --technical-black: #000000;  /* production/technical */
  --violet-dark: #6B2DD9;      /* gradient start, CTA, strategic accent */
  --violet-core: #AB65D6;      /* main brand violet, gradient end (AI) */
  --violet-light: #D1A6FF;     /* gradient end (sygnet), glows, subtle bg */
  --off-white: #F7F7F8;        /* document/section/card bg (light) */
  --line-light: #E7E2EE;       /* lines, borders, grid (light) */
  --text-light-bg: #16161A;    /* body text on light */
  --muted-brand: #6F6F78;      /* metadata, secondary (light) */

  /* ---- Neutral graphite ramp (dark-mode surfaces, anchored on #0B0B0E) ---- */
  --graphite-950: #0B0B0E;   /* SEMAI Black — page base */
  --graphite-925: #0E0E12;
  --graphite-900: #111116;   /* app canvas */
  --graphite-875: #16161A;   /* brand --text on-light == elevated dark base */
  --graphite-850: #191920;   /* card / surface */
  --graphite-800: #20202A;   /* elevated surface */
  --graphite-750: #292933;   /* hover surface */
  --graphite-700: #333340;   /* strong border / divider */
  --graphite-600: #43434F;
  --graphite-500: #5C5C68;
  --graphite-400: #7A7A86;   /* faint text */
  --graphite-300: #9E9EAC;   /* muted text */
  --graphite-200: #C6C6D2;
  --graphite-100: #E6E6ED;   /* body text on dark */
  --graphite-050: #F7F7F8;   /* Off White — highest contrast text */
  --white: #FFFFFF;

  /* ---- SEMAI Violet ramp (built around the 3 official anchors) ---- */
  --violet-050: #F4ECFF;
  --violet-100: #E7D6FF;
  --violet-200: #D1A6FF;   /* ★ Violet Light (official) */
  --violet-300: #C08CEC;
  --violet-400: #AB65D6;   /* ★ Violet Core (official) — main brand violet */
  --violet-500: #8C3FD4;   /* interpolated primary */
  --violet-600: #6B2DD9;   /* ★ Violet Dark (official) — CTA / strategic */
  --violet-700: #571FB0;
  --violet-800: #421887;
  --violet-900: #2B1259;

  /* ---- Semantic states (muted, functional; used sparingly) ---- */
  --green-400: #3ECF8E;    /* positive / live / success + Performance accent */
  --green-900: #0E2A22;
  --amber-400: #E8B23A;    /* caution / readiness */
  --amber-900: #2E2410;
  --red-400: #F0603E;      /* risk / error */
  --red-900: #2E140F;

  /* ---- SEMAI Performance product color (Brandbook v1.1 §03.2) ----
     Green is the PRODUCT accent for SEM/Performance ONLY. Never in the logo,
     never mixed with violet in one gradient. Homepage: max 3-5% (bridge
     section only). /performance: 10-15%, may be the main accent. */
  --perf-accent: #3ECF8E;
  --perf-accent-hover: #5BD9A0;
  --perf-accent-press: #2FB87A;
  --perf-deep: #0E2A22;
  --perf-tint: rgba(62, 207, 142, 0.12);
  --perf-tint-strong: rgba(62, 207, 142, 0.20);
  --perf-border: rgba(62, 207, 142, 0.30);
  --perf-glow: rgba(62, 207, 142, 0.24);
  --perf-text: #7BE3B6;

  /* =========================================================
     SEMANTIC ALIASES — reference these in components/screens
     ========================================================= */

  /* Backgrounds & surfaces (dark premium) */
  --bg-base: var(--graphite-950);
  --bg-canvas: var(--graphite-900);
  --surface-1: var(--graphite-850);
  --surface-2: var(--graphite-800);
  --surface-3: var(--graphite-750);
  --surface-hover: var(--graphite-750);
  --surface-inset: var(--graphite-925);

  /* Text */
  --text-strong: var(--graphite-050);
  --text-body: var(--graphite-100);
  --text-muted: var(--graphite-300);
  --text-faint: var(--graphite-400);
  --text-on-accent: var(--white);
  --text-accent: var(--violet-300);

  /* Borders & lines (thin, low-contrast — a core SEMAI motif) */
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-accent: rgba(107, 45, 217, 0.60);
  --hairline: rgba(255, 255, 255, 0.08);

  /* Accent surfaces — CTA = Violet Dark #6B2DD9 (per brandbook) */
  --accent: var(--violet-600);
  --accent-hover: var(--violet-500);
  --accent-press: var(--violet-700);
  --accent-core: var(--violet-400);
  --accent-tint: rgba(107, 45, 217, 0.14);
  --accent-tint-strong: rgba(139, 63, 212, 0.24);
  --accent-glow: rgba(139, 63, 212, 0.38);

  /* Focus */
  --focus-ring: rgba(171, 101, 214, 0.55);

  /* Semantic mapping */
  --positive: var(--green-400);
  --caution: var(--amber-400);
  --risk: var(--red-400);
  --data: var(--violet-200);   /* data highlight stays within the violet palette */

  /* Performance product gradient + spotlight (green, /performance only) */
  --grad-perf: linear-gradient(25deg, #2FB87A 0%, #3ECF8E 100%);   /* @kind color */
  --grad-perf-spotlight: radial-gradient(60% 60% at 50% 0%, rgba(62,207,142,0.20), rgba(62,207,142,0) 70%);   /* @kind color */
}

/* ===== tokens/typography.css ===== */
/* SEMAI — Typography
   Geist for voice, Geist Mono for the machine. Mono is not decorative here:
   it signals data, systems and answer-engine chrome. Tight tracking on
   display, generous line-height on body. */

:root {
  /* Brandbook §04: Inter Display (hero/headings), Inter (body/UI),
     JetBrains Mono (data/tokens). Inter Display via Inter's opsz axis. */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'IBM Plex Mono', 'Menlo', 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 */
  --fw-black: 800;    /* @kind font */

  /* ---- Type scale (px) ---- */
  --fs-display-xl: 76px;   /* hero */
  --fs-display-l: 56px;
  --fs-display-m: 44px;
  --fs-h1: 34px;
  --fs-h2: 26px;
  --fs-h3: 20px;
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-caption: 13px;
  --fs-micro: 11px;        /* mono eyebrows / labels */

  /* ---- Line heights ---- */
  --lh-tight: 1.02;    /* @kind font */
  --lh-snug: 1.14;     /* @kind font */
  --lh-heading: 1.22;  /* @kind font */
  --lh-body: 1.6;      /* @kind font */
  --lh-relaxed: 1.72;  /* @kind font */

  /* ---- Letter spacing ---- */
  --ls-tight: -0.03em;   /* @kind font */
  --ls-snug: -0.015em;   /* @kind font */
  --ls-normal: 0em;      /* @kind font */
  --ls-wide: 0.02em;     /* @kind font */
  --ls-eyebrow: 0.16em;  /* @kind font */

  /* ---- Semantic roles ---- */
  --text-display: var(--fw-semibold) var(--fs-display-l)/var(--lh-tight) var(--font-sans);  /* @kind font */
  --text-h1: var(--fw-semibold) var(--fs-h1)/var(--lh-heading) var(--font-sans);  /* @kind font */
  --text-h2: var(--fw-semibold) var(--fs-h2)/var(--lh-heading) var(--font-sans);  /* @kind font */
  --text-h3: var(--fw-medium) var(--fs-h3)/var(--lh-snug) var(--font-sans);  /* @kind font */
  --text-body-role: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-sans);  /* @kind font */
  --text-mono-label: var(--fw-medium) var(--fs-micro)/1.2 var(--font-mono);  /* @kind font */
}

/* ===== tokens/spacing.css ===== */
/* SEMAI — Spacing & Layout
   8px base grid with a couple of half-steps for dense technical UI.
   Wide max-widths and generous gutters: SEMAI breathes. */

:root {
  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-11: 64px;
  --space-12: 80px;
  --space-13: 96px;
  --space-14: 128px;
  --space-15: 160px;

  /* Section rhythm */
  --section-y: 120px;      /* vertical padding between page sections */
  --section-y-sm: 72px;

  /* Layout */
  --container-max: 1200px;
  --container-wide: 1360px;
  --container-text: 720px; /* prose measure */
  --gutter: 24px;

  /* Grid */
  --grid-gap: 24px;
  --grid-gap-sm: 16px;
}

/* ===== tokens/effects.css ===== */
/* SEMAI — Effects: radii, borders, shadows, gradients, blur
   The look: thin hairlines over deep graphite, soft violet glow used as
   signal not decoration, subtle top-edge highlights on raised surfaces. */

:root {
  /* ---- Radii ---- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;    /* default control/card radius */
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* ---- Border widths ---- */
  --bw-hair: 1px;   /* @kind spacing */

  /* ---- Elevation shadows (deep, diffuse — dark UI) ---- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 40px 100px rgba(0, 0, 0, 0.66);

  /* Inner top highlight for raised surfaces (1px light edge) */
  --edge-top: inset 0 1px 0 rgba(255, 255, 255, 0.05);   /* @kind shadow */

  /* ---- Accent glow (violet signal — brand palette) ---- */
  --glow-sm: 0 0 0 1px rgba(107, 45, 217, 0.40), 0 6px 24px rgba(107, 45, 217, 0.24);   /* @kind shadow */
  --glow-md: 0 0 30px rgba(139, 63, 212, 0.32);   /* @kind shadow */
  --glow-lg: 0 0 60px rgba(139, 63, 212, 0.36);   /* @kind shadow */
  --glow-ring: 0 0 0 4px rgba(107, 45, 217, 0.18);   /* @kind shadow */

  /* ---- Focus ring ---- */
  --ring-focus: 0 0 0 3px var(--focus-ring);   /* @kind shadow */

  /* ---- Gradients ---- */
  /* Subtle surface sheen (top-lit panel) */
  --grad-surface: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0) 42%);   /* @kind color */
  /* Signature violet gradients — BRAND: 25deg, official hexes only.
     AI gradient = 2-stop (#6B2DD9 -> #AB65D6); sygnet gradient = 3-stop.
     Never wash long text; never add new hues; never one gradient across all. */
  --grad-ai: linear-gradient(25deg, #6B2DD9 0%, #AB65D6 100%);   /* @kind color */
  --grad-sygnet: linear-gradient(25deg, #6B2DD9 0%, #AB65D6 50%, #D1A6FF 100%);   /* @kind color */
  --grad-violet: var(--grad-sygnet);   /* @kind color */
  --grad-violet-soft: linear-gradient(25deg, rgba(107,45,217,0.20), rgba(209,166,255,0.10));   /* @kind color */
  /* Radial spotlight behind hero content */
  --grad-spotlight: radial-gradient(60% 60% at 50% 0%, rgba(107,45,217,0.22), rgba(107,45,217,0) 70%);   /* @kind color */
  /* Fade-to-base protection gradient (for image/section edges) */
  --grad-fade-base: linear-gradient(180deg, rgba(8,8,11,0), var(--graphite-950));   /* @kind color */
  /* Grid line mesh (thin-line motif) — use as background-image */
  --grid-mesh: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
               linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);   /* @kind color */
  --grid-mesh-size: 40px 40px;   /* @kind spacing */

  /* ---- Blur (glass) ---- */
  --blur-panel: saturate(140%) blur(14px);   /* @kind other */
  --blur-strong: saturate(160%) blur(24px);   /* @kind other */
}

/* ===== tokens/motion.css ===== */
/* SEMAI — Motion
   Precise, quiet, engineered. Short durations, confident easing. Fades and
   small translations; no bounce, no theatrics. Motion should feel like a
   system settling into place, not an effect. */

:root {
  /* Durations */
  --dur-instant: 80ms;   /* @kind other */
  --dur-fast: 140ms;     /* @kind other */
  --dur-base: 200ms;     /* @kind other */
  --dur-slow: 320ms;     /* @kind other */
  --dur-slower: 520ms;   /* @kind other */

  /* Easing */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);       /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);    /* @kind other */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);  /* @kind other */
  --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);   /* @kind other */

  /* Common transitions */
  --t-colors: color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out); /* @kind other */
  --t-transform: transform var(--dur-base) var(--ease-out);
  --t-all: all var(--dur-base) var(--ease-out); /* @kind other */
}

@keyframes semai-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes semai-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes semai-caret {
  0%, 45% { opacity: 1; }
  55%, 100% { opacity: 0; }
}
@keyframes semai-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
@keyframes semai-scan {
  from { background-position: 0 0; }
  to   { background-position: 0 -40px; }
}

/* ---- Expressive brand motion (Linear/Vercel-inspired, still restrained) ---- */

/* Slow drifting aurora glow behind hero content */
@keyframes semai-aurora {
  0%   { transform: translate3d(-6%, -3%, 0) scale(1);   opacity: 0.9; }
  50%  { transform: translate3d(6%, 4%, 0) scale(1.15);  opacity: 1; }
  100% { transform: translate3d(-6%, -3%, 0) scale(1);   opacity: 0.9; }
}

/* Grid mesh slowly panning — the "system is alive" texture */
@keyframes semai-grid-pan {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 40px 40px, 40px 40px; }
}

/* Shimmer sweep across the violet part of the logo / accents */
@keyframes semai-shimmer {
  0%   { background-position: -180% 0; }
  100% { background-position: 180% 0; }
}

/* Gentle vertical float for hero product shots */
@keyframes semai-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* Sygnet "listening" ring — slow rotate */
@keyframes semai-ring-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Expanding radar ping */
@keyframes semai-ping {
  0%   { transform: scale(0.6); opacity: 0.55; }
  70%  { opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* Typing caret blink (block) */
@keyframes semai-blink {
  0%, 49%  { opacity: 1; }
  50%, 100%{ opacity: 0; }
}

/* Marquee for the ecosystem strip */
@keyframes semai-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Counter-rotate (rings spinning the other way) */
@keyframes semai-ring-rotate-rev {
  from { transform: rotate(360deg); }
  to   { transform: rotate(0deg); }
}

/* Orbiting satellite dot around the sygnet */
@keyframes semai-orbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Slow conic sweep for the Vercel-style halo */
@keyframes semai-conic-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Soft glow breathing for the hero mark */
@keyframes semai-breathe {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ===== tokens/base.css ===== */
/* SEMAI — Base / reset
   Minimal resets + sensible dark-mode defaults + a few utility primitives
   used across specimen cards and kits. Kept small on purpose. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text-body);
  font: var(--text-body-role);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--accent-tint-strong); color: var(--text-strong); }

a { color: var(--text-accent); text-decoration: none; }

/* Focus visibility (keyboard) */
:focus-visible { outline: none; box-shadow: var(--ring-focus); }

/* Thin custom scrollbars for dark surfaces */
* { scrollbar-width: thin; scrollbar-color: var(--graphite-700) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--graphite-700); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--graphite-600); }

/* ---- Eyebrow: the SEMAI mono kicker used everywhere ---- */
.semai-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-accent);
}

/* ---- Grid-mesh backdrop utility ---- */
.semai-mesh {
  background-image: var(--grid-mesh);
  background-size: var(--grid-mesh-size);
}