/* ==========================================================================
   LOOPERA DESIGN SYSTEM — TOKENS
   Digital Finance · v1.0.0
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {

  /* =========================================================================
     BRAND COLORS
     Primary scale derived from brand blue #0057FF
     ========================================================================= */

  --color-brand-50:  #E5EFFF;
  --color-brand-100: #CCDEFF;
  --color-brand-200: #99BCFF;
  --color-brand-300: #66A0FF;
  --color-brand-400: #3380FF;
  --color-brand-500: #0057FF; /* ← brand primary */
  --color-brand-600: #0047D4;
  --color-brand-700: #0038A9;
  --color-brand-800: #002880;
  --color-brand-900: #001A57;
  --color-brand-950: #000D2E;

  /* =========================================================================
     NEUTRAL COLORS
     ========================================================================= */

  --color-neutral-0:   #FFFFFF;
  --color-neutral-50:  #F8FAFC;
  --color-neutral-100: #F1F5F9;
  --color-neutral-200: #E2E8F0;
  --color-neutral-300: #CBD5E1;
  --color-neutral-400: #94A3B8;
  --color-neutral-500: #64748B;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1E293B;
  --color-neutral-900: #0F172A;
  --color-neutral-950: #080D18;

  /* =========================================================================
     SEMANTIC COLORS — STATUS
     ========================================================================= */

  /* Success */
  --color-success-50:  #ECFDF5;
  --color-success-100: #D1FAE5;
  --color-success-500: #10B981;
  --color-success-600: #059669;
  --color-success-700: #047857;

  /* Warning */
  --color-warning-50:  #FFFBEB;
  --color-warning-100: #FEF3C7;
  --color-warning-500: #F59E0B;
  --color-warning-600: #D97706;
  --color-warning-700: #B45309;

  /* Error / Danger */
  --color-error-50:  #FEF2F2;
  --color-error-100: #FEE2E2;
  --color-error-500: #EF4444;
  --color-error-600: #DC2626;
  --color-error-700: #B91C1C;

  /* Info */
  --color-info-50:  #EFF6FF;
  --color-info-100: #DBEAFE;
  --color-info-500: #3B82F6;
  --color-info-600: #2563EB;
  --color-info-700: #1D4ED8;

  /* =========================================================================
     SEMANTIC TOKENS — LIGHT THEME (default)
     ========================================================================= */

  /* Backgrounds */
  --bg-base:            var(--color-neutral-50);
  --bg-subtle:          var(--color-neutral-100);
  --bg-surface:         var(--color-neutral-0);
  --bg-elevated:        var(--color-neutral-0);
  --bg-overlay:         rgba(15, 23, 42, 0.6);

  /* Brand backgrounds */
  --bg-brand:           var(--color-brand-500);
  --bg-brand-subtle:    var(--color-brand-50);
  --bg-brand-hover:     var(--color-brand-600);
  --bg-brand-active:    var(--color-brand-700);

  /* Status backgrounds */
  --bg-success:         var(--color-success-50);
  --bg-warning:         var(--color-warning-50);
  --bg-error:           var(--color-error-50);
  --bg-info:            var(--color-info-50);

  /* Text */
  --text-primary:       var(--color-neutral-900);
  --text-secondary:     var(--color-neutral-600);
  --text-tertiary:      var(--color-neutral-400);
  --text-disabled:      var(--color-neutral-300);
  --text-inverse:       var(--color-neutral-0);
  --text-brand:         var(--color-brand-600);
  --text-success:       var(--color-success-700);
  --text-warning:       var(--color-warning-700);
  --text-error:         var(--color-error-700);

  /* Borders */
  --border-subtle:      var(--color-neutral-100);
  --border-default:     var(--color-neutral-200);
  --border-strong:      var(--color-neutral-300);
  --border-brand:       var(--color-brand-500);
  --border-success:     var(--color-success-500);
  --border-warning:     var(--color-warning-500);
  --border-error:       var(--color-error-500);

  /* Icons */
  --icon-primary:       var(--color-neutral-700);
  --icon-secondary:     var(--color-neutral-400);
  --icon-brand:         var(--color-brand-500);
  --icon-success:       var(--color-success-600);
  --icon-warning:       var(--color-warning-600);
  --icon-error:         var(--color-error-600);

  /* =========================================================================
     TYPOGRAPHY
     ========================================================================= */

  --font-sans:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:   'SF Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;

  /* Font size scale (Major Third — 1.250) */
  --text-2xs:   0.625rem;   /*  10px */
  --text-xs:    0.75rem;    /*  12px */
  --text-sm:    0.875rem;   /*  14px */
  --text-base:  1rem;       /*  16px */
  --text-lg:    1.125rem;   /*  18px */
  --text-xl:    1.25rem;    /*  20px */
  --text-2xl:   1.5rem;     /*  24px */
  --text-3xl:   1.875rem;   /*  30px */
  --text-4xl:   2.25rem;    /*  36px */
  --text-5xl:   3rem;       /*  48px */
  --text-6xl:   3.75rem;    /*  60px */

  /* Font weight */
  --font-light:      300;
  --font-regular:    400;
  --font-medium:     500;
  --font-semibold:   600;
  --font-bold:       700;
  --font-extrabold:  800;
  --font-black:      900;

  /* Line height */
  --leading-none:    1;
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.45;
  --leading-relaxed: 1.625;
  --leading-loose:   2;

  /* Letter spacing */
  --tracking-tighter: -0.05em;
  --tracking-tight:   -0.025em;
  --tracking-normal:   0em;
  --tracking-wide:     0.025em;
  --tracking-wider:    0.05em;
  --tracking-widest:   0.1em;

  /* =========================================================================
     SPACING SCALE
     8px base grid
     ========================================================================= */

  --space-0:    0px;
  --space-px:   1px;
  --space-0-5:  2px;
  --space-1:    4px;
  --space-1-5:  6px;
  --space-2:    8px;
  --space-2-5:  10px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-7:    28px;
  --space-8:    32px;
  --space-9:    36px;
  --space-10:   40px;
  --space-12:   48px;
  --space-14:   56px;
  --space-16:   64px;
  --space-20:   80px;
  --space-24:   96px;
  --space-32:   128px;

  /* =========================================================================
     BORDER RADIUS
     ========================================================================= */

  --radius-none:   0px;
  --radius-xs:     2px;
  --radius-sm:     4px;
  --radius-md:     6px;
  --radius-lg:     8px;
  --radius-xl:     12px;
  --radius-2xl:    16px;
  --radius-3xl:    24px;
  --radius-full:   9999px;

  /* =========================================================================
     SHADOWS
     ========================================================================= */

  --shadow-xs:  0px 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-sm:  0px 1px 3px rgba(15, 23, 42, 0.1), 0px 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md:  0px 4px 6px rgba(15, 23, 42, 0.07), 0px 2px 4px rgba(15, 23, 42, 0.06);
  --shadow-lg:  0px 10px 15px rgba(15, 23, 42, 0.08), 0px 4px 6px rgba(15, 23, 42, 0.05);
  --shadow-xl:  0px 20px 25px rgba(15, 23, 42, 0.1), 0px 8px 10px rgba(15, 23, 42, 0.05);
  --shadow-2xl: 0px 25px 50px rgba(15, 23, 42, 0.18);
  --shadow-inner: inset 0px 2px 4px rgba(15, 23, 42, 0.06);
  --shadow-brand: 0px 4px 16px rgba(0, 87, 255, 0.24);

  /* =========================================================================
     TRANSITIONS
     ========================================================================= */

  --ease-linear:    linear;
  --ease-in:        cubic-bezier(0.4, 0, 1, 1);
  --ease-out:       cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-75:    75ms;
  --duration-100:   100ms;
  --duration-150:   150ms;
  --duration-200:   200ms;
  --duration-300:   300ms;
  --duration-500:   500ms;

  --transition-base:    all var(--duration-150) var(--ease-in-out);
  --transition-smooth:  all var(--duration-200) var(--ease-out);
  --transition-spring:  all var(--duration-300) var(--ease-spring);

  /* =========================================================================
     Z-INDEX
     ========================================================================= */

  --z-base:       0;
  --z-raised:     10;
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-overlay:    300;
  --z-modal:      400;
  --z-toast:      500;
  --z-tooltip:    600;

  /* =========================================================================
     BREAKPOINTS (reference only — use in media queries)
     ========================================================================= */
  /* sm: 640px | md: 768px | lg: 1024px | xl: 1280px | 2xl: 1536px */
}

/* ============================================================================
   DARK THEME
   ============================================================================ */

[data-theme="dark"],
.dark {

  /* Backgrounds */
  --bg-base:            #080D18;
  --bg-subtle:          #0D1526;
  --bg-surface:         #111C33;
  --bg-elevated:        #172140;
  --bg-overlay:         rgba(8, 13, 24, 0.8);

  /* Brand backgrounds */
  --bg-brand:           var(--color-brand-500);
  --bg-brand-subtle:    rgba(0, 87, 255, 0.12);
  --bg-brand-hover:     var(--color-brand-600);
  --bg-brand-active:    var(--color-brand-700);

  /* Status backgrounds */
  --bg-success:         rgba(16, 185, 129, 0.1);
  --bg-warning:         rgba(245, 158, 11, 0.1);
  --bg-error:           rgba(239, 68, 68, 0.1);
  --bg-info:            rgba(59, 130, 246, 0.1);

  /* Text */
  --text-primary:       #F1F5F9;
  --text-secondary:     #94A3B8;
  --text-tertiary:      #475569;
  --text-disabled:      #334155;
  --text-inverse:       var(--color-neutral-900);
  --text-brand:         var(--color-brand-400);
  --text-success:       var(--color-success-500);
  --text-warning:       var(--color-warning-500);
  --text-error:         var(--color-error-500);

  /* Borders */
  --border-subtle:      rgba(255, 255, 255, 0.04);
  --border-default:     rgba(255, 255, 255, 0.08);
  --border-strong:      rgba(255, 255, 255, 0.16);
  --border-brand:       var(--color-brand-500);
  --border-success:     var(--color-success-500);
  --border-warning:     var(--color-warning-500);
  --border-error:       var(--color-error-500);

  /* Icons */
  --icon-primary:       #CBD5E1;
  --icon-secondary:     #475569;
  --icon-brand:         var(--color-brand-400);
  --icon-success:       var(--color-success-500);
  --icon-warning:       var(--color-warning-500);
  --icon-error:         var(--color-error-500);

  /* Shadows */
  --shadow-xs:  0px 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm:  0px 1px 3px rgba(0, 0, 0, 0.4), 0px 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:  0px 4px 6px rgba(0, 0, 0, 0.35), 0px 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-lg:  0px 10px 15px rgba(0, 0, 0, 0.4), 0px 4px 6px rgba(0, 0, 0, 0.3);
  --shadow-xl:  0px 20px 25px rgba(0, 0, 0, 0.45), 0px 8px 10px rgba(0, 0, 0, 0.3);
  --shadow-2xl: 0px 25px 50px rgba(0, 0, 0, 0.6);
  --shadow-brand: 0px 4px 24px rgba(0, 87, 255, 0.35);
}