/* Bluebird Design System — CSS Variables
   Source: ued-redesign/03-ui-spec.md
   Rule: Never hardcode hex/px values in component files. Reference these tokens only. */

:root {
  /* === Brand === */
  --color-ink:            #0B2942;
  --color-bluebird:       #1E6FE8;
  --color-bluebird-hover: #1559C4;
  --color-sky:            #5BA8F5;
  --color-mist:           #EAF2FD;

  /* === Capital — reserved for money/profit emphasis === */
  --color-capital:        #C8951F;
  --color-capital-soft:   #F5E9CC;

  /* === Neutral (cool slate — intentional departure from warm #f5f4f0) === */
  --n0:   #FFFFFF;  --n50:  #F7F9FC;  --n100: #EEF2F8;
  --n200: #E3E9F2;  --n300: #D2DBE8;  --n400: #A9B6C8;
  --n500: #7A8AA0;  --n600: #5A6B82;  --n700: #3A4A60;
  --n800: #1E2E44;  --n900: #0B2942;

  /* === Semantic — financial positive/negative === */
  --profit-bg:     #E9F6EF;  --profit-border: #A7D9BE;
  --profit-text:   #15703F;  --profit-solid:  #1A7F4B;
  --loss-bg:       #FBEBEA;  --loss-border:   #F0BAB5;
  --loss-text:     #B23A30;  --loss-solid:    #D1453B;
  --warn-bg:       #FEF6E7;  --warn-border:   #F7DDA6;
  --warn-text:     #8A5C00;  --warn-solid:    #D98A0B;
  --info-bg:       #EAF2FD;  --info-border:   #B9D5F8;
  --info-text:     #1559C4;  --info-solid:    #1E6FE8;

  /* === Semantic surface/text/border === */
  --bg-page:     var(--n50);
  --bg-subtle:   var(--n100);
  --bg-surface:  var(--n0);
  --bg-elevated: var(--n0);
  --bg-overlay:  rgba(11,41,66,.45);
  --bg-selected: var(--color-mist);
  --bg-inverse:  var(--color-ink);

  --text-primary:   var(--n900);
  --text-secondary: var(--n600);
  --text-tertiary:  var(--n500);
  --text-disabled:  var(--n400);
  --text-inverse:   var(--n0);
  --text-brand:     var(--color-bluebird);
  --text-money:     var(--color-capital);
  --text-danger:    var(--loss-text);

  --border-subtle:  var(--n200);
  --border-default: var(--n300);
  --border-strong:  var(--n400);
  --border-brand:   var(--color-bluebird);
  --border-danger:  var(--loss-border);

  --it-primary:       var(--color-bluebird);
  --it-primary-hover: var(--color-bluebird-hover);
  --it-secondary:     var(--n0);
  --it-ghost-hover:   var(--n100);
  --it-danger:        var(--loss-solid);
  --focus-ring:       var(--color-bluebird);

  /* === Typography === */
  --font-display: "Geist","Plus Jakarta Sans",-apple-system,"PingFang SC","Noto Sans SC",sans-serif;
  --font-body:    "Inter",-apple-system,BlinkMacSystemFont,"PingFang SC","Noto Sans SC",sans-serif;
  --font-mono:    "Geist Mono","SF Mono","JetBrains Mono",ui-monospace,monospace;

  /* === Spacing (4px base) === */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px;  --sp-8: 32px;  --sp-12: 48px;

  /* === Radius === */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-full: 9999px;

  /* === Shadow === */
  --shadow-xs: 0 1px 2px rgba(11,41,66,.05);
  --shadow-sm: 0 1px 3px rgba(11,41,66,.08);
  --shadow-md: 0 4px 10px rgba(11,41,66,.08);
  --shadow-lg: 0 12px 28px rgba(11,41,66,.12);
  --shadow-xl: 0 20px 40px rgba(11,41,66,.16);

  /* === Duration === */
  --dur-fast:   100ms;
  --dur-normal: 180ms;
  --dur-slow:   280ms;
  --ease-out:   cubic-bezier(0,0,.2,1);
  --ease-in:    cubic-bezier(.4,0,1,1);
  --ease-inout: cubic-bezier(.4,0,.2,1);
}

/* Dark mode */
[data-theme="dark"] {
  --bg-page:    #0A1A2B; --bg-subtle:   #0E2031;
  --bg-surface: #13283C; --bg-elevated: #1B3349;
  --bg-overlay: rgba(0,0,0,.6); --bg-selected: #16304A;
  --text-primary:   #E8EFF7; --text-secondary: #AEBDD0;
  --text-tertiary:  #7A8AA0; --text-brand:     #5BA8F5;
  --text-money:     #E0B252;
  --border-subtle:  #1B3349; --border-default: #274159; --border-strong: #3A5874;
  --it-primary:     #3B82F6; --it-ghost-hover: #16304A;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}