/* NUTREEX landing design system: tokens.
   Light is the default; dark by data-theme="dark" on any element, or by the system setting when no data-theme is set on the root.
   Name every value you use by its token; the DTCG copy is tokens.json. */

:root,
[data-theme="light"] {
  --nx-bg: #F1F6F5;
  --nx-surface: #FFFFFF;
  --nx-surface-2: #E1EDEA;
  --nx-ink: #12302B;
  --nx-heading: #123D32;
  --nx-muted: #4A6761;
  --nx-accent: #1B6B58;
  --nx-on-accent: #FFFFFF;
  --nx-link: #14594A;
  --nx-warm: #7A5200;
  --nx-decor-1: #F2C879;
  --nx-decor-2: #BFE0D8;
  --nx-line: #D3E2DF;
  --nx-logo: #153C1D;
  --nx-luminous: #0B7F66;
  --nx-grid: rgba(18, 48, 43, 0.065);
  --nx-glow-shadow: none;
  --nx-dot-glow: none;
  --nx-logo-on-light-display: block;
  --nx-logo-on-dark-display: none;
}

[data-theme="dark"] {
  --nx-bg: #0B1614;
  --nx-surface: #12221F;
  --nx-surface-2: #193029;
  --nx-ink: #E3F0EC;
  --nx-heading: #F0F8F5;
  --nx-muted: #A7C0B9;
  --nx-accent: #8AD6C1;
  --nx-on-accent: #0B1614;
  --nx-link: #8AD6C1;
  --nx-warm: #F0C46F;
  --nx-decor-1: #6B5420;
  --nx-decor-2: #1E4A41;
  --nx-line: #233B36;
  --nx-logo: #A8E6BF;
  --nx-luminous: #5BF0C8;
  --nx-grid: rgba(138, 214, 193, 0.075);
  --nx-glow-shadow: 0 0 10px color-mix(in srgb, var(--nx-luminous) 45%, transparent);
  --nx-dot-glow: drop-shadow(0 0 4px var(--nx-luminous));
  --nx-logo-on-light-display: none;
  --nx-logo-on-dark-display: block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --nx-bg: #0B1614;
    --nx-surface: #12221F;
    --nx-surface-2: #193029;
    --nx-ink: #E3F0EC;
    --nx-heading: #F0F8F5;
    --nx-muted: #A7C0B9;
    --nx-accent: #8AD6C1;
    --nx-on-accent: #0B1614;
    --nx-link: #8AD6C1;
    --nx-warm: #F0C46F;
    --nx-decor-1: #6B5420;
    --nx-decor-2: #1E4A41;
    --nx-line: #233B36;
    --nx-logo: #A8E6BF;
    --nx-luminous: #5BF0C8;
    --nx-grid: rgba(138, 214, 193, 0.075);
    --nx-glow-shadow: 0 0 10px color-mix(in srgb, var(--nx-luminous) 45%, transparent);
    --nx-dot-glow: drop-shadow(0 0 4px var(--nx-luminous));
    --nx-logo-on-light-display: none;
    --nx-logo-on-dark-display: block;
  }
}

:root {
  /* type */
  --nx-font-heading: 'Tektur', system-ui, sans-serif;
  --nx-font-body: 'Golos Text', system-ui, sans-serif;
  --nx-font-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --nx-weight-heading: 500;
  --nx-text-label: 11px;
  --nx-text-small: 12.5px;
  --nx-text-body: 14px;
  --nx-text-stage: 16px;
  --nx-text-h3: 17px;
  --nx-text-lead: 18px;
  --nx-text-h1: 27px;
  --nx-text-h2: clamp(22px, 2.8vw, 30px);
  --nx-text-display: clamp(27px, 4.4vw, 46px);
  --nx-leading-tight: 1.14;
  --nx-leading-body: 1.55;
  --nx-tracking-label: 0.08em;
  /* spacing */
  --nx-space-1: 4px;
  --nx-space-2: 6px;
  --nx-space-3: 8px;
  --nx-space-4: 10px;
  --nx-space-5: 12px;
  --nx-space-6: 14px;
  --nx-space-7: 16px;
  --nx-space-8: 18px;
  --nx-space-9: 20px;
  --nx-space-10: 26px;
  --nx-space-11: 32px;
  --nx-space-12: 48px;
  --nx-space-13: clamp(40px, 6vw, 72px);
  /* page layout */
  --nx-wrap: 1120px;
  --nx-wrap-narrow: 760px;
  --nx-header-h: 60px;
  /* radius */
  --nx-radius-tag: 6px;
  --nx-radius-control: 12px;
  --nx-radius-button: 14px;
  --nx-radius-frame: 18px;
  --nx-radius-card: 20px;
  --nx-radius-pill: 999px;
  /* the cut and the lines */
  --nx-chamfer: 10px;
  --nx-line-hairline: 1px;
  --nx-line-icon: 1.5px;
  --nx-line-bracket: 1px;
  --nx-line-glow: 1px;
  --nx-bracket: 12px;
  --nx-bracket-hover: 20px;
  --nx-grid-cell: 28px;
  --nx-sweep-highlight: rgba(255, 255, 255, 0.38);
  /* motion */
  --nx-dur-instant: 90ms;
  --nx-dur-fast: 140ms;
  --nx-dur-base: 240ms;
  --nx-dur-reveal: 560ms;
  --nx-dur-sweep: 900ms;
  --nx-dur-draw: 900ms;
  --nx-dur-count: 800ms;
  --nx-dur-drift: 60s;
  --nx-dur-pulse: 2400ms;
  --nx-stagger: 90ms;
  --nx-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --nx-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --nx-ease-soft: cubic-bezier(0.3, 0, 0.2, 1);
  --nx-ease-linear: linear;
  /* layers */
  --nx-z-base: 0;
  --nx-z-raised: 10;
  --nx-z-sticky: 100;
  --nx-z-overlay: 1000;
  --nx-z-modal: 1100;
}