/* ==========================================================================
   CUPEN — DESIGNVARIABLER. Allt utseende utgår härifrån: färg, typsnitt,
   avstånd och rörelse. Sajten och admin delar samma variabler.

   Idén: kvällsmatch under strålkastare. Mörk gräsgrön botten, kritvita
   linjer och en elektrisk lime som accent. Bakom innehållet ligger en fast
   "scen" med en plan i perspektiv som byter vinkel när man scrollar;
   innehållet flyter ovanpå i frostat glas.

   Två teman: mörkt (standard) och ljust, via data-theme på <html>.
   ========================================================================== */

@font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-display: swap; src: url(../fonts/barlow-condensed-600.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 800; font-display: swap; src: url(../fonts/barlow-condensed-800.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 800; font-style: italic; font-display: swap; src: url(../fonts/barlow-condensed-800i.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 400 700; font-display: swap; src: url(../fonts/inter-latin.woff2) format('woff2'); }

:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #04100c;   /* planen en sen kväll */
  --bg-raised:     #08170f;
  --surface:       #0d1f16;
  --surface-2:     #13291e;
  --line:          rgb(220 255 230 / 0.08);
  --line-strong:   rgb(220 255 230 / 0.18);

  --text:          #effaf2;
  --text-muted:    #a3baa9;
  --text-dim:      #6d8574;

  --accent:        #c6ff3d;   /* strålkastarlime */
  --accent-hi:     #ecffb0;
  --accent-lo:     #6fa313;
  --accent-text:   #d4ff6b;
  --on-accent:     #0a1400;
  --accent-2:      #38e8b8;   /* mint — andra färgen i grafik */

  --gradient:      linear-gradient(110deg, var(--accent-2) 0%, var(--accent) 55%, var(--accent-hi) 100%);
  --glow:          0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent),
                   0 18px 50px -14px color-mix(in srgb, var(--accent) 55%, transparent);
  --shadow:        0 30px 70px -30px rgb(0 0 0 / 0.85);

  --glass-bg:      linear-gradient(140deg, rgb(255 255 255 / 0.09) 0%, rgb(255 255 255 / 0.03) 45%, rgb(255 255 255 / 0.06) 100%);
  --glass-strong:  linear-gradient(140deg, rgb(10 30 20 / 0.78) 0%, rgb(4 16 12 / 0.70) 100%);
  --glass-border:  rgb(220 255 230 / 0.12);
  --glass-hi:      rgb(255 255 255 / 0.20);
  --glass-shadow:  0 30px 60px -28px rgb(0 0 0 / 0.8);
  --glass-blur:    20px;

  --pitch-line:    rgb(220 255 230 / 0.16);
  --pitch-a:       #0a2a1a;
  --pitch-b:       #0c2f1d;
  --beam:          rgb(230 255 200 / 0.10);
  --orb-1:         rgb(198 255 61 / 0.20);
  --orb-2:         rgb(56 232 184 / 0.18);
  --veil:          rgb(4 16 12 / 0.55);

  --header-bg:     rgb(6 22 14 / 0.55);

  --ok:            #4ade80;
  --warn:          #fbbf24;
  --danger:        #ff5a4d;
  --danger-text:   #ff8a80;
  --lvl-1:         #ff7a59;   /* nivå 1 – elit */
  --lvl-2:         #fbbf24;
  --lvl-3:         #38e8b8;
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg:            #eef3ec;   /* krita och morgondagg */
  --bg-raised:     #e3ebe0;
  --surface:       #ffffff;
  --surface-2:     #f2f6f0;
  --line:          rgb(10 40 20 / 0.10);
  --line-strong:   rgb(10 40 20 / 0.22);

  --text:          #0b1f12;
  --text-muted:    #44594b;
  --text-dim:      #7a8c7f;

  --accent:        #3f8f0f;
  --accent-hi:     #9ad63a;
  --accent-lo:     #275e05;
  --accent-text:   #2f6f08;
  --on-accent:     #ffffff;
  --accent-2:      #0f9b78;

  --shadow:        0 30px 70px -34px rgb(20 60 20 / 0.35);

  --glass-bg:      linear-gradient(140deg, rgb(255 255 255 / 0.78) 0%, rgb(255 255 255 / 0.52) 50%, rgb(255 255 255 / 0.66) 100%);
  --glass-strong:  linear-gradient(140deg, rgb(255 255 255 / 0.9) 0%, rgb(248 252 246 / 0.82) 100%);
  --glass-border:  rgb(255 255 255 / 0.9);
  --glass-hi:      rgb(255 255 255 / 1);
  --glass-shadow:  0 30px 60px -32px rgb(20 70 30 / 0.3);

  --pitch-line:    rgb(255 255 255 / 0.85);
  --pitch-a:       #b9dca6;
  --pitch-b:       #c4e3b2;
  --beam:          rgb(255 255 255 / 0.35);
  --orb-1:         rgb(154 214 58 / 0.35);
  --orb-2:         rgb(15 155 120 / 0.18);
  --veil:          rgb(238 243 236 / 0.62);

  --header-bg:     rgb(255 255 255 / 0.6);
  --danger-text:   #b3261e;
  --lvl-1:         #d9480f;
  --lvl-2:         #c08400;
  --lvl-3:         #0f9b78;
}

:root {
  --font-display:  'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body:     'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-hero:       clamp(3.2rem, min(11vw, 15svh), 9.5rem);
  --fs-h1:         clamp(2.6rem, 6.4vw, 5.4rem);
  --fs-h2:         clamp(2rem, 4.4vw, 3.6rem);
  --fs-h3:         clamp(1.3rem, 2vw, 1.7rem);
  --fs-lead:       clamp(1.05rem, 1.4vw, 1.22rem);
  --fs-small:      .9rem;
  --fs-eyebrow:    .74rem;

  --container:     1220px;
  --gutter:        clamp(1rem, 4vw, 2.5rem);
  --section-y:     clamp(4rem, 9vw, 8rem);
  --gap:           clamp(1rem, 2.4vw, 1.6rem);

  --radius:        22px;
  --radius-sm:     12px;
  --radius-lg:     30px;
  --header-h:      76px;

  --ease-out:      cubic-bezier(.16, 1, .3, 1);
  --ease-spring:   cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast:      .2s;
  --dur:           .5s;
}