/* ============================================================================
   ALMEER SECURITIES — GLOBAL DESIGN SYSTEM (tokens)
   ============================================================================
   Every colour, size, radius, shadow and spacing step in the site resolves
   from this file. Nothing downstream hard-codes a brand colour, so the whole
   identity can be re-themed by editing the block below and nothing else.

   The palette below is NOT invented. Every --brand-* value was sampled from
   the computed styles of the existing live site (data-theme="emerald"), so
   the rebuild carries the identical dark emerald + gold identity:

     gold        #F3BA26   (live --accent / --gold)
     emerald     #0C3D22   (live --brand)
     page bg     #021709   (live --background)
     cream text  #F7F2E3   (live --foreground)
     footer bg   #000000   (live footer)

   Change the six --brand-* values and the entire site follows.
   ========================================================================= */

:root {
  /* ---- BRAND (sampled from the live site — do not guess new values) ----- */
  --brand-primary:        #0C3D22;   /* emerald — raised surfaces, buttons   */
  --brand-primary-deep:   #021709;   /* page background                      */
  --brand-primary-soft:   #092917;   /* card / tinted surface                */
  --brand-accent:         #F3BA26;   /* gold — CTAs, rules, emphasis         */
  --brand-accent-soft:    #1E1A0B;   /* dark gold wash for accent panels     */
  --brand-ink:            #F7F2E3;   /* cream — body text on dark            */

  /* ---- CHROME ----------------------------------------------------------
     The top bar, header, mega panels, mobile drawer and footer are DARK in
     every theme, so that a light inner page still reads as the same site as
     the dark homepage.

     They therefore resolve from --chrome-* rather than from --color-*. A light
     theme overrides --color-* only; nothing below changes, so the chrome
     cannot accidentally turn light and strand cream text on a cream bar. */
  --chrome-bg:            #021709;
  --chrome-bg-blur:       rgba(2, 23, 9, .88);
  --chrome-bg-deep:       #000000;
  --chrome-surface:       #092917;
  --chrome-ink:           #F7F2E3;
  --chrome-ink-muted:     #A9B5AB;
  --chrome-ink-subtle:    #7C8C80;
  --chrome-border:        #17301F;
  --chrome-border-strong: #27452F;

  /* ---- SEMANTIC COLOUR ------------------------------------------------- */
  /* Dark scheme: --color-primary is the *dominant readable* colour (cream),
     not the brand hue, because on a near-black page emerald text would be
     invisible. The emerald lives in surfaces via --brand-primary. */
  --color-primary:        var(--brand-ink);
  --color-secondary:      var(--brand-accent);
  --color-accent:         var(--brand-accent);

  --color-text:           var(--brand-ink);
  --color-text-muted:     #A9B5AB;
  --color-text-subtle:    #7C8C80;
  --color-text-inverse:   #021709;   /* text placed ON cream/gold           */
  --color-on-accent:      #04150A;   /* text on a gold button               */

  --color-bg:             var(--brand-primary-deep);
  --color-bg-alt:         #05200C;      /* section banding                   */
  --color-bg-tint:        var(--brand-primary-soft);
  --color-bg-inverse:     #000000;      /* footer, top bar                   */

  --color-border:         #17301F;
  --color-border-strong:  #27452F;

  --color-success:        #4FBF7F;
  --color-success-bg:     #0A2416;
  --color-warning:        #E0A93B;
  --color-warning-bg:     #241C08;
  --color-error:          #E4675E;
  --color-error-bg:       #2A100E;

  /* ---- TYPOGRAPHY ------------------------------------------------------ */
  --font-display: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --font-body:    Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Fluid type scale — clamp() so nothing needs breakpoint overrides. */
  --fs-display: clamp(2.6rem, 1.6rem + 3.4vw, 4.4rem);
  --fs-h1:      clamp(2.1rem, 1.5rem + 2.2vw, 3.2rem);
  --fs-h2:      clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem);
  --fs-h3:      clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem);
  --fs-lead:    clamp(1.02rem, 0.98rem + 0.35vw, 1.2rem);
  --fs-body:    1rem;
  --fs-sm:      0.9rem;
  --fs-xs:      0.79rem;

  --lh-tight:   1.14;
  --lh-snug:    1.32;
  --lh-normal:  1.65;

  --ls-tight:   -0.021em;
  --ls-wide:    0.14em;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;

  /* ---- SPACING (4px base) ---------------------------------------------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 2.5rem;   --sp-8: 3rem;
  --sp-9: 4rem;     --sp-10: 5rem;    --sp-11: 6.5rem;  --sp-12: 8rem;

  --section-y:   clamp(3.5rem, 2rem + 5vw, 6.5rem);
  --container:   1240px;
  --container-narrow: 820px;
  --gutter:      clamp(1.15rem, 0.6rem + 2vw, 2.5rem);

  /* ---- RADIUS ---------------------------------------------------------- */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   22px;
  --r-pill: 999px;

  /* ---- ELEVATION -------------------------------------------------------
     On a near-black page a soft grey shadow is invisible, so depth comes
     from a deeper black plus a faint light edge instead. */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .40);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, .45);
  --shadow-md: 0 10px 28px rgba(0, 0, 0, .50);
  --shadow-lg: 0 20px 56px rgba(0, 0, 0, .60);

  /* ---- MOTION ---------------------------------------------------------- */
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --dur-fast:  140ms;
  --dur:       220ms;
  --dur-slow:  380ms;

  /* ---- LAYERS ---------------------------------------------------------- */
  --z-header: 100;
  --z-drawer: 200;
  --z-overlay: 190;
  /* Scroll buttons: above the Ask Almeer chat launcher (60) so they are always
     reachable, but below the drawer overlay (190) so an open menu covers them
     rather than floating on top of it. */
  --z-float: 80;

  /* ---- COMPONENT SIZES ------------------------------------------------- */
  --topbar-h: 40px;
  --header-h: 76px;
  --header-h-compact: 64px;
}

/* Users who ask for less motion get none of it. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
}