/* =========================================================================
   1010monky design system - TOKENS
   Alla designbeslut som CSS-variabler. Andra har -> andras overallt.
   Ljus = default, mork via [data-theme="dark"] + prefers-color-scheme.
   ========================================================================= */
:root {
  /* ---------- Brand: gron skala (#448C74 ar 500) ---------- */
  --green-50:  #eef5f1;
  --green-100: #d3e6dd;
  --green-200: #a9cdbd;
  --green-300: #7fb49d;
  --green-400: #5ba88c;
  --green-500: #448c74;
  --green-600: #3a7a64;
  --green-700: #2f6353;
  --green-800: #244c40;
  --green-900: #18342c;

  /* ---------- Neutraler ---------- */
  --gray-0:   #ffffff;
  --gray-50:  #f7f8f9;
  --gray-100: #eef0f2;
  --gray-200: #e2e5e8;
  --gray-300: #cbd0d5;
  --gray-400: #9aa1a8;
  --gray-500: #6b727a;
  --gray-600: #4d535a;
  --gray-700: #353a40;
  --gray-800: #21262b;
  --gray-900: #14171a;

  /* ---------- Status ---------- */
  --c-success: #2f8f63; --c-success-bg: #e7f4ee;
  --c-warning: #b5811a; --c-warning-bg: #fbf1da;
  --c-danger:  #c8443f; --c-danger-bg:  #fae9e8;
  --c-info:    #2d6fa8; --c-info-bg:    #e6f0f8;

  /* ---------- Semantiska (ljust lage) ----------
     Mjuk off-white canvas + vita kort som "lyfter" = lugn, premium SaaS-kansla
     utan tunga ramar. Hog kontrast pa text for latt lasbarhet. */
  --bg:           #f7f9f8;
  --surface:      #ffffff;
  --surface-2:    #eef1f0;
  --surface-sunken: #e6eae9;
  --text-primary:   #15191c;
  --text-secondary: #525a60;
  --text-muted:     #8b939a;
  --text-on-accent: #ffffff;
  --accent:         var(--green-500);
  --accent-hover:   var(--green-600);
  --accent-soft:    var(--green-50);
  --border-color:        rgba(20, 23, 26, .05);
  --border-color-strong: rgba(20, 23, 26, .11);
  --hairline:            rgba(20, 23, 26, .04);

  /* ---------- Glas (anvands pa flytande element, ej platta innehallskort) ---------- */
  --glass-bg:     rgba(255, 255, 255, .62);
  --glass-border: rgba(255, 255, 255, .55);
  --glass-blur:   18px;

  /* ---------- Typografi ----------
     Inter for brodtext (lattlast), Space Grotesk for rubriker (egen karaktar,
     premium utan att bli kallt). Byt --font-display for ett annat rubrik-uttryck. */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --text-xs:   0.75rem;    /* 12 */
  --text-sm:   0.875rem;   /* 14 */
  --text-base: 1rem;       /* 16 */
  --text-lg:   1.125rem;   /* 18 */
  --text-xl:   1.25rem;    /* 20 */
  --text-2xl:  1.5rem;     /* 24 */
  --text-3xl:  1.875rem;   /* 30 */
  --text-4xl:  clamp(2.1rem, 1.35rem + 2.4vw, 3rem);
  --text-5xl:  clamp(2.75rem, 1.55rem + 3.8vw, 4.25rem);

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold:800;

  --leading-none:    1;
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  --tracking-tighter: -0.04em;
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-wider:   0.08em;
  --tracking-widest:  0.16em;   /* versala eyebrows */

  /* ---------- Spacing (8px-bas) ---------- */
  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.5rem;  --space-6: 2rem;
  --space-7: 3rem;     --space-8: 4rem;    --space-9: 6rem;  --space-10: 8rem;

  /* ---------- Radie ---------- */
  --radius-sm:   6px;
  --radius:      10px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  /* ---------- Borders ---------- */
  --border-width: 1px;
  --border-width-strong: 2px;
  --border: var(--border-width) solid var(--border-color);

  /* ---------- Skuggor (elevation) ---------- */
  --shadow-xs: 0 1px 2px rgba(20, 23, 26, .05);
  --shadow-sm: 0 1px 3px rgba(20, 23, 26, .06), 0 1px 2px rgba(20, 23, 26, .04);
  --shadow-md: 0 4px 14px rgba(20, 23, 26, .07), 0 2px 5px rgba(20, 23, 26, .05);
  --shadow-lg: 0 12px 34px rgba(20, 23, 26, .10), 0 4px 10px rgba(20, 23, 26, .06);
  --shadow-xl: 0 28px 70px rgba(20, 23, 26, .16);
  --shadow-focus: 0 0 0 3px rgba(68, 140, 116, .25);

  /* ---------- Rorelse ---------- */
  --ease: cubic-bezier(.2, .7, .3, 1);
  --dur-fast: 120ms;
  --dur:      200ms;
  --dur-slow: 320ms;

  /* ---------- Layout ---------- */
  --container:        1200px;
  --container-narrow: 760px;
  --gutter: clamp(1rem, 4vw, 2rem);

  /* ---------- Z-index ---------- */
  --z-dropdown: 1000;
  --z-sticky:   1020;
  --z-overlay:  1040;
  --z-modal:    1050;
  --z-toast:    1080;
}

/* Brytpunkter (kan ej anvandas i @media, dokumenteras har):
   sm 480px | md 768px | lg 992px | xl 1200px */

/* ---------- Morkt lage ---------- */
:root[data-theme="dark"] {
  --bg:           #0f1316;
  --surface:      #1a1f23;
  --surface-2:    #14181b;
  --surface-sunken: #0c0f11;
  --text-primary:   #e9eef1;
  --text-secondary: #aab2b9;
  --text-muted:     #79838a;
  --accent:         var(--green-400);
  --accent-hover:   var(--green-300);
  --accent-soft:    rgba(91, 168, 140, .14);
  --border-color:        rgba(255, 255, 255, .10);
  --border-color-strong: rgba(255, 255, 255, .20);
  --hairline:            rgba(255, 255, 255, .08);
  --glass-bg:     rgba(26, 31, 34, .55);
  --glass-border: rgba(255, 255, 255, .10);
  --c-success-bg: rgba(47,143,99,.18); --c-warning-bg: rgba(181,129,26,.18);
  --c-danger-bg: rgba(200,68,63,.18);  --c-info-bg: rgba(45,111,168,.18);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1316; --surface: #1a1f23; --surface-2: #14181b; --surface-sunken: #0c0f11;
    --text-primary: #e9eef1; --text-secondary: #aab2b9; --text-muted: #79838a;
    --accent: var(--green-400); --accent-hover: var(--green-300); --accent-soft: rgba(91,168,140,.14);
    --border-color: rgba(255,255,255,.12); --border-color-strong: rgba(255,255,255,.22);
  }
}