/* =========================================================
   Oophar Design Tokens — derived from Orgnal.png logo
   Primary Navy  : #2C3E6B
   Primary Coral : #FF5A6E
   Light Pink    : #F8C6CD
   ========================================================= */

:root {
  /* Brand */
  --clr-navy:        #1e2d52;
  --clr-navy-dark:   #141f3a;
  --clr-navy-light:  #2C3E6B;
  --clr-coral:       #FF3D55;
  --clr-coral-dark:  #d42e44;
  --clr-coral-light: #ff6b7d;
  --clr-pink-soft:   #F8C6CD;
  --clr-pink-pale:   #fff0f2;

  /* Neutrals — Light Mode */
  --clr-bg:          #ffffff;
  --clr-bg-alt:      #f9f9fb;
  --clr-bg-card:     #ffffff;
  --clr-surface:     #f4f5f8;
  --clr-border:      #e2e4ea;
  --clr-text:        #1a1d2e;
  --clr-text-muted:  #6b7280;
  --clr-text-light:  #9ca3af;
  --clr-heading:     #111827;

  /* Semantic */
  --clr-success:     #16a34a;
  --clr-warning:     #d97706;
  --clr-error:       #dc2626;
  --clr-info:        #2563eb;

  /* Typography */
  --font-sans:       'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-display:    'Poppins', 'Inter', sans-serif;
  --font-size-xs:    0.75rem;
  --font-size-sm:    0.875rem;
  --font-size-base:  1rem;
  --font-size-md:    1.125rem;
  --font-size-lg:    1.25rem;
  --font-size-xl:    1.5rem;
  --font-size-2xl:   1.875rem;
  --font-size-3xl:   2.25rem;
  --font-size-4xl:   3rem;
  --line-height:     1.6;

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-7:  1.75rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(30,45,82,.10), 0 1px 2px rgba(30,45,82,.07);
  --shadow-md:  0 4px 16px rgba(30,45,82,.14), 0 2px 6px rgba(30,45,82,.09);
  --shadow-lg:  0 12px 36px rgba(30,45,82,.18), 0 4px 14px rgba(30,45,82,.12);
  --shadow-xl:  0 24px 60px rgba(30,45,82,.22);
  --shadow-coral: 0 6px 24px rgba(255,61,85,.38);

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* Layout */
  --container-max:  1280px;
  --container-pad:  1rem;
  --header-height:  64px;
  --trust-bar-h:    40px;
  --z-header:       100;
  --z-modal:        200;
  --z-toast:        300;
  --z-overlay:      110;
}

/* ---- Dark Mode ---- */
[data-theme="dark"] {
  --clr-bg:         #0f1117;
  --clr-bg-alt:     #161b27;
  --clr-bg-card:    #1c2235;
  --clr-surface:    #222840;
  --clr-border:     #2e3650;
  --clr-text:       #e8eaf0;
  --clr-text-muted: #9aa3b8;
  --clr-text-light: #6b7590;
  --clr-heading:    #f0f2f8;
  --shadow-sm:  0 1px 3px rgba(0,0,0,.3);
  --shadow-md:  0 4px 12px rgba(0,0,0,.4);
  --shadow-lg:  0 10px 30px rgba(0,0,0,.5);
}