/* ==========================================================================
   Burj Trades — Design Tokens  (WordPress theme)
   ==========================================================================
   Every brand value below reads from a theme.json preset, with the literal
   as a fallback. That means theme.json is the single source of truth: change
   a colour there (or in the Site Editor under Styles) and it flows through
   every component automatically.

   Do NOT hard-code brand colours in the other stylesheets.
   ========================================================================== */

:root {
  /* ---- Brand (sampled from the circular badge logo) ------------------
     Gold is the brand colour; the navy below is the surface it sits on.
     Measured against --bg: gold 10.6:1, gold-deep 7.2:1 - both well clear
     of AA. Gold is LIGHT, so anything sitting ON it needs dark text:
     use --on-accent (9.4:1), never white (1.7:1, which fails).          */
  --c-gold:       var(--wp--preset--color--gold, #F8C129);   /* ring + BURJ wordmark - primary accent    */
  --c-gold-deep:  var(--wp--preset--color--gold-deep, #D99A12);   /* darker gold, gradient starts             */
  --c-gold-hi:    var(--wp--preset--color--gold-hi, #FBD45E);   /* hover / highlight                        */
  --c-gold-pale:  var(--wp--preset--color--gold-pale, #FBDC7D);   /* sheen, gradient ends                     */
  --on-accent:    var(--wp--preset--color--on-accent, #0A2540);   /* text + icons on ANY gold surface         */

  --c-ink:        #0A2540;   /* navy structure, carried over             */
  --c-deep:       #0E3254;
  --c-steel:      #1A4A72;
  --c-chrome:     var(--wp--preset--color--chrome, #C9D4DE);   /* the silver TRADES wordmark               */
  --c-mist:       #E8EEF3;

  /* ---- Surfaces ------------------------------------------------------ */
  --bg:           var(--wp--preset--color--base, #061A2C);
  --bg-alt:       var(--wp--preset--color--base-alt, #082036);
  --bg-raise:     var(--wp--preset--color--base-raise, #0B2742);
  --surface:      rgba(17, 50, 82, .52);
  --surface-hi:   rgba(24, 66, 106, .62);
  --border:       rgba(201, 212, 222, .11);
  --border-hi:    rgba(201, 212, 222, .22);

  /* ---- Text ---------------------------------------------------------- */
  --text:         var(--wp--preset--color--contrast, #EEF4F9);
  --text-2:       var(--wp--preset--color--contrast-2, #A9BED1);   /* 10.4:1 on --bg                           */
  --text-3:       var(--wp--preset--color--contrast-3, #7B93A8);

  /* ---- Accents ------------------------------------------------------- */
  --accent:       var(--wp--preset--color--gold, #F8C129);
  --accent-2:     var(--wp--preset--color--gold-deep, #D99A12);
  --accent-soft:  rgba(248, 193, 41, .12);
  --up:           var(--wp--preset--color--up, #1DB954);   /* the bull                                 */
  --down:         var(--wp--preset--color--down, #E5342B);   /* the bear                                 */

  /* ---- Gradients ------------------------------------------------------ */
  --grad-brand:   linear-gradient(135deg, #0A2540 0%, #1A4A72 45%, #F8C129 100%);
  --grad-btn:     linear-gradient(135deg, #D99A12 0%, #F8C129 100%);
  --grad-btn-hi:  linear-gradient(135deg, #E8A914 0%, #FBD45E 100%);
  --grad-text:    linear-gradient(100deg, #C9D4DE 8%, #F8C129 52%, #FBDC7D 96%);
  --grad-edge:    linear-gradient(140deg, rgba(201,212,222,.42), rgba(201,212,222,0) 42%, rgba(248,193,41,.30));
  --grad-panel:   linear-gradient(160deg, rgba(20,58,94,.60), rgba(8,30,52,.78));

  /* ---- Type ---------------------------------------------------------- */
  --font-display: var(--wp--preset--font-family--display, Sora, ui-sans-serif, system-ui, sans-serif);
  --font-body:    var(--wp--preset--font-family--body, Inter, ui-sans-serif, system-ui, sans-serif);

  --fs-hero:  clamp(2.45rem, 1.30rem + 4.70vw, 4.65rem);
  --fs-h1:    clamp(2.10rem, 1.50rem + 2.55vw, 3.40rem);
  --fs-h2:    clamp(1.72rem, 1.33rem + 1.70vw, 2.55rem);
  --fs-h3:    clamp(1.18rem, 1.08rem + 0.46vw, 1.44rem);
  --fs-lead:  clamp(1.04rem, 0.99rem + 0.34vw, 1.24rem);
  --fs-body:  1rem;
  --fs-sm:    .9rem;
  --fs-xs:    .8rem;

  --lh-tight: 1.08;
  --lh-head:  1.18;
  --lh-body:  1.68;

  /* ---- Layout -------------------------------------------------------- */
  --maxw:       1200px;
  --maxw-text:  68ch;
  --gutter:     clamp(20px, 4.5vw, 44px);
  --section:    var(--wp--preset--spacing--60, clamp(76px, 9vw, 132px));
  --header-h:   76px;

  /* ---- Radii --------------------------------------------------------- */
  --r-sm:   10px;
  --r:      16px;
  --r-lg:   22px;
  --r-xl:   30px;
  --r-pill: 999px;

  /* ---- Elevation ----------------------------------------------------- */
  --sh-1:   0 2px 10px rgba(0, 0, 0, .24);
  --sh-2:   0 18px 48px rgba(0, 0, 0, .42);
  --sh-3:   0 32px 80px rgba(0, 0, 0, .52);
  --glow:   0 0 0 1px rgba(248, 193, 41, .26), 0 16px 44px rgba(217, 154, 18, .30);

  /* ---- Motion -------------------------------------------------------- */
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --t-fast:    .18s;
  --t:         .32s;
  --t-slow:    .62s;
}

/* The site is dark by design. These keep form controls, scrollbars and the
   browser UI consistent with it rather than flashing a white default. */
:root { color-scheme: dark; }

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: .01ms; --t: .01ms; --t-slow: .01ms; }
}