/* ============================================================
   SUKOON — Design Tokens
   Source of truth: DESIGN-sentry.md (do not add values not
   present there or in its Approved Extensions section).
   ============================================================ */

:root {
  /* ---- Colors: brand & accent ---- */
  --sk-primary: #150f23;
  --sk-ink-deep: #1f1633;
  --sk-on-primary: #ffffff;
  --sk-accent-lime: #c2ef4e;
  --sk-accent-pink: #fa7faa;
  --sk-accent-violet: #6a5fc1;
  --sk-accent-violet-deep: #422082;
  --sk-accent-violet-mid: #79628c;

  /* ---- Colors: surfaces ---- */
  --sk-surface-canvas-dark: #1f1633;
  --sk-surface-canvas-light: #ffffff;
  --sk-surface-night: #150f23;
  --sk-surface-press-light: #f0f0f0;
  --sk-surface-press-stronger: #efefef;

  /* ---- Colors: hairlines ---- */
  --sk-hairline-violet: #362d59;
  --sk-hairline-cool: #cfcfdb;
  --sk-hairline-cloud: #e5e7eb;

  /* ---- Colors: text ---- */
  --sk-ink: #1f1633;
  --sk-ink-press: #1a1a1a;
  --sk-on-dark-muted: rgba(255, 255, 255, 0.72);
  --sk-on-dark-faint: rgba(255, 255, 255, 0.18);

  /* ---- Colors: semantic (Approved Extensions v1) ---- */
  /* ring at full opacity: 50%-alpha blue fails WCAG 1.4.11 non-text contrast (1.85:1 on white) */
  --sk-ring-focus: #3b82f6;
  --sk-status-success: #2a7054;
  --sk-status-success-tint: #e8f4ee;
  --sk-status-error: #c02f55;
  --sk-status-error-tint: #fbe9ee;
  --sk-status-warning: #8f6300;
  --sk-status-warning-tint: #faf1df;
  --sk-status-info: #6a5fc1;
  --sk-status-info-tint: #efedf9;

  /* ---- Typography families ---- */
  --sk-font-display: "Space Grotesk", "Rubik", system-ui, sans-serif;
  --sk-font-ui: "Rubik", -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  --sk-font-code: Monaco, Menlo, "Ubuntu Mono", monospace;

  /* ---- Type scale (size / weight / line-height / tracking) ---- */
  /* display substitution rule: proprietary face lh minus 0.05 */
  --sk-display-hero-size: 88px;   --sk-display-hero-lh: 1.15;
  --sk-display-large-size: 60px;  --sk-display-large-lh: 1.05;
  --sk-heading-xl-size: 30px;
  --sk-heading-lg-size: 27px;
  --sk-heading-md-size: 24px;
  --sk-heading-sm-size: 20px;
  --sk-body-size: 16px;
  --sk-eyebrow-size: 15px;
  --sk-button-cap-size: 14px;
  --sk-caption-size: 14px;
  --sk-micro-cap-size: 10px;
  --sk-code-size: 16px;

  /* ---- Radius ---- */
  --sk-rounded-xs: 4px;
  --sk-rounded-sm: 6px;
  --sk-rounded-md: 8px;
  --sk-rounded-lg: 10px;
  --sk-rounded-xl: 12px;
  --sk-rounded-xxl: 18px;
  --sk-rounded-full: 9999px;

  /* ---- Spacing (8px base) ---- */
  --sk-space-xxs: 2px;
  --sk-space-xs: 4px;
  --sk-space-sm: 8px;
  --sk-space-md: 12px;
  --sk-space-lg: 16px;
  --sk-space-xl: 24px;
  --sk-space-xxl: 32px;
  --sk-space-section: 96px;
  --sk-space-section-mobile: 40px;

  /* ---- Elevation ---- */
  --sk-shadow-1: rgba(0, 0, 0, 0.08) 0 2px 8px 0;
  --sk-shadow-2: rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.1) 0 4px 6px -4px;
  --sk-shadow-3-glow: rgb(21, 15, 35) 0 0 8px 6px;
  --sk-shadow-4: rgba(0, 0, 0, 0.18) 0 0.5rem 1.5rem;
  --sk-shadow-input-focus-inset: rgba(0, 0, 0, 0.15) 0 2px 10px inset;

  /* ---- Motion (Approved Extensions v1) ---- */
  --sk-motion-micro: 150ms ease;
  --sk-motion-overlay: 250ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Layout ---- */
  --sk-container-max: 1152px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --sk-motion-micro: 0ms linear;
    --sk-motion-overlay: 0ms linear;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}