/* ─────────────────────────────────────────
   RIVYT BRAND TOKENS (Oviya, 2026-04)
   New components should reference these --color-* variables directly.
   Legacy --amber / --navy / --bg / --text etc. remain for compatibility
   and now hold sage / brand-navy / parchment / ink values.
───────────────────────────────────────── */
:root {
  --color-primary:        #152540;
  --color-primary-mid:    #2E4E72;
  --color-primary-light:  #1E3860;

  --color-accent:         #8FAF88;
  --color-accent-dark:    #4A7A43;
  --color-accent-muted:   rgba(143, 175, 136, 0.15);

  --color-background:     #152540;      /* app is dark-mode */
  --color-background-alt: #1E3860;
  --color-surface:        #1A2E4A;

  --color-text-primary:   #F4F2EC;
  --color-text-secondary: #A8BBCC;
  --color-text-muted:     #6A8099;
  --color-text-inverse:   #10161E;

  --color-border:         rgba(244, 242, 236, 0.1);
  --color-border-strong:  rgba(244, 242, 236, 0.2);
}

:root {
  /* ── Colors (exact design spec) ── */
  --navy:           #152540;
  --navy-mid:       #1E2A3C;
  --navy-light:     #2A3A52;
  --amber:          #8FAF88;
  --amber-hover:    #4A7A43;
  --amber-light:    rgba(143,175,136,0.12);
  --amber-pale:     rgba(143,175,136,0.12);
  --amber-border:   rgba(143,175,136,0.28);
  --accent:         #8FAF88;

  --bg:             #EEECEA;
  --bg-elev:        #F4F2EF;
  --bg-card:        #FFFFFF;
  --card:           #FFFFFF;
  --card-sub:       #F8F7F5;

  --border:         #E5E7EB;
  --border-strong:  #D1D5DB;
  --border-focus:   #8FAF88;

  --text:           #1A1A1A;
  --text-primary:   #1A1A1A;
  --text-mid:       #42526A;
  --text-secondary: #6B7280;
  --text-muted:     #9CA3AF;
  --text-mute:      #9CA3AF;
  --text-inv:       #FFFFFF;

  --success:        #22C55E;
  --success-bg:     #E8F5EE;
  --success-text:   #1E6B45;
  --error:          #EF4444;
  --error-bg:       #FCECEA;
  --error-text:     #B02A1E;

  --overlay:        rgba(20,28,40,0.6);
  --sidebar-bg:     #152540;
  --sidebar-border: rgba(255,255,255,0.06);
  --sidebar-text:   rgba(255,255,255,0.55);
  --sidebar-text-strong: #ffffff;
  --sidebar-text-muted: rgba(255,255,255,0.40);
  --sidebar-hover:  rgba(255,255,255,0.07);
  --sidebar-section-border: rgba(255,255,255,0.08);

  /* ── Typography ── */
  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Fira Code', monospace;

  /* Design spec type scale */
  --text-micro:   10px;
  --text-caption:  12px;
  --text-label:    14px;
  --text-body:     16px;
  --text-card:     20px;
  --text-section:  24px;
  --text-heading:  32px;
  --text-hero:     48px;

  /* Legacy aliases (used throughout existing CSS) */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-lg:   18px;
  --text-xl:   24px;
  --text-2xl:  36px;

  --w-regular:  400;
  --w-medium:   500;
  --w-semi:     600;
  --w-bold:     700;

  /* ── Spacing (design spec: 4 8 12 16 24 32 48 64) ── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-8:  48px;
  --sp-10: 64px;
  --sp-12: 3rem;
  --sp-16: 4rem;

  /* ── Radii ── */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   20px;
  --r-pill: 999px;

  /* ── Shadows (design spec) ── */
  --sh-card:     0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --sh-elevated: 0 4px 12px rgba(0,0,0,0.08);
  --sh-sm:  0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --sh-md:  0 4px 12px rgba(0,0,0,0.08);
  --sh-lg:  0 4px 16px rgba(20,28,40,0.10), 0 8px 40px rgba(20,28,40,0.08);
  --sh-btn: inset 0 1px 0 rgba(255,255,255,0.20), 0 1px 3px rgba(20,28,40,0.22), 0 2px 10px rgba(143,175,136,0.18);
  --sh-btn-hover: inset 0 1px 0 rgba(255,255,255,0.24), 0 2px 6px rgba(20,28,40,0.26), 0 4px 18px rgba(143,175,136,0.26);
  --sh-btn-active: inset 0 2px 4px rgba(20,28,40,0.18);

  /* ── Transitions ── */
  --t-fast: 100ms ease;
  --t-base: 200ms ease;
  --t-slow: 360ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Layout ── */
  --sidebar-w:    260px;
  --bottom-nav-h: 64px;
  --header-h:     56px;
  --content-max:  860px;
}

/* ─────────────────────────────────────────
   DARK THEME
───────────────────────────────────────── */
[data-theme="dark"] {
  --bg:             #152540;
  --bg-elev:        #1E3860;
  --bg-card:        #1A2E4A;
  --card:           #1A2E4A;
  --card-sub:       #1E3860;

  --border:         rgba(244,242,236,0.10);
  --border-strong:  rgba(244,242,236,0.18);

  --text:           #F4F2EC;
  --text-primary:   #F4F2EC;
  --text-mid:       rgba(244,242,236,0.80);
  --text-secondary: rgba(244,242,236,0.72);
  --text-muted:     rgba(244,242,236,0.50);
  --text-mute:      rgba(244,242,236,0.62);
  --text-inv:       #10161E;

  /* Keep amber accent intact for brand continuity */
  --amber-light:    rgba(143,175,136,0.16);
  --amber-pale:     rgba(143,175,136,0.14);
  --amber-border:   rgba(143,175,136,0.36);

  --success-bg:     rgba(34,197,94,0.14);
  --success-text:   #5BE39A;
  --error-bg:       rgba(239,68,68,0.14);
  --error-text:     #FCA5A5;

  --overlay:        rgba(0,0,0,0.70);

  /* Sidebar blends into bg in dark mode */
  --sidebar-bg:     #1E3860;
  --sidebar-border: rgba(244,242,236,0.08);
  --sidebar-text:   rgba(244,242,236,0.65);
  --sidebar-text-strong: #F4F2EC;
  --sidebar-text-muted: rgba(244,242,236,0.45);
  --sidebar-hover:  rgba(244,242,236,0.06);
  --sidebar-section-border: rgba(244,242,236,0.08);

  --sh-card:     0 1px 3px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.25);
  --sh-elevated: 0 4px 12px rgba(0,0,0,0.45);
  --sh-sm:       0 1px 3px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.25);
  --sh-md:       0 4px 12px rgba(0,0,0,0.45);
  --sh-lg:       0 4px 16px rgba(0,0,0,0.55), 0 8px 40px rgba(0,0,0,0.35);
}

html { background: var(--bg); }