/**
 * TeleLive — Apple iOS / iPadOS 27 design tokens
 * Source: Apple Design Resources Figma kit (iOS & iPadOS 27)
 * Liquid Glass + system colors / labels / materials / typography
 * https://www.figma.com/community/file/1651309003795292092/ios-and-ipados-27
 *
 * Token values align with Apple HIG system colors (sRGB approximations)
 * and Liquid Glass material specs for web. Does not alter layout logic.
 */

:root,
[data-theme="dark"],
[data-theme="auto"] {
  /* System accents */
  --ios-red: #ff4245;
  --ios-orange: #ff9230;
  --ios-yellow: #ffd600;
  --ios-green: #30d158;
  --ios-mint: #00dac3;
  --ios-teal: #00d2e0;
  --ios-cyan: #3cd3fe;
  --ios-blue: #0091ff;
  --ios-indigo: #6d7cff;
  --ios-purple: #db34f2;
  --ios-pink: #ff375f;
  --ios-brown: #b78a66;

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

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

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

  /* Grays / separators */
  --ios-gray: #8e8e93;
  --ios-gray-2: #636366;
  --ios-gray-3: #48484a;
  --ios-gray-4: #3a3a3c;
  --ios-gray-5: #2c2c2e;
  --ios-gray-6: #1c1c1e;
  --ios-separator: #38383a;
  --ios-separator-transparent: rgba(255, 255, 255, 0.17);

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

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

  /* Radii (concentric-friendly) */
  --ios-radius-xs: 8px;
  --ios-radius-sm: 10px;
  --ios-radius-md: 12px;
  --ios-radius-lg: 16px;
  --ios-radius-xl: 20px;
  --ios-radius-xxl: 24px;
  --ios-radius-sheet: 34px;
  --ios-radius-pill: 1000px;

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

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

  /* Typography stacks */
  --ios-font-en: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --ios-font-fa: "Vazirmatn", -apple-system, BlinkMacSystemFont, Tahoma, sans-serif;
}

[data-theme="light"] {
  --ios-red: #ff383c;
  --ios-orange: #ff8d28;
  --ios-yellow: #ffcc00;
  --ios-green: #34c759;
  --ios-mint: #00c8b3;
  --ios-teal: #00c3d0;
  --ios-cyan: #00c0e8;
  --ios-blue: #0088ff;
  --ios-indigo: #6155f5;
  --ios-purple: #cb30e0;
  --ios-pink: #ff2d55;
  --ios-brown: #ac7f5e;

  --ios-label-primary: #000000;
  --ios-label-secondary: rgba(60, 60, 67, 0.6);
  --ios-label-tertiary: rgba(60, 60, 67, 0.3);
  --ios-label-quaternary: rgba(60, 60, 67, 0.18);

  --ios-bg-primary: #ffffff;
  --ios-bg-secondary: #f2f2f7;
  --ios-bg-tertiary: #ffffff;
  --ios-bg-elevated-primary: #ffffff;
  --ios-bg-elevated-secondary: #f2f2f7;
  --ios-bg-elevated-tertiary: #ffffff;

  --ios-fill-primary: rgba(120, 120, 120, 0.2);
  --ios-fill-secondary: rgba(120, 120, 128, 0.16);
  --ios-fill-tertiary: rgba(118, 118, 128, 0.12);
  --ios-fill-quaternary: rgba(116, 116, 128, 0.08);

  --ios-gray: #8e8e93;
  --ios-gray-2: #aeaeb2;
  --ios-gray-3: #c7c7cc;
  --ios-gray-4: #d1d1d6;
  --ios-gray-5: #e5e5ea;
  --ios-gray-6: #f2f2f7;
  --ios-separator: #c6c6c8;
  --ios-separator-transparent: rgba(0, 0, 0, 0.12);

  --ios-glass-bg-large: rgba(250, 250, 250, 0.7);
  --ios-glass-bg-medium: rgba(245, 245, 245, 0.6);
  --ios-glass-bg-small: rgba(247, 247, 247, 0.92);
  --ios-glass-tint: rgba(255, 255, 255, 0.35);
  --ios-glass-border: rgba(0, 0, 0, 0.08);
  --ios-glass-border-highlight: rgba(255, 255, 255, 0.85);
  --ios-glass-clear-bg: rgba(255, 255, 255, 0.07);

  --ios-material-chrome: rgba(255, 255, 255, 0.75);
  --ios-material-regular: rgba(255, 255, 255, 0.6);
  --ios-material-thin: rgba(255, 255, 255, 0.4);
}

@media (prefers-color-scheme: light) {
  [data-theme="auto"] {
    --ios-red: #ff383c;
    --ios-orange: #ff8d28;
    --ios-yellow: #ffcc00;
    --ios-green: #34c759;
    --ios-mint: #00c8b3;
    --ios-teal: #00c3d0;
    --ios-cyan: #00c0e8;
    --ios-blue: #0088ff;
    --ios-indigo: #6155f5;
    --ios-purple: #cb30e0;
    --ios-pink: #ff2d55;
    --ios-brown: #ac7f5e;

    --ios-label-primary: #000000;
    --ios-label-secondary: rgba(60, 60, 67, 0.6);
    --ios-label-tertiary: rgba(60, 60, 67, 0.3);
    --ios-label-quaternary: rgba(60, 60, 67, 0.18);

    --ios-bg-primary: #ffffff;
    --ios-bg-secondary: #f2f2f7;
    --ios-bg-tertiary: #ffffff;
    --ios-bg-elevated-primary: #ffffff;
    --ios-bg-elevated-secondary: #f2f2f7;
    --ios-bg-elevated-tertiary: #ffffff;

    --ios-fill-primary: rgba(120, 120, 120, 0.2);
    --ios-fill-secondary: rgba(120, 120, 128, 0.16);
    --ios-fill-tertiary: rgba(118, 118, 128, 0.12);
    --ios-fill-quaternary: rgba(116, 116, 128, 0.08);

    --ios-gray: #8e8e93;
    --ios-gray-2: #aeaeb2;
    --ios-gray-3: #c7c7cc;
    --ios-gray-4: #d1d1d6;
    --ios-gray-5: #e5e5ea;
    --ios-gray-6: #f2f2f7;
    --ios-separator: #c6c6c8;
    --ios-separator-transparent: rgba(0, 0, 0, 0.12);

    --ios-glass-bg-large: rgba(250, 250, 250, 0.7);
    --ios-glass-bg-medium: rgba(245, 245, 245, 0.6);
    --ios-glass-bg-small: rgba(247, 247, 247, 0.92);
    --ios-glass-tint: rgba(255, 255, 255, 0.35);
    --ios-glass-border: rgba(0, 0, 0, 0.08);
    --ios-glass-border-highlight: rgba(255, 255, 255, 0.85);
    --ios-glass-clear-bg: rgba(255, 255, 255, 0.07);

    --ios-material-chrome: rgba(255, 255, 255, 0.75);
    --ios-material-regular: rgba(255, 255, 255, 0.6);
    --ios-material-thin: rgba(255, 255, 255, 0.4);
  }
}

@media (prefers-contrast: more) {
  :root,
  [data-theme="dark"] {
    --ios-label-secondary: rgba(235, 235, 245, 0.85);
    --ios-blue: #5cb8ff;
    --ios-separator-transparent: rgba(255, 255, 255, 0.35);
  }
  [data-theme="light"] {
    --ios-label-secondary: rgba(60, 60, 67, 0.8);
    --ios-blue: #1e6ef4;
    --ios-separator-transparent: rgba(0, 0, 0, 0.28);
  }
}