/* css/tokens.css */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=DM+Sans:wght@400;500;600&display=swap');

:root {
  /* Bakgrund */
  --bg:           #F2F8F9;
  --surface:      #FFFFFF;
  --border:       #D4E6E8;

  /* Accent */
  --accent:       #1F5E66;
  --accent-mid:   #2E7A82;
  --accent-light: #3D9AA4;
  --accent-2:     #2E6644;
  --accent-subtle:#E8F4F5;

  /* Text */
  --text-1:       #122628;
  --text-2:       #506A70;

  /* Semantisk */
  --gain:         #22C55E;
  --loss:         #EF4444;
  --neutral:      #6B7280;
  --warning:      #F59E0B;

  /* Typografi */
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-ui:      'DM Sans', system-ui, sans-serif;

  /* Spacing */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;

  /* Radier */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;

  /* Skugga */
  --shadow-sm: 0 1px 3px rgba(18,38,40,.06), 0 1px 2px rgba(18,38,40,.04);
  --shadow-md: 0 4px 12px rgba(18,38,40,.08), 0 2px 4px rgba(18,38,40,.04);

  /* ─── Extended typography ───────────────────────────────────── */
  --font-mono:   'JetBrains Mono', 'Menlo', monospace;
  --text-2xl:    24px;

  /* ─── Animation durations ───────────────────────────────────── */
  --dur-fast:    120ms;
  --dur-normal:  220ms;
  --dur-slow:    350ms;
  --dur-xslow:   500ms;
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:    cubic-bezier(0.0, 0, 0.2, 1);

  /* ─── Z-index scale ─────────────────────────────────────────── */
  --z-base:      1;
  --z-dropdown:  100;
  --z-modal:     200;
  --z-toast:     300;
  --z-tooltip:   400;

  /* ─── Overlay & focus ───────────────────────────────────────── */
  --overlay-bg:  rgba(18, 38, 40, 0.6);
  --focus-ring:  0 0 0 2px var(--bg), 0 0 0 4px var(--accent);

  /* ─── Extended shadows ──────────────────────────────────────── */
  --shadow-lg:   0 12px 40px rgba(18, 38, 40, 0.14), 0 4px 12px rgba(18, 38, 40, 0.08);

  /* ─── Extended surfaces ─────────────────────────────────────── */
  --surface-3:   #E4F1F3;

  /* ─── Semantic subtle fills ─────────────────────────────────── */
  --gain-subtle:    rgba(34, 197, 94, 0.12);
  --loss-subtle:    rgba(239, 68, 68, 0.12);
  --warning-subtle: rgba(245, 158, 11, 0.12);
  --accent-subtle-2: rgba(31, 94, 102, 0.08);

  /* Typografiskala */
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 16px;
  --text-md: 15px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-3xl: 28px;

  /* Semantiska alias */
  --positive:       var(--gain);
  --negative:       var(--loss);
  --primary:        var(--accent);
  --primary-light:  #3D9AA4;
  --surface-elevated: #EEF8FA;
  --surface-2:      var(--surface-elevated);

  /* Radier alias */
  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);
  --radius-lg: var(--r-lg);
  --radius-xl: var(--r-xl);

  /* Nav */
  --nav-height: 64px;

  /* Cashflow */
  --cashflow-income:        #2E7A82;
  --cashflow-income-fill:   rgba(46, 122, 130, 0.15);
  --cashflow-expense:       #EF4444;
  --cashflow-expense-fill:  rgba(239, 68, 68, 0.12);
  --cashflow-savings-pos:   rgba(16, 185, 129, 0.18);
  --cashflow-savings-neg:   rgba(239, 68, 68, 0.25);

  /* Kategorifärger */
  --cat-mat:               #F59E0B;
  --cat-transport:         #3B82F6;
  --cat-boende:            #8B5CF6;
  --cat-handel:            #EC4899;
  --cat-noje:              #06B6D4;
  --cat-halsa:             #EF4444;
  --cat-sparande:          #10B981;
  --cat-prenumerationer:   #6366F1;
  --cat-swish:             #8B97A6;
  --cat-ovrigt:            #8B97A6;
}

[data-theme="dark"] {
  --bg:              #0D1E21;
  --surface:         #142A2E;
  --border:          #243F45;
  --accent:          #2E7A82;
  --accent-2:        #4A7A5A;
  --accent-subtle:   #1A3538;
  --text-1:          #E4EEEF;
  --text-2:          #7A9EA5;
  --surface-elevated:#1C3538;
  --primary-light:   #4AADB8;
  --surface-3:    #0A191C;
  --shadow-lg:    0 12px 40px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
  --focus-ring:   0 0 0 2px var(--bg), 0 0 0 4px var(--accent-light);
  --overlay-bg:   rgba(0, 0, 0, 0.7);
}