/* ============================================
       BÄRSPÅR — Nordic Daylight Design System
       Ljust · professionellt · karaktärsfullt
       (mobil-först, revisionsklart)
       ============================================ */

    /* --- Design Tokens --- */
    :root {
      /* Brand green scale (forest = primärgrön) */
      --forest-900: #0E261C;
      --forest-800: #123528;
      --forest-700: #1B4332;  /* primär */
      --forest-600: #2D6A4F;
      --forest-500: #40916C;
      --forest-400: #57A77E;
      --forest-300: #A7D7C0;
      --forest-200: #D6ECE0;
      --forest-100: #E9F4EE;
      --forest-50:  #F2F9F5;

      /* Berry accents (för kategorikodning / data) */
      --blueberry: #3B5BA5;
      --lingon:    #C0392B;
      --cloudberry:#C58A1E;
      --raspberry: #C2185B;

      /* Neutrals (bark = ink → ytor → bakgrund) */
      --bark-900: #16201A;  /* primär text */
      --bark-800: #25302A;
      --bark-700: #3B4842;  /* stark sekundär */
      --bark-500: #6B776F;  /* dämpad text */
      --bark-400: #8C968F;
      --bark-300: #C6CEC8;  /* divider / hairline-strong */
      --bark-200: #E5E9E3;  /* ljus yta / sekundär knapp */
      --bark-100: #EEF1EB;
      --bark-50:  #F6F5F0;  /* app-bakgrund */

      /* Funktionellt */
      --warning: #C58A1E;
      --danger:  #C0392B;
      --success: #2D8A5E;

      /* Semantiska alias */
      --bg:         #F6F5F0;
      --surface:    #FFFFFF;
      --surface-2:  #F1EFE8;
      --border:     rgba(20,35,25,0.09);
      --border-strong: rgba(20,35,25,0.16);
      --ink:        #16201A;
      --ink-2:      #4C5852;
      --ink-3:      #8C968F;
      --primary:    #1B4332;
      --primary-600:#2D6A4F;
      --primary-tint:#E9F4EE;
      --on-primary: #FFFFFF;

      /* Shadows (ljusa, mjuka) */
      --shadow-sm: 0 1px 2px rgba(20,35,25,0.06), 0 1px 1px rgba(20,35,25,0.04);
      --shadow-md: 0 4px 16px rgba(20,35,25,0.08), 0 1px 3px rgba(20,35,25,0.05);
      --shadow-lg: 0 12px 32px rgba(20,35,25,0.12), 0 2px 8px rgba(20,35,25,0.06);
      --shadow-xl: 0 24px 56px rgba(20,35,25,0.16);

      /* Radii (stramt) */
      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-lg: 16px;
      --radius-xl: 22px;
      --radius-full: 9999px;

      /* Transitions */
      --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
      --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);

      /* Glass (header/nav backdrop) */
      --glass-bg: rgba(255,255,255,0.82);
      --glass-border: rgba(20,35,25,0.08);
      --glass-highlight: rgba(255,255,255,0.7);

      /* Layout-höjder (synkas med #page-add height-calc) */
      --h-header: 52px;
      --h-userbar: 40px;
      --h-nav: 64px;

      --maxw: 600px;
    }

    /* --- Reset & Base --- */
    * { box-sizing: border-box; margin: 0; padding: 0; }
    *::before, *::after { box-sizing: border-box; }

    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.4;} }
    @keyframes scaleIn { from{opacity:0;transform:scale(0.96);} to{opacity:1;transform:scale(1);} }
    @keyframes navPop { 0%{transform:scale(0.8);} 60%{transform:scale(1.12);} 100%{transform:scale(1);} }
    @keyframes sheen { 0%{background-position:-150% 0;} 100%{background-position:250% 0;} }

    html { -webkit-text-size-adjust: 100%; }

    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
      background: var(--bg);
      color: var(--ink);
      min-height: 100vh;
      min-height: 100dvh;
      padding-bottom: calc(var(--h-nav) + env(safe-area-inset-bottom, 0px));
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      line-height: 1.5;
      letter-spacing: -0.011em;
      overscroll-behavior-y: none;
    }

    body.booting #auth-page,
    body.booting .app-container { display: none !important; }