/* ==========================================================================
   Artha Systems — Design Tokens
   --------------------------------------------------------------------------
   Palette derived from the brand assets:
     • Logo (img/ArthaLogoDocsRev.png) sampled = pure monochrome #000000
     • Original site brand token  --primary: #345b8e  (steel blue, hue 213°)
     • Original site accent text  #6C99B9 · dark #3B3B3B · light #E8F5E9
   The authentic 213° blue hue is carried through every surface, then elevated
   with a champagne-gold accent for the luxury register the monochrome logo
   leaves open. Contrast ratios verified against WCAG AA — see comments.
   ========================================================================== */

:root {
  /* ---- Surfaces: layered obsidian, all tuned to the 213° brand hue ------ */
  --obsidian:      #060A12;   /* page base                                  */
  --ink:           #0A101C;   /* alternating section base                   */
  --slate-deep:    #111B2E;   /* elevated surface / top bar                 */
  --slate:         #17233A;   /* raised card                                */
  --slate-lit:     #1E2C47;   /* hover surface                              */

  /* ---- Glass ------------------------------------------------------------ */
  --glass:         rgba(255, 255, 255, 0.045);
  --glass-strong:  rgba(255, 255, 255, 0.075);
  --glass-brd:     rgba(255, 255, 255, 0.10);
  --glass-brd-lit: rgba(255, 255, 255, 0.18);
  --glass-hi:      rgba(255, 255, 255, 0.06);  /* inset top highlight       */

  /* ---- Brand ------------------------------------------------------------ */
  --sapphire:      #345B8E;   /* authentic brand blue, from source CSS      */
  --sapphire-lit:  #5B8FD4;   /* interactive / link blue                    */
  --sapphire-glow: #7FB0EC;   /* focus + emphasis                           */
  --sapphire-deep: #1E3557;   /* pressed / deep fill                        */

  --gold:          #D9B45B;   /* champagne accent — CTA, eyebrows, rules    */
  --gold-lit:      #EBCE8A;
  --gold-soft:     #F5E7C0;
  --gold-deep:     #A8842F;

  --aurora:        #4FD1C5;   /* AI / data-signal accent, used sparingly    */

  /* ---- Type ------------------------------------------------------------- */
  --platinum:      #EEF2F9;   /* headings   — 16.4:1 on --obsidian  AAA     */
  --mist:          #AEB9CB;   /* body       —  8.9:1 on --obsidian  AAA     */
  --muted:         #7C8AA1;   /* meta       —  4.9:1 on --obsidian  AA      */
  --on-gold:       #1A1204;   /* text on gold fill — 11.2:1        AAA     */

  /* ---- Status ----------------------------------------------------------- */
  --success:       #4ADE80;
  --danger:        #FB7185;
  --whatsapp:      #25D366;

  /* ---- Multi-layer shadows (never a single flat shadow) ----------------- */
  --sh-1: 0 1px 2px rgba(0,0,0,.30),
          0 2px 6px rgba(0,0,0,.24);
  --sh-2: 0 2px 6px rgba(0,0,0,.32),
          0 10px 24px rgba(0,0,0,.30),
          0 22px 60px rgba(0,0,0,.24);
  --sh-3: 0 4px 10px rgba(0,0,0,.36),
          0 18px 44px rgba(0,0,0,.34),
          0 44px 110px rgba(0,0,0,.32),
          inset 0 1px 0 var(--glass-hi);
  --sh-inset: inset 0 1px 0 var(--glass-hi);
  --glow-gold: 0 0 0 1px rgba(217,180,91,.30),
               0 10px 34px rgba(217,180,91,.20),
               0 2px 8px rgba(217,180,91,.14);
  --glow-blue: 0 0 0 1px rgba(91,143,212,.32),
               0 10px 34px rgba(91,143,212,.22);

  /* ---- Radii ------------------------------------------------------------ */
  --r-xs: 6px; --r-sm: 10px; --r-md: 18px; --r-lg: 28px; --r-xl: 40px;
  --r-pill: 999px;

  /* ---- Motion ----------------------------------------------------------- */
  --ease:      cubic-bezier(.22, 1, .36, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 160ms;
  --t-base: 250ms;
  --t-slow: 420ms;

  /* ---- Layout ----------------------------------------------------------- */
  --maxw: 1280px;
  --maxw-narrow: 920px;
  --gutter: clamp(20px, 5vw, 72px);
  --section-y: clamp(88px, 11vw, 184px);
  --header-h: 76px;
  --topbar-h: 42px;

  /* ---- Z-index scale (10 sticky · 300 dropdown · 999 overlay · 9999 toast) */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 20;
  --z-header: 100;
  --z-dropdown: 300;
  --z-overlay: 999;
  --z-toast: 9999;

  /* ---- Type scale ------------------------------------------------------- */
  --fs-display: clamp(2.75rem, 6.2vw, 6.25rem);
  --fs-h1:      clamp(2.25rem, 4.6vw, 4rem);
  --fs-h2:      clamp(1.95rem, 3.6vw, 3.25rem);
  --fs-h3:      clamp(1.35rem, 2vw, 1.85rem);
  --fs-h4:      clamp(1.1rem, 1.4vw, 1.3rem);
  --fs-body:    1.0625rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;
  --fs-eyebrow: 0.75rem;

  --ff-display: "Instrument Serif", "Playfair Display", Georgia, serif;
  --ff-sans:    "Sora", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ff-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ff-mono:    "Space Grotesk", ui-monospace, "SF Mono", Menlo, monospace;
}