/* ==========================================================================
   ONE QR — BRAND IDENTITY & DESIGN SYSTEM TOKENS
   Official purple brand identity built for Modern SaaS + Fintech precision.
   Supports: Day Mode (Light), Night Mode (Dark), Auto Mode (Device/Time-Based).
   ========================================================================== */

:root,
[data-theme="day"] {
  /* ------------------------------------------------------------------------
     Primary Colour System — DAY MODE (Light SaaS)
     ------------------------------------------------------------------------ */
  --color-primary: #6C4DFF;            /* Primary Purple: CTA, links, active, highlights */
  --color-primary-dark: #4B32C3;       /* Deep Purple: hover, gradients */
  --color-primary-soft: #EEEAFE;       /* Soft Purple: icon containers, feature bgs, pills */
  --color-primary-glow: rgba(108, 77, 255, 0.22);

  --color-navy: #111126;               /* Dark Navy: headings, hero text, dark accents */
  --color-navy-card: #181834;          /* Elevated surface */
  --color-navy-muted: #B7B7C8;         /* Subdued text on dark navy sections */

  --color-bg-page: #F8F8FC;            /* Main background: 60% of site (crisp SaaS light) */
  --color-surface-white: #FFFFFF;      /* Pure White: cards, navigation, forms, mockups */
  --color-surface-subtle: #F1F1F8;     /* Inset surfaces, table headers, code chips */
  --color-surface-card: #FFFFFF;       /* Standard card background */

  --color-text-primary: #171722;       /* Primary Text */
  --color-text-secondary: #4D4D61;     /* Secondary Text (Refined SaaS contrast, WCAG AAA) */
  --color-text-muted: #6C6C82;         /* Muted Labels & footnotes (Comfortable reading) */
  --color-text-inverse: #FFFFFF;       /* White text on dark navy / purple */

  --color-border: #E7E5F0;             /* Standard border */
  --color-border-subtle: #F0EFF7;      /* Very soft divider */
  --color-border-focus: #6C4DFF;       /* Active input / card hover border */

  /* Success / Payment Accent (Mint) */
  --color-success: #16B89A;            /* Mint: payments approved, positive status, rewards */
  --color-success-soft: rgba(22, 184, 154, 0.12);

  /* Warning / Info */
  --color-warning: #F59E0B;
  --color-warning-soft: rgba(245, 158, 11, 0.12);

  /* Gradients */
  --gradient-brand-primary: linear-gradient(135deg, #4B32C3 0%, #6C4DFF 100%);
  --gradient-brand-subtle: linear-gradient(180deg, #EEEAFE 0%, #FFFFFF 100%);
  --gradient-card-soft: linear-gradient(180deg, #FFFFFF 0%, #FAF9FE 100%);
  --gradient-hero-glow: radial-gradient(circle, rgba(108, 77, 255, 0.10) 0%, rgba(238, 234, 254, 0.40) 45%, transparent 70%);
  --gradient-dark-section: linear-gradient(180deg, #111126 0%, #0D0D1F 100%);

  /* Header blur background */
  --header-bg: rgba(255, 255, 255, 0.88);
  --header-bg-scrolled: rgba(255, 255, 255, 0.98);
  --header-border: #E7E5F0;

  /* Shadows (Subtle, avoiding heavy black) */
  --shadow-default: 0 8px 30px rgba(17, 17, 38, 0.06);
  --shadow-elevated: 0 16px 50px rgba(17, 17, 38, 0.10);
  --shadow-card-hover: 0 14px 40px rgba(108, 77, 255, 0.09), 0 2px 8px rgba(17, 17, 38, 0.04);
  --shadow-mockup: 0 24px 60px -12px rgba(17, 17, 38, 0.18), 0 0 1px rgba(17, 17, 38, 0.12);
  --shadow-btn-primary: 0 4px 18px rgba(108, 77, 255, 0.32);
  --shadow-btn-hover: 0 6px 24px rgba(75, 50, 195, 0.40);
  --shadow-focus-ring: 0 0 0 3px rgba(108, 77, 255, 0.20);

  /* ------------------------------------------------------------------------
     Typography: Headings = Manrope, Body = Inter
     ------------------------------------------------------------------------ */
  --font-heading: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Type Scale */
  --text-h1: clamp(2.375rem, 4.5vw + 0.5rem, 4.25rem); /* 38-46px mobile, 56-72px desktop */
  --text-h2: clamp(1.875rem, 3vw + 0.5rem, 3rem);       /* 30-36px mobile, 40-52px desktop */
  --text-h3: clamp(1.4rem, 2vw + 0.25rem, 1.875rem);   /* 24-32px */
  --text-h4: 1.25rem;                                   /* 20px */
  --text-body-lg: 1.125rem;                             /* 18px */
  --text-body: 1rem;                                    /* 16px */
  --text-small: 0.875rem;                               /* 14px */
  --text-xs: 0.8125rem;                                 /* 13px */

  /* Spacing System (8px Grid) */
  --space-8: 8px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --space-120: 120px;

  /* Section vertical spacing */
  --section-padding-desktop: 104px;
  --section-padding-mobile: 68px;

  /* Border Radius System */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-btn: 11px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-card: 22px;
  --radius-container: 28px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-btn: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-card: 220ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 320ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-theme: 320ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout Containers */
  --container-max: 1220px;
  --container-narrow: 860px;
  --container-wide: 1360px;
  --header-height: 74px;
  --header-height-scrolled: 64px;
}

/* ==========================================================================
   NIGHT MODE DESIGN SYSTEM
   Carefully calibrated dark theme for Modern SaaS.
   Deep charcoal background, purple-tinted dark surfaces, soft white text.
   ========================================================================== */
[data-theme="night"] {
  /* Surface & Background */
  --color-bg-page: #0C0C14;            /* Deep charcoal / near-black background */
  --color-surface-white: #151524;      /* Dark purple-tinted surface (cards, dialogs) */
  --color-surface-subtle: #1C1C30;     /* Inset surfaces, secondary buttons, pills */
  --color-surface-card: #151524;       /* Card surface */

  /* Text Hierarchy */
  --color-navy: #FFFFFF;               /* Main headings & dark-mode navy text: pure clear white */
  --color-heading: #FFFFFF;            /* Main headings: pure clear white */
  --color-navy-card: #1A1A2E;
  --color-navy-muted: #B7B7C8;
  --color-text-primary: #F0F0FA;       /* Soft white body text */
  --color-text-secondary: #9B9BB5;     /* Muted secondary text */
  --color-text-muted: #6B6B86;         /* Footnotes & metadata */
  --color-text-inverse: #0C0C14;       /* Inverted text when on white pills */

  /* Brand Accents Tuned for Dark Mode */
  --color-primary: #7C5EFF;            /* Vibrant One QR violet tuned for dark mode */
  --color-primary-dark: #6343F0;       /* Slightly deeper violet for hovers */
  --color-primary-soft: rgba(124, 94, 255, 0.16); /* Soft purple container */
  --color-primary-glow: rgba(124, 94, 255, 0.35);

  /* Borders */
  --color-border: rgba(255, 255, 255, 0.08); /* Refined thin dark border */
  --color-border-subtle: rgba(255, 255, 255, 0.04);
  --color-border-focus: #7C5EFF;

  /* Success / Mint */
  --color-success: #19CCA8;
  --color-success-soft: rgba(25, 204, 168, 0.14);

  /* Gradients */
  --gradient-brand-primary: linear-gradient(135deg, #5A3DE6 0%, #7C5EFF 100%);
  --gradient-brand-subtle: linear-gradient(180deg, rgba(124, 94, 255, 0.12) 0%, #151524 100%);
  --gradient-card-soft: linear-gradient(180deg, #18182A 0%, #141423 100%);
  --gradient-hero-glow: radial-gradient(circle, rgba(124, 94, 255, 0.16) 0%, rgba(20, 20, 36, 0.8) 45%, transparent 70%);
  --gradient-dark-section: linear-gradient(180deg, #0E0E18 0%, #09090F 100%);

  /* Header blur background */
  --header-bg: rgba(12, 12, 20, 0.88);
  --header-bg-scrolled: rgba(12, 12, 20, 0.98);
  --header-border: rgba(255, 255, 255, 0.08);

  /* Shadows (Darker, diffuse elevation) */
  --shadow-default: 0 8px 30px rgba(0, 0, 0, 0.35);
  --shadow-elevated: 0 16px 50px rgba(0, 0, 0, 0.55);
  --shadow-card-hover: 0 14px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(124, 94, 255, 0.3);
  --shadow-mockup: 0 24px 60px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.08);
  --shadow-btn-primary: 0 4px 18px rgba(124, 94, 255, 0.38);
  --shadow-btn-hover: 0 6px 26px rgba(124, 94, 255, 0.50);
  --shadow-focus-ring: 0 0 0 3px rgba(124, 94, 255, 0.30);
}