/*
 * SeinX Design Tokens v1.0.0
 * Generated from tokens.json — do not edit by hand.
 * DTCG format (2025.10) · Dark-first · WCAG AAA body text
 * Updated: 2026-03-27
 */

:root {

  /* ── Core Palette ── */
  --sx-smoke: #323232;
  --sx-smoke-light: #3d3d3d;
  --sx-smoke-lighter: #4a4a4a;
  --sx-forest: #2a7a48;
  --sx-signal: #3ddc84;
  --sx-gold: #c9a84c;
  --sx-terracotta: #c27a5a;

  /* ── Neutral Scale ── */
  --sx-neutral-100: #f0ede8;  /* 10.98:1 on smoke */
  --sx-neutral-90: #d8d4cd;  /* 8.68:1 on smoke */
  --sx-neutral-80: #c4c0b8;  /* 7.07:1 on smoke */
  --sx-neutral-60: #8a8680;  /* 3.54:1 on smoke */
  --sx-neutral-40: #5e5b57;  /* not for text */
  --sx-neutral-20: #3e3c39;  /* not for text */
  --sx-neutral-10: #2a2927;  /* not for text */

  /* ── Semantic Colors ── */
  --sx-color-background: #323232;
  --sx-color-surface: #3d3d3d;
  --sx-color-surface-elevated: #4a4a4a;
  --sx-color-border: #4a4a4a;
  --sx-color-interactive: #3ddc84;
  --sx-color-text-primary: #f0ede8;
  --sx-color-text-secondary: #d8d4cd;
  --sx-color-text-muted: #c4c0b8;
  --sx-color-accent: #c9a84c;
  --sx-color-warning: #c27a5a;
  --sx-color-success: #3ddc84;
  --sx-color-container: #2a7a48;

  /* ── Interaction States ── */
  --sx-color-hover: #5ae59a;
  --sx-color-focus: #3ddc84;
  --sx-color-active: #34bb70;
  --sx-color-disabled: #8a8680;
  --sx-color-focus-ring: #3ddc84;

  /* ── Typography ── */
  --sx-font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sx-fs-display: 4rem;
  --sx-fw-display: 800;
  --sx-lh-display: 1.05;
  --sx-fs-h1: 2.441rem;
  --sx-fw-h1: 700;
  --sx-lh-h1: 1.15;
  --sx-fs-h2: 1.953rem;
  --sx-fw-h2: 700;
  --sx-lh-h2: 1.2;
  --sx-fs-h3: 1.563rem;
  --sx-fw-h3: 600;
  --sx-lh-h3: 1.25;
  --sx-fs-h4: 1.25rem;
  --sx-fw-h4: 600;
  --sx-lh-h4: 1.3;
  --sx-fs-body: 1rem;
  --sx-fw-body: 400;
  --sx-lh-body: 1.5;
  --sx-fs-body-sm: 0.875rem;
  --sx-fw-body-sm: 400;
  --sx-lh-body-sm: 1.5;
  --sx-fs-caption: 0.75rem;
  --sx-fw-caption: 500;
  --sx-lh-caption: 1.4;
  --sx-fs-micro: 0.6875rem;
  --sx-fw-micro: 500;
  --sx-lh-micro: 1.35;
  --sx-fs-overline: 0.5625rem;
  --sx-fw-overline: 600;
  --sx-lh-overline: 1.3;
  --sx-ls-overline: 0.12em;

  /* ── Spacing ── */
  --sx-sp-1: 0.25rem;
  --sx-sp-2: 0.5rem;
  --sx-sp-3: 0.75rem;
  --sx-sp-4: 1rem;
  --sx-sp-6: 1.5rem;
  --sx-sp-8: 2rem;
  --sx-sp-10: 2.5rem;
  --sx-sp-12: 3rem;
  --sx-sp-16: 4rem;
  --sx-sp-20: 5rem;

  /* ── Border Radius ── */
  --sx-radius-sm: 4px;
  --sx-radius-md: 8px;
  --sx-radius-lg: 12px;
  --sx-radius-xl: 16px;
  --sx-radius-full: 9999px;

  /* ── Shadows ── */
  --sx-shadow-sm: 0 1px 2px rgba(0,0,0,0.25);
  --sx-shadow-md: 0 4px 12px rgba(0,0,0,0.3);
  --sx-shadow-lg: 0 8px 24px rgba(0,0,0,0.35);

  /* ── Motion ── */
  --sx-duration-fast: 150ms;
  --sx-duration-normal: 300ms;
  --sx-duration-slow: 600ms;
  --sx-easing-default: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Z-Index ── */
  --sx-z-base: 0;
  --sx-z-dropdown: 100;
  --sx-z-sticky: 200;
  --sx-z-modal: 400;
  --sx-z-popover: 500;
  --sx-z-toast: 600;

  /* ── Opacity ── */
  --sx-opacity-subtle: 0.1;
  --sx-opacity-muted: 0.3;
  --sx-opacity-half: 0.5;
  --sx-opacity-prominent: 0.7;
  --sx-opacity-near-opaque: 0.9;
}