/**
 * ddoynikov.ru — design tokens
 * Source: https://ddoynikov.ru/main1 (Tilda + custom.css)
 * Sync: Shared/templates/default-project/static/tokens.css
 */

:root {
  /* ── Primitive: color ── */
  --color-ink: #11100e;
  --color-ink-soft: #222222;
  --color-night: #0b0b0c;
  --color-night-deep: #010101;
  --color-cream: #fffbf7;
  --color-cream-muted: #f7f3f0;
  --color-cream-warm: #f2e7db;
  --color-white: #ffffff;
  --color-gray-500: #636366;
  --color-gray-400: #aeaeb2;
  --color-gray-300: #b2b1ad;
  --color-orange: #f2662b;
  --color-orange-alt: #f2672b;
  --color-orange-bright: #fd740a;
  --color-orange-deep: #e00f0a;
  --color-green: #34c97e;
  --color-amber: #f5a623;
  --color-red: #e05555;

  /* ── Semantic: surfaces (dark dashboard default) ── */
  --bg-base: var(--color-night);
  --bg-surface: #141416;
  --bg-elevated: #1a1a1d;
  --bg-hover: #242428;
  --bg-inverse: var(--color-cream);
  --bg-inverse-muted: var(--color-cream-muted);

  /* ── Semantic: borders ── */
  --border-subtle: #2a2a2e;
  --border-default: #3a3a40;
  --border-inverse: rgba(17, 16, 14, 0.12);

  /* ── Semantic: text ── */
  --text-primary: var(--color-cream);
  --text-secondary: var(--color-gray-400);
  --text-muted: var(--color-gray-500);
  --text-inverse: var(--color-ink);
  --text-on-accent: var(--color-cream);

  /* ── Semantic: accent ── */
  --accent: var(--color-orange);
  --accent-strong: var(--color-orange-alt);
  --accent-dim: rgba(242, 102, 43, 0.14);
  --accent-gradient: linear-gradient(
    90deg,
    var(--color-orange-bright) 0%,
    var(--color-orange-deep) 100%
  );

  /* ── Status ── */
  --success: var(--color-green);
  --success-dim: rgba(52, 201, 126, 0.14);
  --warning: var(--color-amber);
  --warning-dim: rgba(245, 166, 35, 0.12);
  --error: var(--color-red);
  --error-dim: rgba(224, 85, 85, 0.12);

  /* ── Typography ── */
  --font-display: 'Unbounded', system-ui, sans-serif;
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 32px;
  --text-3xl: 42px;
  --text-4xl: 56px;
  --text-hero: clamp(2.5rem, 5vw, 4.5rem);

  --leading-tight: 1.1;
  --leading-snug: 1.2;
  --leading-normal: 1.45;
  --leading-relaxed: 1.55;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --tracking-tight: -0.02em;
  --tracking-section: -0.04em;

  /* ── Spacing ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Radius ── */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;

  /* ── Motion ── */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease-in-out;

  /* ── Component tokens ── */
  --btn-primary-bg: var(--accent);
  --btn-primary-fg: var(--text-on-accent);
  --btn-primary-radius: var(--radius-none);
  --btn-outline-border: var(--accent);
  --btn-outline-fg: var(--accent);

  --section-label-fg: var(--text-secondary);
  --section-label-tracking: 0.12em;

  --logo-fg: var(--text-primary);
  --logo-font: var(--font-sans);
  --logo-weight: var(--weight-medium);

  /* ── Legacy aliases (MetricaCJM / jober) ── */
  --muted: var(--text-secondary);
  --text: var(--text-primary);
  --border: var(--border-subtle);
  --card: var(--bg-surface);
  --ring: 0 0 0 2px rgba(242, 102, 43, 0.4);
}

/* Light sections (лендинг, карточки на светлом фоне) */
[data-surface="light"],
.theme-light {
  --bg-base: var(--color-cream);
  --bg-surface: var(--color-white);
  --bg-elevated: var(--color-cream-muted);
  --bg-hover: var(--color-cream-warm);
  --text-primary: var(--color-ink);
  --text-secondary: var(--color-gray-500);
  --text-muted: var(--color-gray-300);
  --border-subtle: rgba(17, 16, 14, 0.1);
  --border-default: rgba(17, 16, 14, 0.18);
}