/* ============================================================
   Monetail Design System — core tokens
   Single source of truth for colors, type, spacing, radii.
   ============================================================ */

:root {
  /* ── Type families ── */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
  --font-mono: "SF Mono", "Fira Code", monospace;

  /* ── Type scale (pt) ── */
  --text-xxl: 28px;  /* Display      — weight 700, tracking -0.02em, lh 1.1 */
  --text-xl:  20px;  /* Section head — weight 600, tracking -0.01em */
  --text-lg:  17px;  /* Title        — weight 600 */
  --text-md:  14px;  /* Body         — weight 400/500 */
  --text-sm:  12px;  /* Caption / label */
  --text-xs:  10px;  /* Micro label / timestamp / badge */

  /* ── Brand Primary (indigo) ── */
  --primary-lighter: #a39cff;
  --primary-light:   #6c63ff;
  --primary-main:    #4b43d6;
  --primary-dark:    #3a33b0;
  --primary-darker:  #2a2580;

  /* ── Secondary ── */
  --secondary-lighter: #c4bfff;
  --secondary-light:   #c4bfff;
  --secondary-main:    #a39cff;
  --secondary-dark:    #6c63ff;
  --secondary-darker:  #4b43d6;

  /* ── Financial semantic ── */
  --income:  #2FC0A0;
  --expense: #FF7A8A;
  --accent-orange: #FF9F0A;

  /* ── States ── */
  --state-error:   #ef4444;
  --state-success: #22c55e;
  --state-warning: #eab308;
  --state-info:    #6c63ff;

  /* ── Gray scale ── */
  --gray-50:  #F7F7F7;
  --gray-100: #EDEDED;
  --gray-200: #DFDFDF;
  --gray-300: #C8C8C8;
  --gray-400: #ADADAD;
  --gray-500: #A1A1A1;
  --gray-600: #888888;
  --gray-700: #7B7B7B;
  --gray-800: #676767;
  --gray-900: #545454;

  /* ── Spacing scale (pt) ── */
  --space-xs: 2px;
  --space-sm: 4px;
  --space-sm-plus: 6px;
  --space-md: 8px;
  --space-md-plus: 10px;
  --space-lg: 12px;
  --space-lg-plus: 14px;
  --space-xl: 16px;
  --space-xl-plus: 18px;
  --space-xxl: 20px;
  --space-xxxl: 24px;
  --space-xxxxl: 32px;
  --space-x5l: 40px;
  --space-x6l: 60px;

  /* ── Corner radius (pt) ── */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-xxl: 18px;
  --radius-xxxl: 24px;
  --radius-xxxxl: 28px;
  --radius-x5l: 32px;

  /* ── Motion ── */
  --dur-short: 0.2s;    /* field state transitions */
  --dur-regular: 0.3s;  /* standard interactions */
  --dur-long: 0.45s;    /* page / sheet transitions */
}

/* ── Dark mode (default & fallback) ── */
:root {
  --bg:           #050506;
  --bg-2:         #0d0d12;
  --card:         rgba(255,255,255,0.10);
  --card-border:  rgba(255,255,255,0.13);
  --hairline:     rgba(255,255,255,0.14);
  --text-primary: rgba(255,255,255,0.95);
  --text-secondary: rgba(255,255,255,0.62);
  --text-tertiary:  rgba(255,255,255,0.50);
  --overlay-light:  rgba(255,255,255,0.06);
  --overlay-medium: rgba(255,255,255,0.09);
  --overlay-strong: rgba(255,255,255,0.11);
  --primary-display: #6c63ff;
  --income-display:  #2FC0A0;
  --expense-display: #FF7A8A;
  --orange-display:  #FF9F0A;
  --chip-bg:         rgba(255,255,255,0.12);
  --section-divider: rgba(255,255,255,0.08);
}

/* ── Light mode (follows OS setting) ── */
@media (prefers-color-scheme: light) {
  :root {
    --bg:           #E8E8EB;
    --bg-2:         #d8d8dc;
    --card:         rgba(255,255,255,0.90);
    --card-border:  rgba(0,0,0,0.09);
    --hairline:     rgba(0,0,0,0.12);
    --text-primary: rgba(0,0,0,0.92);
    --text-secondary: rgba(0,0,0,0.62);
    --text-tertiary:  rgba(0,0,0,0.58);
    --overlay-light:  rgba(0,0,0,0.07);
    --overlay-medium: rgba(0,0,0,0.09);
    --overlay-strong: rgba(0,0,0,0.11);
    --primary-display: #4b43d6;
    --income-display:  #0C7363;
    --expense-display: #BC4329;
    --orange-display:  #D76D00;
    --chip-bg:         rgba(0,0,0,0.08);
    --section-divider: rgba(0,0,0,0.06);
  }
}