/* ==========================================================================
   QRBELL Store — Design Tokens
   --------------------------------------------------------------------------
   Single source of truth for every color, size, radius, shadow and timing in
   the Store. No component file may declare a raw hex value.

   Structure:
     1. Primitive palette  — raw brand values, never used directly by components
     2. Semantic tokens    — what components actually consume
     3. Typography
     4. Space / size / radius / shadow / motion / layering

   Palette derived from the live QRBELL site — see docs/brand-reference.md.
   ========================================================================== */

:root {

  /* ======================================================================
     1. PRIMITIVE PALETTE
     ====================================================================== */

  /* -- Navy: the QRBELL shell. Header, footer, admin chrome. ------------- */
  --qb-navy-950: #021238;
  --qb-navy-900: #07091C;
  --qb-navy-800: #0F1530;
  --qb-navy-700: #171E3D;
  --qb-navy-600: #242B4A;
  --qb-navy-500: #031B4E;
  --qb-navy-400: #082C7A;

  /* -- Gold: the brand accent and primary call to action. ---------------- */
  --qb-gold-700: #b88500;
  --qb-gold-600: #d89e00;
  --qb-gold-500: #F4B400;
  --qb-gold-200: #FBE3A0;
  --qb-gold-100: #FDF3D6;
  --qb-gold-050: #FEFAEE;

  /* -- Blue: informational, links, selected state. ----------------------- */
  --qb-blue-700: #1D4ED8;
  --qb-blue-600: #2563EB;
  --qb-blue-500: #3B82F6;
  --qb-blue-400: #60A5FA;
  --qb-blue-100: #DBEAFE;
  --qb-blue-050: #EFF6FF;

  /* -- Orange: highlight / promotional. ---------------------------------- */
  --qb-orange-600: #EA580C;
  --qb-orange-500: #F97316;
  --qb-orange-050: #FFF7ED;

  /* -- Neutral: the app surface. ----------------------------------------- */
  --qb-white:     #FFFFFF;
  --qb-grey-050:  #F8FAFC;
  --qb-grey-100:  #F1F5F9;
  --qb-grey-200:  #E7ECF3;
  --qb-grey-300:  #D6DDE8;
  --qb-grey-400:  #A8B3C4;
  --qb-grey-500:  #7A8699;
  --qb-grey-600:  #5B6678;
  --qb-grey-700:  #3D4759;
  --qb-grey-800:  #262E3F;
  --qb-grey-900:  #1C2333;

  /* -- Status ------------------------------------------------------------- */
  --qb-green-600: #1F9A5F;
  --qb-green-500: #2bb673;
  --qb-green-050: #E9F8F1;
  --qb-red-600:   #C42F2F;
  --qb-red-500:   #e23b3b;
  --qb-red-050:   #FDECEC;
  --qb-amber-500: #F59E0B;
  --qb-amber-050: #FEF6E7;

  /* -- Channel colors (communication features) ---------------------------- */
  --qb-whatsapp:  #25D366;


  /* ======================================================================
     2. SEMANTIC TOKENS  — components consume these, never the primitives
     ====================================================================== */

  /* -- Surfaces ----------------------------------------------------------- */
  --color-bg:            var(--qb-grey-050);
  --color-surface:       var(--qb-white);
  --color-surface-alt:   var(--qb-grey-100);
  --color-surface-sunken:var(--qb-grey-200);
  --color-surface-invert:var(--qb-navy-900);
  --color-surface-raised:var(--qb-navy-800);

  /* -- Text --------------------------------------------------------------- */
  --color-text:          var(--qb-grey-900);
  --color-text-muted:    var(--qb-grey-600);
  --color-text-faint:    var(--qb-grey-500);
  --color-text-invert:   #F4F4F0;
  --color-text-invert-muted: #8890B0;
  --color-text-invert-faint: #6670A0;

  /* -- Borders ------------------------------------------------------------ */
  --color-border:        var(--qb-grey-200);
  --color-border-strong: var(--qb-grey-300);
  --color-border-invert: rgba(36, 43, 74, 0.9);

  /* -- Brand roles --------------------------------------------------------
     Gold is the primary action. Its luminance is high, so on-gold text is
     navy — white on gold fails contrast. Blue carries interactive meaning
     (links, selection, focus) where gold would read as "buy this".        */
  --color-primary:        var(--qb-gold-500);
  --color-primary-hover:  var(--qb-gold-600);
  --color-primary-active: var(--qb-gold-700);
  --color-primary-soft:   var(--qb-gold-100);
  --color-primary-subtle: var(--qb-gold-050);
  --color-on-primary:     var(--qb-navy-900);

  --color-accent:         var(--qb-blue-600);
  --color-accent-hover:   var(--qb-blue-700);
  --color-accent-soft:    var(--qb-blue-100);
  --color-accent-subtle:  var(--qb-blue-050);
  --color-on-accent:      var(--qb-white);

  --color-link:           var(--qb-blue-600);
  --color-link-hover:     var(--qb-blue-700);

  /* -- Status ------------------------------------------------------------- */
  --color-success:        var(--qb-green-500);
  --color-success-strong: var(--qb-green-600);
  --color-success-soft:   var(--qb-green-050);
  --color-danger:         var(--qb-red-500);
  --color-danger-strong:  var(--qb-red-600);
  --color-danger-soft:    var(--qb-red-050);
  --color-warning:        var(--qb-amber-500);
  --color-warning-soft:   var(--qb-amber-050);
  --color-info:           var(--qb-blue-600);
  --color-info-soft:      var(--qb-blue-050);

  /* -- Focus ring — blue, 3px, always visible (WCAG 2.4.7) ---------------- */
  --focus-ring:        0 0 0 3px var(--qb-blue-100), 0 0 0 1px var(--qb-blue-600);
  --focus-ring-invert: 0 0 0 3px rgba(96, 165, 250, 0.35);


  /* ======================================================================
     3. TYPOGRAPHY
     ====================================================================== */

  --font-heading: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body:    'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Modular scale, 1.200 minor third, 16px base. Clamped where a heading
     must hold up from 320px to 1600px without a media query.              */
  --text-2xs:  0.6875rem;  /* 11px — badge, meta                            */
  --text-xs:   0.75rem;    /* 12px — labels, captions                       */
  --text-sm:   0.8125rem;  /* 13px — dense UI, table cells                  */
  --text-base: 0.875rem;   /* 14px — app default                            */
  --text-md:   1rem;       /* 16px — body copy, inputs (prevents iOS zoom)  */
  --text-lg:   1.125rem;   /* 18px                                          */
  --text-xl:   1.375rem;   /* 22px — card / section title                   */
  --text-2xl:  clamp(1.5rem,  1.2rem + 1.2vw, 1.875rem);
  --text-3xl:  clamp(1.75rem, 1.3rem + 2.0vw, 2.5rem);
  --text-4xl:  clamp(2rem,    1.4rem + 3.0vw, 3.25rem);   /* hero           */

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.55;
  --leading-relaxed: 1.75;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extra:    800;

  --tracking-tight: -0.02em;
  --tracking-wide:   0.02em;
  --tracking-caps:   0.08em;


  /* ======================================================================
     4. SPACE — 4px base
     ====================================================================== */

  --space-0:   0;
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */

  /* Section rhythm — tighter on mobile, opened up at md (see responsive.css) */
  --section-gap: var(--space-10);

  /* Gutters */
  --gutter:      var(--space-4);


  /* ======================================================================
     5. RADIUS — matches the main site (20 / 14 / 24)
     ====================================================================== */

  --radius-xs:      6px;
  --radius-sm:      10px;
  --radius-btn:     14px;
  --radius-input:   12px;
  --radius-section: 20px;
  --radius-card:    24px;
  --radius-sheet:   28px;
  --radius-pill:    999px;
  --radius-circle:  50%;


  /* ======================================================================
     6. SHADOW
     QRBELL shadows are color-tinted, not neutral grey — they carry a hint of
     the element's own hue. Neutral elevation uses a navy tint.
     ====================================================================== */

  --shadow-xs:  0 1px 2px rgba(7, 9, 28, 0.06);
  --shadow-sm:  0 2px 8px rgba(7, 9, 28, 0.06);
  --shadow-md:  0 6px 20px rgba(7, 9, 28, 0.08);
  --shadow-lg:  0 16px 40px rgba(7, 9, 28, 0.12);
  --shadow-xl:  0 30px 80px rgba(7, 9, 28, 0.20);

  --shadow-primary:       0 4px 16px rgba(244, 180, 0, 0.35);
  --shadow-primary-hover: 0 6px 20px rgba(244, 180, 0, 0.45);
  --shadow-accent:        0 4px 16px rgba(37, 99, 235, 0.35);
  --shadow-accent-hover:  0 6px 20px rgba(37, 99, 235, 0.45);

  /* Bars that float above content, casting upward */
  --shadow-bar-up:   0 -6px 24px rgba(7, 9, 28, 0.10);
  --shadow-bar-down: 0 2px 16px rgba(7, 9, 28, 0.08);


  /* ======================================================================
     7. MOTION
     Short, functional, and fully disabled under prefers-reduced-motion.
     ====================================================================== */

  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --duration-fast:   120ms;
  --duration-normal: 200ms;
  --duration-slow:   320ms;

  --transition-base: var(--duration-normal) var(--ease-out);

  /* The standard QRBELL lift */
  --lift: translateY(-2px);


  /* ======================================================================
     8. LAYOUT
     ====================================================================== */

  --container-max:     1280px;
  --container-wide:    1440px;
  --container-narrow:  760px;
  --container-form:    560px;

  --header-height-desktop: 72px;
  --header-height-mobile:  56px;
  --bottomnav-height:      60px;
  --stickybar-height:      68px;

  /* iOS home-indicator inset. Falls back to 0 where env() is unsupported. */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top:    env(safe-area-inset-top, 0px);

  /* Minimum touch target — WCAG 2.5.5 / spec §52 */
  --touch-min: 44px;


  /* ======================================================================
     9. Z-INDEX — named, so no component invents its own number
     ====================================================================== */

  --z-base:        1;
  --z-sticky:      100;
  --z-header:      1000;
  --z-bottomnav:   1010;
  --z-stickybar:   1020;
  --z-dropdown:    1030;
  --z-backdrop:    1040;
  --z-sheet:       1050;
  --z-modal:       1060;
  --z-toast:       1080;
  --z-tooltip:     1090;
}


/* ==========================================================================
   Dark chrome scope
   --------------------------------------------------------------------------
   Applied to the header, footer and admin shell. Re-points the semantic
   surface/text/border tokens so the same components render correctly on
   navy without any component needing a dark-specific rule.
   ========================================================================== */

.qb-invert {
  --color-bg:            var(--qb-navy-900);
  --color-surface:       var(--qb-navy-800);
  --color-surface-alt:   var(--qb-navy-700);
  --color-surface-sunken:var(--qb-navy-950);
  --color-text:          var(--color-text-invert);
  --color-text-muted:    var(--color-text-invert-muted);
  --color-text-faint:    var(--color-text-invert-faint);
  --color-border:        var(--color-border-invert);
  --color-border-strong: rgba(72, 82, 128, 0.9);
  --focus-ring:          var(--focus-ring-invert);
}


/* ==========================================================================
   Section rhythm opens up on larger viewports
   ========================================================================== */

@media (min-width: 768px) {
  :root {
    --section-gap: var(--space-16);
    --gutter:      var(--space-6);
  }
}

@media (min-width: 1200px) {
  :root {
    --section-gap: var(--space-20);
  }
}