/**
 * TeleDNS — Liquid Glass design tokens
 * Aligned with Apple iOS / iPadOS 27 + TeleLive visual language
 */

:root,
[data-theme="dark"] {
  /* Brand / system accents */
  --brand: #0091ff;
  --brand-strong: #0077e6;
  --brand-soft: #5cb8ff;
  --brand-glow: rgba(0, 145, 255, 0.35);

  --ios-red: #ff4245;
  --ios-orange: #ff9230;
  --ios-green: #30d158;
  --ios-cyan: #3cd3fe;
  --ios-indigo: #6d7cff;

  /* Labels */
  --label-primary: #ffffff;
  --label-secondary: rgba(235, 235, 245, 0.7);
  --label-tertiary: rgba(235, 235, 245, 0.3);
  --label-quaternary: rgba(235, 235, 245, 0.16);

  /* Backgrounds */
  --bg-primary: #000000;
  --bg-secondary: #1c1c1e;
  --bg-tertiary: #2c2c2e;
  --bg-elevated: #1c1c1e;

  /* Fills */
  --fill-primary: rgba(120, 120, 128, 0.36);
  --fill-secondary: rgba(120, 120, 128, 0.32);
  --fill-tertiary: rgba(118, 118, 128, 0.24);
  --fill-quaternary: rgba(118, 118, 128, 0.18);

  /* Separators */
  --separator: #38383a;
  --separator-transparent: rgba(255, 255, 255, 0.17);

  /* Liquid Glass materials */
  --glass-bg-large: rgba(0, 0, 0, 0.8);
  --glass-bg-medium: rgba(0, 0, 0, 0.6);
  --glass-bg-small: rgba(0, 0, 0, 0.6);
  --glass-tint: rgba(255, 255, 255, 0.06);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-border-highlight: rgba(255, 255, 255, 0.22);
  --glass-clear-bg: rgba(0, 0, 0, 0.18);
  --glass-blur-sm: 7px;
  --glass-blur-md: 12px;
  --glass-blur-lg: 14px;
  --glass-blur-chrome: 40px;
  --glass-saturate: 180%;

  /* Materials */
  --material-chrome: rgba(0, 0, 0, 0.75);
  --material-regular: rgba(0, 0, 0, 0.6);
  --material-thin: rgba(0, 0, 0, 0.4);

  /* Atmosphere */
  --bg-dot: rgba(255, 255, 255, 0.014);
  --bg-glow-1: rgba(0, 145, 255, 0.07);
  --bg-glow-2: rgba(109, 124, 255, 0.05);
  --bg-glow-3: rgba(0, 0, 0, 0.35);
  --bg-base-end: #000000;

  /* Radii — iOS 27 concentric (large glass = 34px) */
  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-xxl: 34px;
  --radius-sheet: 34px;
  --radius-pill: 1000px;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Shadows */
  --shadow-soft: 0 8px 28px rgba(0, 0, 0, 0.28);
  --shadow-deep: 0 10px 40px rgba(0, 0, 0, 0.45);
  --shadow-inset-top: inset 0 1px 0 var(--glass-border-highlight);

  /* Motion */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 350ms;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-decel: cubic-bezier(0, 0, 0.2, 1);

  /* Typography */
  --font-fa: "Vazirmatn", "SF Pro Text", Tahoma, sans-serif;
  --font-en: "SF Pro Display", "SF Pro Text", "Helvetica Neue", sans-serif;
  --font: var(--font-fa);

  /* Layout */
  --nav-height: 64px;
  --container: 1120px;
  --gutter: clamp(20px, 4vw, 40px);
}

@media (prefers-contrast: more) {
  :root,
  [data-theme="dark"] {
    --label-secondary: rgba(235, 235, 245, 0.85);
    --brand: #5cb8ff;
    --glass-border: rgba(255, 255, 255, 0.28);
    --separator-transparent: rgba(255, 255, 255, 0.35);
  }
}