/* ==========================================================================
   TRYOOZEN TECH — Design Token System
   Version: 2.0.0 (Visual DNA & Design Foundation)
   Authority: Single source of truth for all visual tokens across all Titan prompts.
   Source: Extracted from official TRYOOZEN TECH brand logo & artwork.
   Specification: PRD v1.1 §56–58, Skills 01, 04, 08 & Titan 02 Directive.
   ========================================================================== */

:root {
  /* ──────────────────────────────────────────────────────────────────────────
     1. BRAND COLORS (Extracted from official TRYOOZEN logo & artwork)
     ────────────────────────────────────────────────────────────────────────── */
  --tz-brand-primary: #0088FF;           /* Electric blue — primary interactive emphasis */
  --tz-brand-secondary: #8B5CF6;         /* Vivid purple — premium discovery & rewards */
  --tz-accent-cyan: #00D4FF;             /* Luminous cyan — AI/API, technology & highlights */
  --tz-accent-blue: #0088FF;             /* Electric blue — links, primary CTAs, active states */
  --tz-accent-purple: #8B5CF6;           /* Violet purple — rewards, referrals, badges */
  --tz-accent-magenta: #D946EF;          /* Vibrant magenta — micro-accents, special badges */

  /* Section 4 Semantic Aliases */
  --color-brand-primary: var(--tz-brand-primary);
  --color-brand-secondary: var(--tz-brand-secondary);
  --color-brand-cyan: var(--tz-accent-cyan);
  --color-brand-blue: var(--tz-accent-blue);
  --color-brand-purple: var(--tz-accent-purple);
  --color-brand-magenta: var(--tz-accent-magenta);

  /* ──────────────────────────────────────────────────────────────────────────
     2. DARK PREMIUM SURFACE HIERARCHY
     Layered surfaces creating depth without flat pure-black chaos.
     ────────────────────────────────────────────────────────────────────────── */
  --tz-bg-primary: #0B0F19;              /* Deepest navy/charcoal — page foundation */
  --tz-bg-surface: #131825;              /* Dark navy — sections, panels, standard cards */
  --tz-bg-elevated: #1A2035;             /* Slightly lighter blue/charcoal — elevated cards */
  --tz-bg-soft: #242C47;                 /* Soft interactive backing & hover states */
  --tz-bg-overlay: rgba(11, 15, 25, 0.85); /* Modal & backdrop scrim */

  /* Section 4 Surface Aliases */
  --color-bg-page: var(--tz-bg-primary);
  --color-bg-surface: var(--tz-bg-surface);
  --color-bg-surface-elevated: var(--tz-bg-elevated);
  --color-bg-surface-soft: var(--tz-bg-soft);

  /* ──────────────────────────────────────────────────────────────────────────
     3. TEXT COLOR & CONTRAST (WCAG 2.1 AA Compliant)
     ────────────────────────────────────────────────────────────────────────── */
  --tz-text-primary: #F0F2F5;            /* High contrast crisp white/off-white */
  --tz-text-secondary: #94A3B8;          /* Slate neutral — comfortable body & labels */
  --tz-text-tertiary: #64748B;           /* Muted neutral — metadata, timestamps */
  --tz-text-muted: #64748B;              /* Alias for muted copy */
  --tz-text-inverse: #0B0F19;            /* Deep dark text on bright buttons/badges */

  /* Section 4 Text Aliases */
  --color-text-primary: var(--tz-text-primary);
  --color-text-secondary: var(--tz-text-secondary);
  --color-text-muted: var(--tz-text-muted);

  /* ──────────────────────────────────────────────────────────────────────────
     4. BORDERS & SEPARATORS
     ────────────────────────────────────────────────────────────────────────── */
  --tz-border-subtle: rgba(255, 255, 255, 0.07); /* Low-contrast divider */
  --tz-border-default: rgba(255, 255, 255, 0.12); /* Standard card/section border */
  --tz-border-strong: rgba(255, 255, 255, 0.22);  /* Emphasized boundary */
  --tz-border-brand: rgba(0, 212, 255, 0.4);     /* Active cyan/brand boundary */
  --tz-border-focus: var(--tz-accent-cyan);       /* Keyboard focus ring */

  /* Section 4 & 10 Border Aliases */
  --color-border: var(--tz-border-default);
  --color-border-subtle: var(--tz-border-subtle);
  --border-subtle: var(--tz-border-subtle);
  --border-default: var(--tz-border-default);
  --border-strong: var(--tz-border-strong);
  --border-brand: var(--tz-border-brand);
  --border-focus: var(--tz-border-focus);

  /* ──────────────────────────────────────────────────────────────────────────
     5. SEMANTIC STATUS COLORS (State never communicated by color alone)
     ────────────────────────────────────────────────────────────────────────── */
  --tz-success: #10B981;
  --tz-success-bg: rgba(16, 185, 129, 0.12);
  --tz-warning: #F59E0B;
  --tz-warning-bg: rgba(245, 158, 11, 0.12);
  --tz-error: #EF4444;
  --tz-error-bg: rgba(239, 68, 68, 0.12);
  --tz-info: #3B82F6;
  --tz-info-bg: rgba(59, 130, 246, 0.12);

  /* Section 4 Semantic Status Aliases */
  --color-success: var(--tz-success);
  --color-warning: var(--tz-warning);
  --color-danger: var(--tz-error);
  --color-info: var(--tz-info);

  /* ──────────────────────────────────────────────────────────────────────────
     6. CONTROLLED GRADIENT SYSTEM
     Transitioning through Cyan → Electric Blue → Purple → Magenta
     ────────────────────────────────────────────────────────────────────────── */
  --tz-gradient-brand: linear-gradient(135deg, #00D4FF 0%, #0088FF 45%, #8B5CF6 100%);
  --tz-gradient-brand-soft: linear-gradient(135deg, rgba(0, 212, 255, 0.15) 0%, rgba(0, 136, 255, 0.15) 45%, rgba(139, 92, 246, 0.15) 100%);
  --tz-gradient-brand-hover: linear-gradient(135deg, #33DDFF 0%, #339AFF 45%, #A37BF7 100%);
  --tz-gradient-border: linear-gradient(135deg, rgba(0, 212, 255, 0.5) 0%, rgba(139, 92, 246, 0.3) 100%);
  --tz-gradient-text: linear-gradient(135deg, #FFFFFF 10%, #A5F3FC 50%, #C4B5FD 100%);
  --tz-gradient-surface: linear-gradient(180deg, var(--tz-bg-surface) 0%, var(--tz-bg-primary) 100%);
  --tz-gradient-glow: radial-gradient(ellipse at center, rgba(0, 212, 255, 0.15) 0%, transparent 70%);

  /* Section 7 Gradient Aliases */
  --brand-gradient: var(--tz-gradient-brand);
  --brand-gradient-soft: var(--tz-gradient-brand-soft);
  --brand-gradient-border: var(--tz-gradient-border);
  --brand-gradient-text: var(--tz-gradient-text);
  --brand-gradient-glow: var(--tz-gradient-glow);

  /* ──────────────────────────────────────────────────────────────────────────
     7. DIRECTIONAL GLOW SYSTEM (Soft, purposeful, never blinding)
     ────────────────────────────────────────────────────────────────────────── */
  --tz-glow-sm: 0 0 12px rgba(0, 212, 255, 0.2);
  --tz-glow-md: 0 0 24px rgba(0, 212, 255, 0.28);
  --tz-glow-lg: 0 0 48px rgba(0, 212, 255, 0.35);
  --tz-glow-cyan: 0 0 25px rgba(0, 212, 255, 0.35);
  --tz-glow-purple: 0 0 25px rgba(139, 92, 246, 0.35);
  --tz-glow-brand: 0 0 30px rgba(0, 136, 255, 0.3);

  /* Section 8 Glow Aliases */
  --glow-sm: var(--tz-glow-sm);
  --glow-md: var(--tz-glow-md);
  --glow-lg: var(--tz-glow-lg);
  --glow-brand: var(--tz-glow-brand);
  --glow-cyan: var(--tz-glow-cyan);
  --glow-purple: var(--tz-glow-purple);

  /* ──────────────────────────────────────────────────────────────────────────
     8. GLASS SYSTEM (Selective glassmorphic surfaces)
     ────────────────────────────────────────────────────────────────────────── */
  --tz-glass-bg: rgba(19, 24, 37, 0.72);
  --tz-glass-border: rgba(255, 255, 255, 0.12);
  --tz-glass-blur: 14px;
  --tz-glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  --tz-glass-highlight: inset 0 1px 1px 0 rgba(255, 255, 255, 0.15);

  /* Section 9 Glass Aliases */
  --glass-bg: var(--tz-glass-bg);
  --glass-border: var(--tz-glass-border);
  --glass-blur: var(--tz-glass-blur);
  --glass-shadow: var(--tz-glass-shadow);
  --glass-highlight: var(--tz-glass-highlight);

  /* ──────────────────────────────────────────────────────────────────────────
     9. SHADOW SYSTEM (Restrained elevation levels)
     ────────────────────────────────────────────────────────────────────────── */
  --tz-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);
  --tz-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  --tz-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45);
  --tz-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.6);
  --tz-shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.7);
  --tz-shadow-glow: var(--tz-glow-brand);

  /* Section 11 Shadow Aliases */
  --shadow-xs: var(--tz-shadow-xs);
  --shadow-sm: var(--tz-shadow-sm);
  --shadow-md: var(--tz-shadow-md);
  --shadow-lg: var(--tz-shadow-lg);
  --shadow-glow: var(--tz-shadow-glow);

  /* ──────────────────────────────────────────────────────────────────────────
     10. TYPOGRAPHY (Inter + JetBrains Mono)
     ────────────────────────────────────────────────────────────────────────── */
  --tz-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --tz-font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;

  /* Font Aliases */
  --font-display: var(--tz-font-family);
  --font-heading: var(--tz-font-family);
  --font-body: var(--tz-font-family);
  --font-mono: var(--tz-font-mono);

  /* Font Weights */
  --tz-font-weight-regular: 400;
  --tz-font-weight-medium: 500;
  --tz-font-weight-semibold: 600;
  --tz-font-weight-bold: 700;
  --tz-font-weight-extrabold: 800;

  /* Type Scale (Section 13) */
  --tz-display-xl: 3.75rem;    /* 60px */
  --tz-display-lg: 3rem;       /* 48px */
  --tz-display-md: 2.25rem;    /* 36px */

  --tz-heading-xl: 1.875rem;   /* 30px */
  --tz-heading-lg: 1.5rem;     /* 24px */
  --tz-heading-md: 1.25rem;    /* 20px */
  --tz-heading-sm: 1.125rem;   /* 18px */

  --tz-body-lg: 1.125rem;      /* 18px */
  --tz-body-md: 1rem;          /* 16px */
  --tz-body-sm: 0.875rem;      /* 14px */

  --tz-label-lg: 1rem;         /* 16px */
  --tz-label-md: 0.875rem;     /* 14px */
  --tz-label-sm: 0.75rem;      /* 12px */

  --tz-caption: 0.75rem;       /* 12px */
  --tz-micro: 0.6875rem;       /* 11px */

  /* Aliases for backwards compatibility with Titan 01 */
  --tz-text-xs: var(--tz-caption);
  --tz-text-sm: var(--tz-body-sm);
  --tz-text-base: var(--tz-body-md);
  --tz-text-lg: var(--tz-body-lg);
  --tz-text-xl: var(--tz-heading-md);
  --tz-text-2xl: var(--tz-heading-lg);
  --tz-text-3xl: var(--tz-heading-xl);
  --tz-text-4xl: var(--tz-display-md);
  --tz-text-5xl: var(--tz-display-lg);
  --tz-text-6xl: var(--tz-display-xl);

  /* Line Heights */
  --tz-leading-tight: 1.15;
  --tz-leading-snug: 1.3;
  --tz-leading-normal: 1.5;
  --tz-leading-relaxed: 1.65;

  /* Letter Spacing */
  --tz-tracking-tight: -0.025em;
  --tz-tracking-normal: 0;
  --tz-tracking-wide: 0.025em;
  --tz-tracking-wider: 0.05em;

  /* ──────────────────────────────────────────────────────────────────────────
     11. SPACING SCALE (Section 16: Strict 4px base scale)
     ────────────────────────────────────────────────────────────────────────── */
  --tz-space-1: 0.25rem;   /* 4px  */
  --tz-space-2: 0.5rem;    /* 8px  */
  --tz-space-3: 0.75rem;   /* 12px */
  --tz-space-4: 1rem;      /* 16px */
  --tz-space-5: 1.25rem;   /* 20px */
  --tz-space-6: 1.5rem;    /* 24px */
  --tz-space-8: 2rem;      /* 32px */
  --tz-space-10: 2.5rem;   /* 40px */
  --tz-space-12: 3rem;     /* 48px */
  --tz-space-16: 4rem;     /* 64px */
  --tz-space-20: 5rem;     /* 80px */
  --tz-space-24: 6rem;     /* 96px */

  /* Section 16 Spacing Aliases */
  --space-1: var(--tz-space-1);
  --space-2: var(--tz-space-2);
  --space-3: var(--tz-space-3);
  --space-4: var(--tz-space-4);
  --space-5: var(--tz-space-5);
  --space-6: var(--tz-space-6);
  --space-8: var(--tz-space-8);
  --space-10: var(--tz-space-10);
  --space-12: var(--tz-space-12);
  --space-16: var(--tz-space-16);
  --space-20: var(--tz-space-20);
  --space-24: var(--tz-space-24);

  /* ──────────────────────────────────────────────────────────────────────────
     12. LAYOUT CONTAINERS & MAX WIDTHS (Section 15)
     ────────────────────────────────────────────────────────────────────────── */
  --tz-container-sm: 640px;
  --tz-container-md: 768px;
  --tz-container-lg: 1024px;
  --tz-container-xl: 1280px;
  --tz-container-full: 1536px;
  --tz-container-padding: var(--tz-space-4);

  /* Aliases */
  --container-sm: var(--tz-container-sm);
  --container-md: var(--tz-container-md);
  --container-lg: var(--tz-container-lg);
  --container-xl: var(--tz-container-xl);
  --container-full: var(--tz-container-full);
  --tz-container-max: var(--tz-container-xl);
  --tz-container-narrow: var(--tz-container-md);
  --tz-container-wide: var(--tz-container-full);

  /* ──────────────────────────────────────────────────────────────────────────
     13. BORDER RADIUS SCALE (Section 82)
     ────────────────────────────────────────────────────────────────────────── */
  --tz-radius-sm: 0.25rem;   /* 4px  — inputs, small controls */
  --tz-radius-md: 0.5rem;    /* 8px  — buttons, standard cards */
  --tz-radius-lg: 1rem;      /* 16px — featured cards, modals */
  --tz-radius-xl: 1.5rem;    /* 24px — hero panels, large clusters */
  --tz-radius-pill: 9999px;  /* badges, pill buttons */
  --tz-radius-circle: 50%;

  /* Aliases */
  --radius-sm: var(--tz-radius-sm);
  --radius-md: var(--tz-radius-md);
  --radius-lg: var(--tz-radius-lg);
  --radius-xl: var(--tz-radius-xl);
  --radius-pill: var(--tz-radius-pill);

  /* ──────────────────────────────────────────────────────────────────────────
     14. ANIMATION & MOTION TOKENS (Section 57)
     ────────────────────────────────────────────────────────────────────────── */
  --tz-duration-instant: 50ms;
  --tz-duration-fast: 150ms;
  --tz-duration-normal: 250ms;
  --tz-duration-slow: 400ms;

  --tz-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --tz-ease-emphasized: cubic-bezier(0.34, 1.56, 0.64, 1);
  --tz-ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --tz-ease-accelerate: cubic-bezier(0.4, 0, 1, 1);

  /* Section 57 Motion Aliases */
  --duration-instant: var(--tz-duration-instant);
  --duration-fast: var(--tz-duration-fast);
  --duration-normal: var(--tz-duration-normal);
  --duration-slow: var(--tz-duration-slow);
  --ease-standard: var(--tz-ease-standard);
  --ease-emphasized: var(--tz-ease-emphasized);
  --ease-decelerate: var(--tz-ease-decelerate);
  --ease-accelerate: var(--tz-ease-accelerate);

  /* Backwards compatibility */
  --tz-motion-fast: var(--tz-duration-fast) var(--tz-ease-standard);
  --tz-motion-normal: var(--tz-duration-normal) var(--tz-ease-standard);
  --tz-motion-slow: var(--tz-duration-slow) var(--tz-ease-standard);
  --tz-motion-spring: var(--tz-duration-normal) var(--tz-ease-emphasized);

  /* ──────────────────────────────────────────────────────────────────────────
     15. Z-INDEX SCALE (Section 81)
     ────────────────────────────────────────────────────────────────────────── */
  --tz-z-base: 0;
  --tz-z-content: 10;
  --tz-z-sticky: 100;
  --tz-z-header: 200;
  --tz-z-floating: 250;
  --tz-z-popover: 300;
  --tz-z-modal: 400;
  --tz-z-toast: 500;

  /* Aliases */
  --z-base: var(--tz-z-base);
  --z-content: var(--tz-z-content);
  --z-sticky: var(--tz-z-sticky);
  --z-header: var(--tz-z-header);
  --z-floating: var(--tz-z-floating);
  --z-popover: var(--tz-z-popover);
  --z-modal: var(--tz-z-modal);
  --z-toast: var(--tz-z-toast);
}

/* ============================================================================
   REDUCED MOTION — Section 59 Accessibility Mandate
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --tz-duration-instant: 0ms !important;
    --tz-duration-fast: 0ms !important;
    --tz-duration-normal: 0ms !important;
    --tz-duration-slow: 0ms !important;
    --tz-motion-fast: 0ms !important;
    --tz-motion-normal: 0ms !important;
    --tz-motion-slow: 0ms !important;
    --tz-motion-spring: 0ms !important;
  }
}

/* ============================================================================
   16. SEMANTIC FUNNEL-THEME ACCENTS (Section 98)
   Enables controlled accent shifts without breaking the core master identity.
   ============================================================================ */

/* Freebie Theme — Cyan/Blue dominance */
.tz-theme-freebie {
  --tz-theme-accent: var(--tz-accent-cyan);
  --tz-theme-glow: var(--tz-glow-cyan);
}

/* Deals Theme — Blue/Purple dominance */
.tz-theme-deals {
  --tz-theme-accent: var(--tz-brand-primary);
  --tz-theme-glow: var(--tz-glow-brand);
}

/* AI/API Theme — Luminous Cyan dominance */
.tz-theme-ai {
  --tz-theme-accent: var(--tz-accent-cyan);
  --tz-theme-glow: var(--tz-glow-cyan);
}

/* Rewards/Referral Theme — Purple/Magenta dominance */
.tz-theme-rewards {
  --tz-theme-accent: var(--tz-accent-purple);
  --tz-theme-glow: var(--tz-glow-purple);
}

/* Community Theme — Electric Blue dominance */
.tz-theme-community {
  --tz-theme-accent: var(--tz-accent-blue);
  --tz-theme-glow: var(--tz-glow-brand);
}