/* ═══════════════════════════════════════════════════════════════════════════
   ORZATTY™ DESIGN TOKENS v3.0 [M3 + iOS FUSION]
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* ═══════════════════════════════════════════════════════════════════════
       COLOR SYSTEM (iOS Human Interface + M3 Tonal)
       ═══════════════════════════════════════════════════════════════════════ */

    /* --- SEMANTIC COLORS --- */
    --sys-color-background: #000000;
    --sys-color-surface: #1C1C1E;
    --sys-color-surface-elevated: #2C2C2E;
    --sys-color-surface-variant: #3A3A3C;

    /* Text Colors (iOS Label Hierarchy) */
    --sys-color-primary: #FFFFFF;
    --sys-color-secondary: #8E8E93;
    --sys-color-tertiary: #636366;
    --sys-color-quaternary: #48484A;

    /* On-Colors */
    --sys-color-on-primary: #000000;
    --sys-color-on-surface: #FFFFFF;
    --sys-color-on-surface-variant: #EBEBF5;

    /* Accent (iOS System Blue) */
    --sys-color-accent: #0A84FF;
    --sys-color-accent-hover: #409CFF;
    --sys-color-on-accent: #FFFFFF;

    /* Supporting Colors (iOS Vibrant) */
    --sys-color-success: #30D158;
    --sys-color-warning: #FFD60A;
    --sys-color-error: #FF453A;
    --sys-color-info: #64D2FF;

    /* Separators & Borders */
    --sys-color-separator: rgba(84, 84, 88, 0.65);
    --sys-color-separator-opaque: #38383A;
    --sys-color-border: rgba(255, 255, 255, 0.1);

    /* Fill Colors (iOS Vibrant Content) */
    --sys-fill-primary: rgba(120, 120, 128, 0.36);
    --sys-fill-secondary: rgba(120, 120, 128, 0.32);
    --sys-fill-tertiary: rgba(120, 120, 128, 0.24);
    --sys-fill-quaternary: rgba(120, 120, 128, 0.18);

    /* ═══════════════════════════════════════════════════════════════════════
       TYPOGRAPHY (SF Pro Inspired)
       ═══════════════════════════════════════════════════════════════════════ */

    --sys-font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', 'Segoe UI', Roboto, sans-serif;
    --sys-font-rounded: 'SF Pro Rounded', -apple-system, BlinkMacSystemFont, sans-serif;
    --sys-font-mono: 'SF Mono', 'JetBrains Mono', 'Fira Code', monospace;

    /* Type Scale (iOS Dynamic Type Inspired) */
    --sys-text-large-title: 700 34px/1.2 var(--sys-font-sans);
    --sys-text-title-1: 700 28px/1.2 var(--sys-font-sans);
    --sys-text-title-2: 600 22px/1.25 var(--sys-font-sans);
    --sys-text-title-3: 600 20px/1.25 var(--sys-font-sans);
    --sys-text-headline: 600 17px/1.3 var(--sys-font-sans);
    --sys-text-body: 400 17px/1.47 var(--sys-font-sans);
    --sys-text-callout: 400 16px/1.4 var(--sys-font-sans);
    --sys-text-subheadline: 400 15px/1.35 var(--sys-font-sans);
    --sys-text-footnote: 400 13px/1.38 var(--sys-font-sans);
    --sys-text-caption-1: 400 12px/1.33 var(--sys-font-sans);
    --sys-text-caption-2: 400 11px/1.27 var(--sys-font-sans);
    --sys-text-button: 600 17px/1 var(--sys-font-sans);

    /* Letter Spacing (iOS Tight Tracking) */
    --sys-tracking-tight: -0.02em;
    --sys-tracking-normal: 0em;
    --sys-tracking-wide: 0.02em;

    /* ═══════════════════════════════════════════════════════════════════════
       SHAPES (Continuous Corners / Squircle)
       ═══════════════════════════════════════════════════════════════════════ */

    --sys-radius-xs: 6px;
    --sys-radius-sm: 10px;
    --sys-radius-md: 14px;
    --sys-radius-lg: 20px;
    --sys-radius-xl: 28px;
    --sys-radius-2xl: 38px;
    --sys-radius-full: 9999px;

    /* iOS-style Corner Smoothing (use with mask or SVG for true squircle) */
    /* For CSS, we use larger radii to approximate */

    /* ═══════════════════════════════════════════════════════════════════════
       MATERIALS & VIBRANCY
       ═══════════════════════════════════════════════════════════════════════ */

    /* Blur Materials (iOS Style) */
    --sys-material-ultra-thin: rgba(28, 28, 30, 0.4);
    --sys-material-thin: rgba(28, 28, 30, 0.6);
    --sys-material-regular: rgba(28, 28, 30, 0.8);
    --sys-material-thick: rgba(28, 28, 30, 0.92);
    --sys-material-chrome: rgba(28, 28, 30, 0.96);

    /* Blur Filters */
    --sys-blur-sm: blur(10px);
    --sys-blur-regular: blur(20px) saturate(180%);
    --sys-blur-prominent: blur(40px) saturate(200%);
    --sys-blur-ultra: blur(80px) saturate(220%);

    /* Vibrancy Overlay (for light content on dark blur) */
    --sys-vibrancy-overlay: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 100%);

    /* ═══════════════════════════════════════════════════════════════════════
       ELEVATION & SHADOWS
       ═══════════════════════════════════════════════════════════════════════ */

    /* M3-style Elevation with subtle blue tint */
    --sys-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --sys-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --sys-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
    --sys-shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6);

    /* Glow Effects (Accent) */
    --sys-glow-accent: 0 0 20px rgba(10, 132, 255, 0.4);
    --sys-glow-accent-strong: 0 0 40px rgba(10, 132, 255, 0.6);

    /* ═══════════════════════════════════════════════════════════════════════
       MOTION (Spring Physics)
       ═══════════════════════════════════════════════════════════════════════ */

    /* Easing Curves */
    --sys-ease-standard: cubic-bezier(0.25, 0.1, 0.25, 1);
    --sys-ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
    --sys-ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
    --sys-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --sys-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Duration */
    --sys-duration-instant: 100ms;
    --sys-duration-fast: 200ms;
    --sys-duration-normal: 350ms;
    --sys-duration-slow: 500ms;
    --sys-duration-slower: 700ms;

    /* ═══════════════════════════════════════════════════════════════════════
       Z-INDEX LAYERS
       ═══════════════════════════════════════════════════════════════════════ */

    --sys-z-base: 0;
    --sys-z-elevated: 10;
    --sys-z-sticky: 100;
    --sys-z-navigation: 200;
    --sys-z-overlay: 300;
    --sys-z-modal: 400;
    --sys-z-popover: 500;
    --sys-z-toast: 600;
    --sys-z-tooltip: 700;

    /* ═══════════════════════════════════════════════════════════════════════
       SPACING (8pt Grid)
       ═══════════════════════════════════════════════════════════════════════ */

    --sys-space-0: 0;
    --sys-space-1: 4px;
    --sys-space-2: 8px;
    --sys-space-3: 12px;
    --sys-space-4: 16px;
    --sys-space-5: 20px;
    --sys-space-6: 24px;
    --sys-space-8: 32px;
    --sys-space-10: 40px;
    --sys-space-12: 48px;
    --sys-space-16: 64px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT MODE (Optional - Inverted)
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="light"] {
    --sys-color-background: #F2F2F7;
    --sys-color-surface: #FFFFFF;
    --sys-color-surface-elevated: #FFFFFF;
    --sys-color-surface-variant: #F2F2F7;

    --sys-color-primary: #000000;
    --sys-color-secondary: #3C3C43;
    --sys-color-tertiary: #3C3C4399;
    --sys-color-quaternary: #3C3C434D;

    --sys-color-on-primary: #FFFFFF;
    --sys-color-on-surface: #000000;
    --sys-color-on-surface-variant: #3C3C43;

    --sys-color-accent: #007AFF;
    --sys-color-accent-hover: #0056B3;

    --sys-color-separator: rgba(60, 60, 67, 0.36);
    --sys-color-separator-opaque: #C6C6C8;
    --sys-color-border: rgba(0, 0, 0, 0.1);

    --sys-fill-primary: rgba(120, 120, 128, 0.2);
    --sys-fill-secondary: rgba(120, 120, 128, 0.16);
    --sys-fill-tertiary: rgba(120, 120, 128, 0.12);

    --sys-material-thin: rgba(255, 255, 255, 0.6);
    --sys-material-regular: rgba(255, 255, 255, 0.8);
    --sys-material-thick: rgba(255, 255, 255, 0.95);

    --sys-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --sys-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
    --sys-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.15);
}