/**
 * SafeVault Design Tokens
 * Синхронизировано с iOS DesignTokens.swift
 *
 * Использование: var(--space-md), var(--radius-lg), etc.
 */

:root {
  /* ============================================
   * SPACING (4pt grid, синхронизировано с iOS)
   * iOS: DesignTokens.Spacing
   * ============================================ */
  --space-xxxs: 2px;   /* iOS: xxxs */
  --space-xxs: 4px;    /* iOS: xxs */
  --space-xs: 8px;     /* iOS: xs */
  --space-sm: 12px;    /* iOS: sm */
  --space-md: 16px;    /* iOS: md */
  --space-lg: 20px;    /* iOS: lg */
  --space-xl: 24px;    /* iOS: xl */
  --space-xxl: 32px;   /* iOS: xxl */
  --space-xxxl: 40px;  /* iOS: xxxl */

  /* ============================================
   * CORNER RADIUS (синхронизировано с iOS)
   * iOS: DesignTokens.CornerRadius
   * ============================================ */
  --radius-sm: 8px;    /* iOS: small */
  --radius-md: 12px;   /* iOS: medium */
  --radius-lg: 16px;   /* iOS: large */
  --radius-xl: 20px;   /* iOS: xlarge */
  --radius-pill: 9999px; /* iOS: pill */

  /* ============================================
   * LAYOUT
   * ============================================ */
  --container-max-width: 600px;  /* 600px = email card width for visual continuity */
  --header-height: 56px;
  --card-padding: var(--space-xl);

  /* ============================================
   * BUTTON SIZES (синхронизировано с iOS)
   * iOS: DesignTokens.ButtonHeight
   * ============================================ */
  --button-height-sm: 36px;  /* iOS: small */
  --button-height-md: 44px;  /* iOS: medium - минимальный tap target */
  --button-height-lg: 50px;  /* iOS: large */

  /* ============================================
   * TYPOGRAPHY (синхронизировано с iOS)
   * iOS: DesignTokens.Typography
   * ============================================ */

  /* Font Family - Apple system fonts first */
  --font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display',
                 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue',
                 Arial, sans-serif;

  /* Font Sizes */
  --text-xs: 11px;     /* iOS: footnote */
  --text-sm: 12px;     /* iOS: caption */
  --text-base: 16px;   /* iOS: body */
  --text-lg: 18px;     /* iOS: headline */
  --text-xl: 20px;     /* iOS: title3 */
  --text-2xl: 24px;    /* iOS: title2 */
  --text-3xl: 28px;    /* iOS: title1 */
  --text-4xl: 36px;    /* iOS: largeTitle */

  /* Font Weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Line Heights */
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.8;

  /* ============================================
   * COLORS - LIGHT MODE (синхронизировано с iOS)
   * iOS: ColorTheme.swift
   * ============================================ */

  /* Primary - systemTeal */
  --color-primary: #00BCD4;
  --color-primary-hover: #00ACC1;
  --color-primary-light: rgba(0, 188, 212, 0.15);  /* Improved visibility */

  /* Semantic Colors */
  --color-success: #34C759;   /* iOS: systemGreen */
  --color-warning: #FF9500;   /* iOS: systemOrange */
  --color-error: #FF3B30;     /* iOS: systemRed */
  --color-info: #007AFF;      /* iOS: systemBlue */

  /* Backgrounds */
  --color-bg: #F2F2F7;                    /* iOS: systemBackground */
  --color-bg-elevated: #FFFFFF;           /* iOS: secondarySystemBackground */
  --color-bg-card: #FFFFFF;               /* Card background */

  /* Text */
  --color-text: #1C1C1E;                  /* iOS: label */
  --color-text-secondary: #6C6C70;        /* iOS: secondaryLabel - improved contrast 5.5:1 */
  --color-text-tertiary: #8E8E93;         /* iOS: tertiaryLabel - improved contrast 4.5:1 */

  /* Borders & Dividers */
  --color-border: rgba(60, 60, 67, 0.12); /* iOS: separator */
  --color-divider: rgba(60, 60, 67, 0.08);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* ============================================
   * GLASSMORPHISM (Liquid Glass effect)
   * Inspired by Apple iOS 26 design language
   * ============================================ */
  --glass-blur: 20px;
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.5);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);

  /* ============================================
   * TRANSITIONS
   * ============================================ */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 350ms ease;

  /* ============================================
   * BRAND — Saffe (matches email template)
   * Source: emailTemplates.ts
   * ============================================ */
  --brand-gradient: linear-gradient(135deg, #00D2E0 0%, #00BCD4 50%, #00A5B0 100%);
  --brand-gradient-simple: linear-gradient(135deg, #00D2E0 0%, #00BCD4 100%);
  --brand-accent: #00838F;

  /* Trust signal colors (from email info-card) */
  --color-trust-bg: #f0fdff;
  --color-trust-border: #b2ebf2;
  --color-trust-text: #00838F;

  /* Skeleton loading */
  --skeleton-base: #E8E8ED;
  --skeleton-shine: #F5F5F7;

  /* Animations */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-reveal: 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================
 * DARK MODE (auto-detection via prefers-color-scheme)
 * ============================================ */
@media (prefers-color-scheme: dark) {
  :root {
    /* Primary - slightly adjusted for dark backgrounds */
    --color-primary: #5AC8D8;
    --color-primary-hover: #7DD4E1;
    --color-primary-light: rgba(90, 200, 216, 0.15);

    /* Semantic Colors - iOS dark mode variants */
    --color-success: #30D158;
    --color-warning: #FF9F0A;
    --color-error: #FF453A;
    --color-info: #0A84FF;

    /* Backgrounds */
    --color-bg: #121212;                      /* Material Dark standard, matches email */
    --color-bg-elevated: #1C1C1E;             /* iOS: secondarySystemBackground (dark) */
    --color-bg-card: #1C1C1E;

    /* Text */
    --color-text: #FFFFFF;                    /* iOS: label (dark) */
    --color-text-secondary: #A1A1A6;          /* iOS: secondaryLabel (dark) - improved contrast 5.2:1 */
    --color-text-tertiary: #8E8E93;           /* iOS: tertiaryLabel (dark) - improved contrast 4.5:1 */

    /* Borders & Dividers */
    --color-border: rgba(84, 84, 88, 0.36);   /* iOS: separator (dark) */
    --color-divider: rgba(84, 84, 88, 0.24);

    /* Shadows - more subtle in dark mode */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);

    /* Glassmorphism - dark mode */
    --glass-bg: rgba(28, 28, 30, 0.72);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);

    /* Brand - dark variants */
    --color-trust-bg: #1a2e2e;
    --color-trust-border: #2a4040;
    --color-trust-text: #4dd0e1;
    --brand-accent: #4dd0e1;
    --skeleton-base: #2C2C2E;
    --skeleton-shine: #3A3A3C;
  }
}

/* Manual theme override via data attribute */
[data-theme="dark"] {
  --color-primary: #5AC8D8;
  --color-primary-hover: #7DD4E1;
  --color-primary-light: rgba(90, 200, 216, 0.15);

  --color-success: #30D158;
  --color-warning: #FF9F0A;
  --color-error: #FF453A;
  --color-info: #0A84FF;

  --color-bg: #121212;
  --color-bg-elevated: #1C1C1E;
  --color-bg-card: #1C1C1E;

  --color-text: #FFFFFF;
  --color-text-secondary: #A1A1A6;
  --color-text-tertiary: #8E8E93;

  --color-border: rgba(84, 84, 88, 0.36);
  --color-divider: rgba(84, 84, 88, 0.24);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);

  --glass-bg: rgba(28, 28, 30, 0.72);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);

  /* Brand - dark variants */
  --color-trust-bg: #1a2e2e;
  --color-trust-border: #2a4040;
  --color-trust-text: #4dd0e1;
  --brand-accent: #4dd0e1;
  --skeleton-base: #2C2C2E;
  --skeleton-shine: #3A3A3C;
}

[data-theme="light"] {
  --color-primary: #00BCD4;
  --color-primary-hover: #00ACC1;
  --color-primary-light: rgba(0, 188, 212, 0.15);

  --color-success: #34C759;
  --color-warning: #FF9500;
  --color-error: #FF3B30;
  --color-info: #007AFF;

  --color-bg: #F2F2F7;
  --color-bg-elevated: #FFFFFF;
  --color-bg-card: #FFFFFF;

  --color-text: #1C1C1E;
  --color-text-secondary: #6C6C70;
  --color-text-tertiary: #8E8E93;

  --color-border: rgba(60, 60, 67, 0.12);
  --color-divider: rgba(60, 60, 67, 0.08);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.5);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

/* Responsive adjustments */
@media (max-width: 640px) {
  :root {
    --card-padding: var(--space-lg);
    /* Slightly smaller headings on mobile */
    --text-4xl: 32px;
    --text-3xl: 24px;
  }
}

/* ============================================
 * SHARED ANIMATIONS
 * ============================================ */

@keyframes sv-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes sv-reveal {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes sv-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

@keyframes sv-spin {
  to { transform: rotate(360deg); }
}