:root {
  /* Stitch / HAIRLAB dark tokens */
  --bg: #13131a;
  --cosmic-void: #0b0b12;
  --surface: #1b1b22;
  --surface-soft: #1f1f26;
  --surface-high: #2a2931;
  --surface-highest: #34343c;
  --text: #e4e1ec;
  --muted: #c9c4d8;
  --line: #484555;
  --outline: #928ea1;
  --primary: #c9bfff;
  --primary-dark: #917eff;
  --secondary: #ffb2b8;
  --glow-purple: #7b61ff;
  --coral: #ff4d6d;
  --glass-fill: rgba(52, 52, 60, 0.4);
  --glass-border: rgba(72, 69, 85, 0.15);

  /* Strand gradient stops */
  --strand-lavender: #b5b0ff;
  --strand-mauve: #d8b8e8;
  --strand-peach: #ffb7b7;

  /* Brand identity — monogram/wordmark gradient + mint accent */
  --brand-grad-start: #ede8ff;
  --brand-grad-mid: #c9bfff;
  --brand-grad-end: #917eff;
  --brand-gradient: linear-gradient(
    135deg,
    var(--brand-grad-start) 0%,
    var(--brand-grad-mid) 45%,
    var(--brand-grad-end) 100%
  );
  --brand-mint: #59ffa2;
  --brand-mint-soft: rgba(89, 255, 162, 0.16);
  --brand-mint-ink: #0a7f4a;

  /* Light mode preview */
  --light-bg: #f7f4ef;
  --light-text: #1c1824;
  --light-primary: #5a45d4;

  --success: #6ee7a8;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 28px;
  --space-xl: 36px;
  --space-xxl: 56px;
  --space-3xl: 88px;

  /* Radii */
  --radius-xl: 24px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.22), 0 2px 12px rgba(123, 97, 255, 0.08);
  --shadow-glow: 0 0 40px rgba(123, 97, 255, 0.25);
  --shadow-card: 0 16px 48px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.04);

  /* Motion */
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-silk: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-ios-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --duration-fast: 200ms;
  --duration-med: 400ms;
  --duration-slow: 600ms;
  --duration-portal: 580ms;
  --duration-chamber: 480ms;
  --duration-snap: 650ms;
  --duration-tunnel: 1800ms;
  --stagger: 120ms;

  /* Layout */
  --header-h: 68px;
  --content-max: 1240px;
  --feed-max: 720px;
  --z-header: 100;
  --thread-w: 48px;
  --phone-w: 280px;
  --phone-h: 560px;
  --chamber-min-h: 100vh;
  --chamber-min-h: 100dvh;
}

/* Tryb jasny — ciemniejszy gradient marki dla kontrastu (logo, nagłówki, CTA) */
[data-theme="light"] {
  --brand-grad-start: #7b61ff;
  --brand-grad-mid: #6b50e0;
  --brand-grad-end: #5a45d4;
  --brand-gradient: linear-gradient(
    135deg,
    var(--brand-grad-start) 0%,
    var(--brand-grad-mid) 50%,
    var(--brand-grad-end) 100%
  );
  --brand-mint-soft: rgba(10, 127, 74, 0.12);
}

/* Mięta na jasnym tle wymaga ciemniejszego atramentu */
[data-theme="light"] .cc-verified,
[data-theme="light"] .legal-header + .wrap code,
[data-theme="light"] code {
  color: var(--brand-mint-ink);
}