/*
Design System Theme Tokens

Goals:
- Single source of truth for colors, spacing, radii.
- Light/Dark themes via `html[data-theme]` with safe defaults.
- Backward-compatible variable mappings for existing CSS.

Usage:
- Components/pages should use semantic tokens like `var(--color-bg)`, `var(--color-surface)`,
  `var(--color-text)`, `var(--color-muted)`, `var(--color-accent)`.
- Legacy vars (e.g., `--bg-dark`, `--text-primary`) are mapped here to the tokens so old CSS keeps working.
- To switch themes at runtime: set `document.documentElement.dataset.theme = 'dark' | 'light'`.
*/

/* Defaults: match current site (dark) */
:root {
  /* Semantic tokens */
  --color-bg: #000000;
  --color-surface: #1d1d1f;      /* cards/containers */
  --color-surface-2: #2d2d2f;    /* elevated surfaces */
  --color-border: rgba(255, 255, 255, 0.1);
  --color-text: #f5f5f7;
  --color-muted: #86868b;
  --color-accent: #ff2d55;       /* primary accent */
  --color-accent-strong: #d70040;
  --color-accent-weak: #ff375f;

  /* Shadows/radii/spacing */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px; /* super-rounded corners for prominent cards */
  --radius-full: 9999px;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;

  /* Backdrop */
  --layer-blur-bg: rgba(26, 26, 26, 0.8);
  --layer-blur-bg-strong: rgba(26, 26, 26, 0.95);
  --backdrop-blur: 20px;

  /* Surface interaction/overlay tokens */
  --surface-subtle: rgba(255, 255, 255, 0.05);
  --surface-hover: rgba(255, 255, 255, 0.10);
  --surface-active: rgba(255, 255, 255, 0.15);
  --surface-overlay: rgba(26, 26, 26, 0.50);
  --surface-overlay-strong: rgba(26, 26, 26, 0.80);

  /* Hero overlays */
  --overlay-hero-top: rgba(26, 26, 26, 0.92);
  --overlay-hero-bottom: rgba(26, 26, 26, 0.98);

  /* Scrim (dim background overlay) */
  --scrim: rgba(0, 0, 0, 0.5);

  /* Brand accent tints (for backgrounds with alpha) */
  --accent-tint-10: rgba(41, 151, 255, 0.10);
  --accent-tint-20: rgba(41, 151, 255, 0.20);

  /* Primary brand (blue) for optional highlights */
  --brand-blue: #2997ff;
  --brand-blue-strong: #0077ed;
  --brand-blue-weak: #42a5ff;

  /* Status palette */
  --status-danger: #ff3b30;
  --status-danger-bg: rgba(255, 59, 48, 0.1);
  --status-success: #34c759;
  --status-success-bg: rgba(52, 199, 89, 0.1);
  --status-warning: #ff9500;
  --status-warning-bg: rgba(255, 149, 0, 0.1);
  --status-info: var(--brand-blue);
  --status-info-bg: var(--accent-tint-10);

  /* Admin UX palette (derived) */
  --admin-bg: #f8fafc;
  --admin-surface: #ffffff;
  --admin-border: #e2e8f0;
  --admin-text: #111827;
  --admin-muted: #475569;
  --admin-primary: #0ea5e9;
  --admin-primary-strong: #0369a1;
}

/* Light theme override - Apple-inspired design */
html[data-theme="light"] {
  /* Pure white background with subtle warm tint (Apple style) */
  --color-bg: #ffffff;
  --color-surface: #f9f9f9;       /* cards/containers - softer gray */
  --color-surface-2: #f0f0f0;     /* elevated surfaces */
  --color-border: rgba(0, 0, 0, 0.08);  /* subtle borders */
  --color-text: #1d1d1f;          /* Apple's standard text color */
  --color-muted: #8e8e93;         /* Apple's muted text color - slightly lighter */
  /* Brand accent - warmer tone for light mode */
  --color-accent: #ff375f;
  --color-accent-strong: #e8244d;
  --color-accent-weak: #ff577e;

  /* Shadows - subtle and layered in light mode */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.05);

  /* Backdrop blur for glass effect - warmer tint */
  --layer-blur-bg: rgba(255, 255, 255, 0.85);
  --layer-blur-bg-strong: rgba(255, 255, 255, 0.95);
  --backdrop-blur: 20px;

  /* Surface interaction/overlay tokens - warm and soft */
  --surface-subtle: rgba(0, 0, 0, 0.02);
  --surface-hover: rgba(0, 0, 0, 0.04);
  --surface-active: rgba(0, 0, 0, 0.06);
  --surface-overlay: rgba(255, 255, 255, 0.90);
  --surface-overlay-strong: rgba(255, 255, 255, 0.97);

  /* Hero overlays - very subtle */
  --overlay-hero-top: rgba(255, 255, 255, 0.90);
  --overlay-hero-bottom: rgba(255, 255, 255, 0.95);

  /* Scrim - balanced for light mode */
  --scrim: rgba(0, 0, 0, 0.35);

  /* Brand accent tints - warm and vibrant */
  --accent-tint-10: rgba(255, 55, 95, 0.06);
  --accent-tint-20: rgba(255, 55, 95, 0.12);

  /* Brand blue for highlights - Apple's iOS blue */
  --brand-blue: #007aff;
  --brand-blue-strong: #0051d5;
  --brand-blue-weak: #3a95ff;

  /* Admin UX palette adjusted for light */
  --admin-bg: #f9f9f9;
  --admin-surface: #ffffff;
  --admin-border: #e5e5e5;        /* softer border */
  --admin-text: #1d1d1f;
  --admin-muted: #8e8e93;
  --admin-primary: #007aff;       /* Apple's standard blue */
  --admin-primary-strong: #0051d5;

  /* Pink tints for light mode - warm and subtle */
  --pink-tint-05: rgba(255, 55, 95, 0.02);
  --pink-tint-08: rgba(255, 55, 95, 0.04);
  --pink-tint-10: rgba(255, 55, 95, 0.06);
  --pink-tint-15: rgba(255, 55, 95, 0.09);
  --pink-tint-20: rgba(255, 55, 95, 0.12);
}

/* Optional: follow system when not explicitly set */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --color-bg: #ffffff;
    --color-surface: #f9f9f9;
    --color-surface-2: #f0f0f0;
    --color-border: rgba(0, 0, 0, 0.08);
    --color-text: #1d1d1f;
    --color-muted: #8e8e93;
    --color-accent: #ff375f;
    --color-accent-strong: #e8244d;
    --color-accent-weak: #ff577e;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.05);

    --layer-blur-bg: rgba(255, 255, 255, 0.85);
    --layer-blur-bg-strong: rgba(255, 255, 255, 0.95);
  }
}

/* Backward compatibility mappings for existing CSS variables */
:root, html[data-theme="light"] {
  --bg-dark: var(--color-bg);
  --bg-dark-secondary: var(--color-surface);
  --bg-dark-tertiary: var(--color-surface-2);
  --text-primary: var(--color-text);
  --text-secondary: var(--color-muted);
  --text-tertiary: var(--color-muted);
  --text-light: var(--color-text);
  --text-gray: var(--color-muted);
  --border-light: var(--color-border);
  --border-medium: var(--color-border);

  --pink-primary: var(--color-accent);
  --pink-dark: var(--color-accent-strong);
  --pink-light: var(--color-accent-weak);

  --blur-background: var(--layer-blur-bg);
  --blur-amount: var(--backdrop-blur);
  /* legacy alias */
  --dark-secondary: var(--bg-dark-secondary);
}

/* Admin compatibility variables */
:root {
  --admin-bg-alt: var(--admin-bg);
  --admin-surface-strong: var(--admin-surface);
  /* Pink accent tints for decorative glows (dark mode) */
  --pink-tint-05: rgba(255, 105, 180, 0.05);
  --pink-tint-08: rgba(255, 105, 180, 0.08);
  --pink-tint-10: rgba(255, 105, 180, 0.10);
  --pink-tint-15: rgba(255, 105, 180, 0.15);
  --pink-tint-20: rgba(255, 105, 180, 0.20);
}

/* Light mode enhancements - Apple-inspired refinements */
html[data-theme="light"] {
  /* Enhanced contrast for better readability */
  --text-primary: var(--color-text);
  --text-secondary: var(--color-muted);

  /* Card backgrounds with better depth perception */
  --card-bg: #ffffff;
  --card-border: rgba(0, 0, 0, 0.06);
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
  --card-shadow-hover: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.04);

  /* Improved glass effect for navigation */
  --nav-bg: rgba(255, 255, 255, 0.85);
  --nav-border: rgba(0, 0, 0, 0.06);

  /* Button enhancements for light mode */
  --btn-primary-bg: var(--color-accent);
  --btn-primary-hover: var(--color-accent-strong);
  --btn-primary-text: #ffffff;

  /* Interactive states */
  --focus-ring: rgba(255, 55, 95, 0.4);
}
/* Optional language-specific theme overrides (example placeholders)
   Usage: uncomment and adjust to tune tokens for a given language
   html[lang="ja"][data-theme="light"] { --color-accent: #0077ed; }
   html[lang="ar"][data-theme="dark"] { --color-accent: #60a5fa; }
*/