/**
 * Decto Design Tokens — single source of truth
 * Ivory #FAF9F5 · Botanical #17382F/#29483D · Mist #E7EFEA · Champagne #C5A46D · Peyda
 * Semantic aliases map to brand palette. Prefer semantic tokens in new CSS.
 */
:root,
[data-theme='light'] {
  /* —— Brand raw —— */
  --bn-cream: #f7f6f3;
  --bn-cream-2: #f1f0ec;
  --bn-ivory: #faf9f7;
  --bn-white: #ffffff;
  --bn-green: #17382f;
  --bn-green-deep: #122c26;
  --bn-green-mid: #29483d;
  --bn-green-light: #3a5f52;
  --bn-green-soft: #e8efea;
  --bn-gold: #c5a46d;
  --bn-gold-light: #e4d4b2;
  --bn-gold-champagne: #f0d9a0;
  --bn-gold-soft: rgba(197, 164, 109, 0.12);
  --bn-text: #142821;
  --bn-text-2: #3d4f48;
  --bn-text-3: #66756e;
  --bn-border: rgba(23, 56, 47, 0.1);
  --bn-border-soft: rgba(23, 56, 47, 0.06);
  --bn-success: #4f8a6a;
  --bn-warning: #b8893d;
  --bn-danger: #b45a52;
  --bn-info: #3d6b7a;
  --bn-mist: #e7efea;
  --bn-surface: rgba(255, 255, 255, 0.72);
  --bn-surface-2: rgba(255, 255, 255, 0.58);
  --bn-glass: rgba(255, 255, 255, 0.52);
  --bn-glass-strong: rgba(255, 255, 255, 0.78);

  /* —— Glass 2026 levels (champagne frost — match ref mock) —— */
  --bn-glass-1: rgba(255, 255, 255, 0.42);
  --bn-glass-2: rgba(255, 255, 255, 0.58);
  --bn-glass-3: rgba(255, 255, 255, 0.78);
  --bn-glass-border: rgba(255, 255, 255, 0.72);
  --bn-glass-border-ink: rgba(23, 56, 47, 0.07);
  --bn-glass-border-gold: rgba(197, 164, 109, 0.42);
  --bn-gold-line: linear-gradient(
    90deg,
    transparent 0%,
    rgba(197, 164, 109, 0.15) 12%,
    rgba(240, 217, 160, 0.85) 50%,
    rgba(197, 164, 109, 0.15) 88%,
    transparent 100%
  );
  --bn-glass-blur-1: 22px;
  --bn-glass-blur-2: 18px;
  --bn-glass-blur-3: 28px;
  --bn-glass-sat: 1.35;
  --bn-glass-shadow-1:
    0 1px 0 rgba(255, 255, 255, 0.88) inset,
    0 10px 28px rgba(15, 36, 29, 0.06);
  --bn-glass-shadow-2:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 16px 40px rgba(15, 36, 29, 0.08);
  --bn-glass-shadow-3:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 28px 64px rgba(15, 36, 29, 0.12);
  /* Soft clinical pearl stage — calm, premium, low eye strain */
  --bn-ambient-bg:
    radial-gradient(ellipse 90% 55% at 12% 0%, rgba(255, 255, 255, 0.9), transparent 55%),
    radial-gradient(ellipse 70% 50% at 92% 8%, rgba(232, 239, 234, 0.55), transparent 52%),
    linear-gradient(180deg, #faf9f7 0%, #f5f4f0 46%, #f0efea 100%);

  /* —— Semantic color —— */
  --bn-color-primary: var(--bn-green);
  --bn-color-primary-hover: var(--bn-green-deep);
  --bn-color-primary-active: #0e221d;
  /* Legacy aliases used by older CSS (never purple) */
  --primary: var(--bn-color-primary);
  --bn-primary: var(--bn-color-primary);
  --primary-dark: var(--bn-color-primary-hover);
  --primary-light: var(--bn-green-soft);
  --primary-glow: rgba(23, 56, 47, 0.18);
  --bn-color-secondary: var(--bn-gold);
  --bn-color-secondary-hover: #b08f58;
  --bn-color-bg: var(--bn-cream);
  --bn-color-bg-subtle: var(--bn-cream-2);
  --bn-color-surface: var(--bn-surface);
  --bn-color-surface-elevated: var(--bn-white);
  --bn-color-text: var(--bn-text);
  --bn-color-text-secondary: var(--bn-text-2);
  --bn-color-text-muted: var(--bn-text-3);
  --bn-color-text-on-primary: var(--bn-cream);
  --bn-color-border: var(--bn-border);
  --bn-color-border-strong: rgba(23, 56, 47, 0.16);
  --bn-color-success: var(--bn-success);
  --bn-color-warning: var(--bn-warning);
  --bn-color-danger: var(--bn-danger);
  --bn-color-info: var(--bn-info);
  --bn-color-focus-ring: rgba(23, 56, 47, 0.28);
  --bn-focus-ring: 0 0 0 3px rgba(23, 56, 47, 0.16);

  /* —— Shadows —— */
  --bn-shadow-xs: 0 1px 2px rgba(23, 56, 47, 0.04);
  --bn-shadow-sm: 0 1px 2px rgba(23, 56, 47, 0.04), 0 4px 12px rgba(23, 56, 47, 0.04);
  --bn-shadow: 0 1px 2px rgba(23, 56, 47, 0.04), 0 8px 24px rgba(23, 56, 47, 0.05);
  --bn-shadow-md: 0 2px 8px rgba(23, 56, 47, 0.05), 0 12px 32px rgba(23, 56, 47, 0.06);
  --bn-shadow-lg: 0 8px 32px rgba(23, 56, 47, 0.08);

  /* —— Gradients —— */
  --bn-gradient-brand: linear-gradient(160deg, #17382f 0%, #29483d 100%);
  --bn-gradient-gold: linear-gradient(135deg, #c5a46d, #e4d4b2);
  --bn-gradient-champagne: linear-gradient(120deg, #f7e7c0 0%, #c9a45e 55%, #f0d9a0 100%);
  --bn-gradient-lux-dark: linear-gradient(155deg, #0b1612 0%, #132820 42%, #1a2f28 72%, #0e1a16 100%);

  /* —— Motion (quiet, fast) —— */
  --bn-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --bn-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --bn-wave: var(--bn-ease);
  --bn-duration-fast: 180ms;
  --bn-duration: 240ms;
  --bn-duration-slow: 360ms;

  /* —— Typography (larger + airier for low eye strain) —— */
  --bn-font-display: 'Peyda', 'Vazirmatn', sans-serif;
  --bn-font-body: 'Peyda', 'Vazirmatn', sans-serif;
  --bn-font-weight-regular: 400;
  --bn-font-weight-medium: 500;
  --bn-font-weight-semibold: 600;
  --bn-font-weight-bold: 700;
  --bn-text-display-size: clamp(1.75rem, 4.2vw, 2.25rem);
  --bn-text-display-lh: 1.28;
  --bn-text-h1-size: 1.6875rem;
  --bn-text-h1-lh: 1.3;
  --bn-text-h2-size: 1.375rem;
  --bn-text-h2-lh: 1.38;
  --bn-text-h3-size: 1.1875rem;
  --bn-text-h3-lh: 1.42;
  --bn-text-h4-size: 1.125rem;
  --bn-text-h4-lh: 1.45;
  --bn-text-body-lg-size: 1.125rem;
  --bn-text-body-size: 1.0625rem;
  --bn-text-body-lh: 1.78;
  --bn-text-body-sm-size: 0.9375rem;
  --bn-text-caption-size: 0.875rem;
  --bn-text-label-size: 0.9375rem;
  --bn-text-button-size: 1.0625rem;

  /* —— Spacing scale —— */
  --bn-space-1: 4px;
  --bn-space-2: 8px;
  --bn-space-3: 12px;
  --bn-space-4: 16px;
  --bn-space-5: 20px;
  --bn-space-6: 24px;
  --bn-space-7: 32px;
  --bn-space-8: 40px;
  --bn-space-9: 48px;
  --bn-space-10: 64px;
  --bn-gutter: var(--bn-space-4);
  --bn-section-gap: var(--bn-space-6);

  /* —— Radius —— */
  --bn-radius-sm: 12px;
  --bn-radius-md: 16px;
  --bn-radius: 20px;
  --bn-radius-lg: 24px;
  --bn-radius-xl: 28px;
  --bn-radius-pill: 999px;

  /* —— Layout —— */
  --bn-header-h: 60px;
  --bn-dock-h: 74px;
  --bn-container: 720px;
  --bn-container-wide: 960px;
  --bn-z-header: 200;
  --bn-z-dock: 300;
  --bn-z-dropdown: 400;
  --bn-z-modal: 500;
  --bn-z-overlay: 550;
  --bn-z-toast: 600;
  --bn-z-story: 700;

  /* —— Breakpoints (reference for JS/media) —— */
  --bn-bp-sm: 480px;
  --bn-bp-md: 768px;
  --bn-bp-lg: 1024px;
  --bn-bp-xl: 1280px;
}

[data-theme='dark'] {
  --bn-cream: #101a17;
  --bn-cream-2: #0d1614;
  --bn-ivory: #101a17;
  --bn-white: #16241f;
  --bn-green: #c9d8d1;
  --bn-green-deep: #0c1412;
  --bn-green-mid: #3a5f52;
  --bn-green-light: #8fb3a4;
  --bn-green-soft: rgba(231, 239, 234, 0.1);
  --bn-gold: #c5a46d;
  --bn-gold-light: #d4c09a;
  --bn-gold-soft: rgba(197, 164, 109, 0.18);
  --bn-text: #f4f2ec;
  --bn-text-2: #b7c4be;
  --bn-text-3: #8a9a93;
  --bn-border: rgba(244, 242, 236, 0.1);
  --bn-border-soft: rgba(244, 242, 236, 0.06);
  --bn-surface: #16241f;
  --bn-surface-2: #101a17;
  --bn-mist: rgba(231, 239, 234, 0.08);
  --bn-glass: rgba(16, 26, 23, 0.58);
  --bn-glass-strong: rgba(16, 26, 23, 0.82);
  --bn-glass-1: rgba(16, 26, 23, 0.52);
  --bn-glass-2: rgba(18, 30, 26, 0.64);
  --bn-glass-3: rgba(16, 26, 23, 0.82);
  --bn-glass-border: rgba(255, 255, 255, 0.1);
  --bn-glass-border-ink: rgba(244, 242, 236, 0.08);
  --bn-glass-shadow-1:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 10px 28px rgba(0, 0, 0, 0.28);
  --bn-glass-shadow-2:
    0 1px 0 rgba(255, 255, 255, 0.07) inset,
    0 16px 40px rgba(0, 0, 0, 0.32);
  --bn-glass-shadow-3:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 28px 64px rgba(0, 0, 0, 0.42);
  --bn-ambient-bg:
    radial-gradient(820px 420px at 90% -8%, rgba(197, 164, 109, 0.12), transparent 55%),
    radial-gradient(640px 480px at 0% 100%, rgba(46, 90, 74, 0.18), transparent 58%),
    linear-gradient(180deg, #101a17 0%, #0c1412 100%);
  --bn-color-primary: #c9d8d1;
  --bn-color-primary-hover: #e2ebe6;
  --bn-color-primary-active: #a8c0b6;
  --primary: var(--bn-color-primary);
  --bn-primary: var(--bn-color-primary);
  --primary-dark: var(--bn-color-primary-hover);
  --primary-light: var(--bn-green-soft);
  --primary-glow: rgba(201, 216, 209, 0.2);
  --bn-color-text-on-primary: #101a17;
  --bn-color-focus-ring: rgba(201, 216, 209, 0.35);
  --bn-focus-ring: 0 0 0 3px rgba(201, 216, 209, 0.22);
  --bn-gradient-brand: linear-gradient(160deg, #1a2e28 0%, #243d35 100%);
}

/* —— Base reset —— */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background-color: #f7f6f3;
}
html[data-theme='dark'] {
  background-color: #101a17;
}
body {
  margin: 0;
  font-family: var(--bn-font-body);
  font-size: var(--bn-text-body-size);
  font-weight: var(--bn-font-weight-regular);
  line-height: var(--bn-text-body-lh);
  color: var(--bn-color-text);
  background: transparent;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
img, video { max-width: 100%; display: block; }
.bn-ui-icon { width: 22px; height: 22px; flex-shrink: 0; }

/* —— Type utilities —— */
.bn-text-display {
  font-family: var(--bn-font-display);
  font-size: var(--bn-text-display-size);
  font-weight: var(--bn-font-weight-bold);
  line-height: var(--bn-text-display-lh);
  letter-spacing: -0.02em;
}
.bn-text-h1 { font-size: var(--bn-text-h1-size); font-weight: var(--bn-font-weight-bold); line-height: var(--bn-text-h1-lh); }
.bn-text-h2 { font-size: var(--bn-text-h2-size); font-weight: var(--bn-font-weight-bold); line-height: var(--bn-text-h2-lh); }
.bn-text-h3 { font-size: var(--bn-text-h3-size); font-weight: var(--bn-font-weight-semibold); line-height: var(--bn-text-h3-lh); }
.bn-text-h4 { font-size: var(--bn-text-h4-size); font-weight: var(--bn-font-weight-semibold); line-height: var(--bn-text-h4-lh); }
.bn-text-body-lg { font-size: var(--bn-text-body-lg-size); line-height: var(--bn-text-body-lh); }
.bn-text-body { font-size: var(--bn-text-body-size); line-height: var(--bn-text-body-lh); }
.bn-text-body-sm { font-size: var(--bn-text-body-sm-size); line-height: 1.55; color: var(--bn-color-text-secondary); }
.bn-text-caption { font-size: var(--bn-text-caption-size); line-height: 1.45; color: var(--bn-color-text-muted); }
.bn-text-label {
  font-size: var(--bn-text-label-size);
  font-weight: var(--bn-font-weight-semibold);
  line-height: 1.4;
  color: var(--bn-color-text-secondary);
}
.bn-container {
  width: 100%;
  max-width: var(--bn-container);
  margin-inline: auto;
  padding-inline: var(--bn-gutter);
}
.bn-container--wide { max-width: var(--bn-container-wide); }
.bn-stack { display: flex; flex-direction: column; gap: var(--bn-space-4); }
.bn-stack--sm { gap: var(--bn-space-2); }
.bn-stack--lg { gap: var(--bn-space-6); }