/* Roliki Design Tokens — v1.0
 * Extracted from roliki.ua via dembrandt (W3C DTCG compatible)
 * See DESIGN.md for usage rules
 */

:root {
  /* === COLORS === */
  --brand-300: #FAD776;
  --brand-500: #F59B25;
  --brand-600: #F27D00;
  --brand-700: #FC763C;

  --ink-900: #000000;
  --ink-800: #2A2A2A;
  --ink-600: #757575;
  --ink-400: #AAAAAA;
  --ink-200: #DDDDDD;

  --surface:         #FFFFFF;
  --surface-muted:   #F4F5FB;
  --surface-sunken:  #F5F5F5;

  --color-success: #22C55E;
  --color-warning: var(--brand-300);
  --color-danger:  #EF4444;
  --color-info:    #2D9CDB;

  /* Semantic aliases */
  --color-text-primary:   var(--ink-900);
  --color-text-body:      var(--ink-800);
  --color-text-secondary: var(--ink-600);
  --color-text-disabled:  var(--ink-400);
  --color-link:           var(--color-info);
  --color-link-hover:     var(--brand-700);

  /* === TYPOGRAPHY === */
  --font-sans: "Rubik", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, monospace;

  --fs-display: clamp(2.25rem, 4vw + 1rem, 3.5rem);
  --fs-h1:      clamp(1.75rem, 2.5vw + 1rem, 2.5rem);
  --fs-h2:      clamp(1.375rem, 1.5vw + 1rem, 1.75rem);
  --fs-h3:      clamp(1.125rem, 0.5vw + 1rem, 1.25rem);
  --fs-lead:    1.125rem;
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-caption: 0.75rem;

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

  --lh-tight:  1.15;
  --lh-snug:   1.35;
  --lh-body:   1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;

  /* === SPACING === (8pt grid) */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* === LAYOUT === */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  --container-prose: 72ch;
  --container-wide:  1200px;

  /* === RADIUS === */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-full: 9999px;

  /* === SHADOWS === */
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md:   0 8px 24px rgba(0, 0, 0, 0.10);
  --shadow-lg:   0 16px 40px rgba(0, 0, 0, 0.12);
  --shadow-glow: 0 3.2px 18px -5.6px #FAD776;
  --shadow-focus: 0 0 0 3px rgba(245, 155, 37, 0.25);

  /* === MOTION === */
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --duration-micro: 120ms;
  --duration-short: 200ms;
  --duration-medium: 400ms;
}

/* Reset motion for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-micro: 0ms;
    --duration-short: 0ms;
    --duration-medium: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}