/* =========================================================
   HAKI Design Tokens
   Mapped from HAKI Brand Guide v1.0 (24-03-2026)
   Default: dark mode (matches Frank's hero mockup 27-04-2026)
   Brand-Independence rule: HAKI's own navy base, NOT Plexaris near-black.
   ========================================================= */

:root,
[data-theme="dark"] {
  /* ---- Core brand palette ---- */
  --haki-navy-deep:   #8F1A2E;
  --haki-navy:        #1B2B4B;
  --haki-navy-mid:    #243B5E;
  --haki-charcoal:    #2D3748;

  --haki-gold-dark:   #9A7E32;
  --haki-gold:        #C8A84E;
  --haki-gold-light:  #E8D08E;

  --plexaris-teal:        #1A8A70;
  --plexaris-teal-light:  #2BC484;

  /* ---- Semantic ---- */
  --sem-accept:    #16A34A;
  --sem-reject:    #DC2626;
  --sem-inperson:  #F59E0B;
  --sem-info:      #2563EB;

  /* ---- Neutrals ---- */
  --n-white:       #FFFFFF;
  --n-offwhite:    #F7F8FA;
  --n-grey-light:  #E8EBF0;
  --n-black:       #111827;

  /* ---- Surface tokens (DARK default, mockup-aligned) ---- */
  --bg-page:       #0B1426;            /* deep navy base, HAKI own */
  --bg-page-tint:  #0F1A2E;
  --bg-surface:    rgba(255,255,255,0.03);
  --bg-elevated:   rgba(255,255,255,0.05);
  --bg-card:       rgba(15,26,46,0.8);
  --bg-card-hover: rgba(36,59,94,0.55);
  --bg-inverse:    var(--n-white);

  --text-primary:    #F4F6FB;
  --text-secondary:  #B6C0D6;
  --text-tertiary:   #7E8AA3;
  --text-muted:      #5A6478;
  --text-on-dark:    var(--n-white);
  --text-on-light:   var(--haki-navy);

  --border-subtle:  rgba(232, 208, 142, 0.12);
  --border-medium:  rgba(232, 208, 142, 0.22);
  --border-strong:  rgba(232, 208, 142, 0.40);

  --accent-primary:        var(--haki-gold);
  --accent-primary-hover:  var(--haki-gold-light);
  --accent-secondary:      var(--plexaris-teal-light);
  --link:                  var(--haki-gold-light);

  /* Signature CTA gradient (teal to navy), seen in HAKI sign-in screen */
  --gradient-cta:    linear-gradient(135deg, #1A8A70 0%, #1B2B4B 100%);
  --gradient-hero:   radial-gradient(120% 90% at 100% 0%, rgba(43,196,132,0.18) 0%, transparent 55%),
                     radial-gradient(80% 60% at 0% 100%, rgba(200,168,78,0.08) 0%, transparent 60%);
  --gradient-text:   linear-gradient(90deg, var(--haki-gold-light) 0%, var(--plexaris-teal-light) 100%);

  --glow-color:      rgba(43, 196, 132, 0.18);

  --shadow-sm:  0 1px 2px rgba(0,0,0,0.40);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.50);
  --shadow-lg:  0 12px 32px rgba(0,0,0,0.60);

  --nav-bg:     rgba(11, 20, 38, 0.78);

  --toggle-icon-show: none;   /* sun shown in light mode */
  --toggle-icon-hide: block;  /* moon shown in dark mode */
}

/* ---- LIGHT mode overrides ---- */
[data-theme="light"] {
  --bg-page:       var(--n-offwhite);
  --bg-page-tint:  var(--n-white);
  --bg-surface:    var(--n-white);
  --bg-elevated:   var(--n-white);
  --bg-card:       var(--n-white);
  --bg-card-hover: #F1F4FA;
  --bg-inverse:    var(--haki-navy);

  --text-primary:    var(--haki-navy);
  --text-secondary:  var(--haki-charcoal);
  --text-tertiary:   #5A6478;
  --text-muted:      #8A95AB;
  --text-on-dark:    var(--n-white);
  --text-on-light:   var(--haki-navy);

  --border-subtle:  rgba(27,43,75,0.10);
  --border-medium:  rgba(27,43,75,0.18);
  --border-strong:  rgba(27,43,75,0.30);

  --accent-primary:        var(--haki-gold-dark);
  --accent-primary-hover:  var(--haki-gold);
  --accent-secondary:      var(--plexaris-teal);
  --link:                  var(--haki-navy-mid);

  --gradient-hero:  radial-gradient(120% 90% at 100% 0%, rgba(26,138,112,0.10) 0%, transparent 55%),
                    radial-gradient(80% 60% at 0% 100%, rgba(154,126,50,0.06) 0%, transparent 60%);

  --glow-color:    rgba(26,138,112,0.18);

  --shadow-sm:  0 1px 2px rgba(27,43,75,0.06);
  --shadow-md:  0 4px 16px rgba(27,43,75,0.10);
  --shadow-lg:  0 12px 32px rgba(27,43,75,0.14);

  --nav-bg:        rgba(247, 248, 250, 0.85);

  --toggle-icon-show: block;
  --toggle-icon-hide: none;
}

/* ---- Geometric tokens (mode-independent) ---- */
:root {
  --radius-card:    8px;
  --radius-btn:     6px;
  --radius-modal:   12px;
  --radius-pill:    999px;

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  16px;
  --space-4:  24px;
  --space-5:  32px;
  --space-6:  48px;
  --space-7:  64px;
  --space-8:  96px;

  --container:    1200px;
  --container-md: 880px;
  --container-sm: 680px;

  --font-display: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'SF Mono', Menlo, Consolas, monospace;
}