/* ==========================================================================
   MintYourCard v2 - Design Tokens
   ==========================================================================
   Single source of truth for the v2 design system.
   All custom properties are prefixed with --v2- to avoid conflicts with v1.

   Organized by category:
   1. Colors (OLED Dark Theme)
   2. Typography
   3. Spacing (8pt grid)
   4. Border Radius
   5. Shadows
   6. Motion (easing & duration)
   7. Layout
   8. Z-Index Scale
   ========================================================================== */

:root {

  /* ========================================================================
     1. COLORS - OLED Dark Theme
     ======================================================================== */

  /* -- Backgrounds -------------------------------------------------------- */
  --v2-bg-app:            #000000;
  --v2-bg-surface:        #080808;
  --v2-bg-surface-2:      #0c0c0c;
  --v2-bg-elevated:       #141414;
  --v2-bg-elevated-hover: #1a1a1a;
  --v2-bg-input:          #0a0a0a;
  --v2-bg-modal:          rgba(0, 0, 0, 0.95);

  /* -- Accent (Mint Green) ------------------------------------------------ */
  --v2-accent:            #00FFA3;
  --v2-accent-hover:      #00E593;
  --v2-accent-active:     #00CC83;
  --v2-accent-light:      rgba(0, 255, 163, 0.15);
  --v2-accent-glow:       rgba(0, 255, 163, 0.3);

  /* -- CTA (High-contrast white buttons) ---------------------------------- */
  --v2-cta-bg:            #FFFFFF;
  --v2-cta-text:          #000000;
  --v2-cta-hover:         #f0f0f0;

  /* -- Text --------------------------------------------------------------- */
  --v2-text-primary:      rgba(255, 255, 255, 0.95);
  --v2-text-secondary:    rgba(255, 255, 255, 0.6);
  --v2-text-tertiary:     rgba(255, 255, 255, 0.60);
  --v2-text-inverse:      #000000;

  /* -- Semantic Status ---------------------------------------------------- */
  --v2-success:           #10B981;
  --v2-success-light:     rgba(16, 185, 129, 0.15);
  --v2-warning:           #F59E0B;
  --v2-warning-light:     rgba(245, 158, 11, 0.15);
  --v2-error:             #EF4444;
  --v2-error-light:       rgba(239, 68, 68, 0.15);
  --v2-info:              #3B82F6;
  --v2-info-light:        rgba(59, 130, 246, 0.15);

  /* -- Glass / Frosted ---------------------------------------------------- */
  --v2-glass-bg:          rgba(15, 15, 15, 0.5);
  --v2-glass-border:      rgba(255, 255, 255, 0.06);
  --v2-glass-border-light: rgba(255, 255, 255, 0.1);

  /* -- Blur tokens (desktop = real blur, mobile override = none) ---------- */
  --v2-blur-xs:           blur(4px);
  --v2-blur-sm:           blur(8px);
  --v2-blur-md:           blur(16px);
  --v2-blur-lg:           blur(20px);
  --v2-blur-xl:           blur(24px);
  --v2-blur-nav:          saturate(180%) blur(20px);
  --v2-blur-bar:          saturate(180%) blur(20px);
  --v2-blur-sat-lg:       saturate(180%) blur(24px);

  /* -- Mobile-specific background tokens (used when blur is disabled) ----- */
  --v2-bg-nav:            rgba(255, 255, 255, 0.08);
  --v2-bg-glass-circle:   rgba(255, 255, 255, 0.06);
  --v2-bg-backdrop:       rgba(0, 0, 0, 0.6);
  --v2-bg-menu:           rgba(28, 28, 30, 0.55);
  --v2-bg-notif-header:   linear-gradient(to bottom, rgba(0, 0, 0, 0.82) 60%, rgba(0, 0, 0, 0.55));

  /* -- Borders ------------------------------------------------------------ */
  /* WCAG 1.4.11: --v2-border-default ~3.1:1 on black (inputs, form fields).
     --v2-border-subtle ~2.5:1 (glass card outlines, list dividers). */
  --v2-border-subtle:     rgba(255, 255, 255, 0.28);
  --v2-border-default:    rgba(255, 255, 255, 0.36);

  /* -- Score Colors (card grading scale) ---------------------------------- */
  --v2-score-excellent:   #22c55e;
  --v2-score-good:        #3b82f6;
  --v2-score-average:     #eab308;
  --v2-score-below:       #f97316;
  --v2-score-poor:        #ef4444;

  /* -- Precision Colors (match accuracy) ---------------------------------- */
  --v2-precision-perfect: #00FFA3;
  --v2-precision-excellent: #7DD87D;
  --v2-precision-good:    #F5D547;
  --v2-precision-correct: #FFB347;
  --v2-precision-bad:     #FF6B6B;


  /* ========================================================================
     2. TYPOGRAPHY
     ======================================================================== */

  /* -- Font Families ------------------------------------------------------ */
  --v2-font-display:      'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --v2-font-body:         -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', sans-serif;
  --v2-font-mono:         'SF Mono', Monaco, Consolas, monospace;

  /* -- Font Sizes --------------------------------------------------------- */
  --v2-text-xs:           0.75rem;   /* 12px */
  --v2-text-sm:           0.875rem;  /* 14px */
  --v2-text-base:         1rem;      /* 16px */
  --v2-text-lg:           1.125rem;  /* 18px */
  --v2-text-xl:           1.25rem;   /* 20px */
  --v2-text-2xl:          1.5rem;    /* 24px */
  --v2-text-3xl:          1.875rem;  /* 30px */
  --v2-text-4xl:          2.25rem;   /* 36px */

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

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


  /* ========================================================================
     3. SPACING - 8pt Grid
     ======================================================================== */
  --v2-space-0:           0;
  --v2-space-1:           4px;
  --v2-space-2:           8px;
  --v2-space-3:           12px;
  --v2-space-4:           16px;
  --v2-space-5:           20px;
  --v2-space-6:           24px;
  --v2-space-8:           32px;
  --v2-space-10:          40px;
  --v2-space-12:          48px;
  --v2-space-16:          64px;
  --v2-space-20:          80px;


  /* ========================================================================
     4. BORDER RADIUS
     ======================================================================== */
  --v2-radius-sm:         4px;
  --v2-radius-md:         8px;
  --v2-radius-lg:         12px;
  --v2-radius-xl:         16px;
  --v2-radius-2xl:        24px;
  --v2-radius-full:       9999px;


  /* ========================================================================
     5. SHADOWS
     ======================================================================== */
  --v2-shadow-xs:         0 1px 2px rgba(0, 0, 0, 0.3);
  --v2-shadow-sm:         0 2px 4px rgba(0, 0, 0, 0.3);
  --v2-shadow-md:         0 4px 12px rgba(0, 0, 0, 0.4);
  --v2-shadow-lg:         0 8px 24px rgba(0, 0, 0, 0.5);
  --v2-shadow-xl:         0 16px 48px rgba(0, 0, 0, 0.6);
  --v2-shadow-glow-accent: 0 0 20px var(--v2-accent-glow);


  /* ========================================================================
     6. MOTION - Easing & Duration
     ======================================================================== */

  /* -- Easing Curves ------------------------------------------------------ */
  --v2-ease-spring:       cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --v2-ease-spring-gentle: cubic-bezier(0.23, 1, 0.32, 1);
  --v2-ease-out-expo:     cubic-bezier(0.19, 1, 0.22, 1);
  --v2-ease-out-quart:    cubic-bezier(0.25, 1, 0.5, 1);
  --v2-ease-in-out:       cubic-bezier(0.4, 0, 0.2, 1);

  /* -- Durations ---------------------------------------------------------- */
  --v2-duration-instant:  50ms;
  --v2-duration-micro:    100ms;
  --v2-duration-fast:     150ms;
  --v2-duration-normal:   250ms;
  --v2-duration-slow:     400ms;
  --v2-duration-emphasis: 600ms;
  --v2-duration-page:     350ms;


  /* ========================================================================
     7. LAYOUT
     ======================================================================== */
  --v2-bottom-nav-height: 64px; /* matches actual .v2-bottom-nav height */
  --v2-top-bar-height:    56px;
  --v2-sidebar-width:     280px;
  --v2-touch-target:      44px;

  /* -- Safe Area Insets (iOS notch, Android gesture bar) ------------------- */
  --v2-safe-top:          env(safe-area-inset-top, 0px);
  --v2-safe-bottom:       env(safe-area-inset-bottom, 0px);
  --v2-safe-left:         env(safe-area-inset-left, 0px);
  --v2-safe-right:        env(safe-area-inset-right, 0px);

  /* -- Keyboard (set dynamically by capacitor-bridge.js on native) --------- */
  --v2-keyboard-height:   0px;


  /* ========================================================================
     8. Z-INDEX SCALE
     ======================================================================== */
  --v2-z-base:            0;
  --v2-z-dropdown:        100;
  --v2-z-sticky:          200;
  --v2-z-overlay:         300;
  --v2-z-modal:           400;
  --v2-z-toast:           500;
  --v2-z-tooltip:         600;
}


/* ==========================================================================
   MOBILE PERFORMANCE: Disable all backdrop-filter via variable overrides.
   Mobile Safari creates a separate GPU compositing layer for EACH
   backdrop-filter, and 50+ layers across the app exhaust the VRAM budget
   (~2.5GB on iPhone 12). This causes "un problème récurrent est survenu".
   Desktop keeps the glass effects. Mobile gets solid opaque backgrounds.
   All elements reference --v2-blur-* tokens → overriding them here kills
   every blur at the source, zero !important needed.
   ========================================================================== */

@media (max-width: 768px) {
    :root {
        /* --- Kill all blur tokens → every element using var(--v2-blur-*) becomes none --- */
        --v2-blur-xs:       none;
        --v2-blur-sm:       none;
        --v2-blur-md:       none;
        --v2-blur-lg:       none;
        --v2-blur-xl:       none;
        --v2-blur-nav:      none;
        --v2-blur-bar:      none;
        --v2-blur-sat-lg:   none;

        /* --- Opaque fallbacks: elements that become invisible without blur --- */
        --v2-glass-bg:          rgba(15, 15, 15, 0.85);
        --v2-bg-nav:            rgba(28, 28, 30, 0.45);   /* low opacity — lets blur(12px) show through */
        --v2-bg-glass-circle:   rgba(30, 30, 33, 0.65);
        --v2-bg-backdrop:       rgba(0, 0, 0, 0.78);
        --v2-bg-menu:           rgba(28, 28, 30, 0.50);
        --v2-bg-notif-header:   rgba(0, 0, 0, 0.92);
    }

    /* --- Selective blur restore moved to each component's own CSS file --- */
    /* shell.css → .v2-bottom-nav
       components.css → .v2-page-header, .v2-page-header::after
       dashboard.css → .v2-dash-header::after, .v2-user-menu
       collection.css → .v2-sort-menu
       Reason: tokens.css loads first — later CSS files would override these rules. */
}