/* ==========================================================================
   Dragster Design Tokens — hämtade från temat dragster-ai/assets/css/base

   Detta är designsystemets sanning: färger, typografi och mått som Figma
   definierar dem. Ändra ALDRIG enskilda färger ute i komponenterna — ändra
   här, så följer hela appen med.

   Laddas först av alla, före styling.css.
   ========================================================================== */

/* ── Desktop ─────────────────────────────────────────────────────────────── */
:root {

  --font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Background — Background.* */
  --bg-primary:     #F0F1FA;   /* Background.Primary   */
  --bg-secondary:   #1C1024;   /* Background.Secondary */
  --bg-white:       #FFFFFF;   /* Background.Tertiary  */
  --bg-dark:        #1C1B1F;   /* Background.Dark      */
  --bg-black:       #000;
  --bg-diamond-gradient:
    linear-gradient(to bottom right, #F6F6F6 0%, #FFDFF6 24%, #E5DAFF 50%) bottom right / 50% 50% no-repeat,
    linear-gradient(to bottom left,  #F6F6F6 0%, #FFDFF6 24%, #E5DAFF 50%) bottom left  / 50% 50% no-repeat,
    linear-gradient(to top left,     #F6F6F6 0%, #FFDFF6 24%, #E5DAFF 50%) top left     / 50% 50% no-repeat,
    linear-gradient(to top right,    #F6F6F6 0%, #FFDFF6 24%, #E5DAFF 50%) top right    / 50% 50% no-repeat;

  /* Text colours — Text.Color.* */
  --text-title:     #1C1B1F;   /* Text.Color.Title      */
  --text-body:      #4F4F4F;   /* Text.Color.Body-color */
  --text-light:     #FFFFFF;   /* Text.Color.Light      */
  --text-muted:     #C0C0C0;   /* Text.Color.Grey       */

  /* Icons / Buttons — IconsButton.* */
  --dragster-blue:  #3645FD;   /* IconsButton.Dragster-Blue */
  --btn-dark:       #1C1B1F;   /* IconsButton.Dark          */
  --btn-light:      #FFFFFF;   /* IconsButton.Light         */

  --icon-light: var(--bg-primary);

  /* Lila — hämtade ur diamantgradienten ovan, namngivna så att de går att
     använda som vanliga färger (ikoner, accenter, bakgrundsplattor). */
  --purple-light:  #E5DAFF;   /* ljus lavendel */
  --purple-soft:   #F0EAFF;   /* ännu ljusare, för bakgrundsplattor */
  --purple-dark:   #1C1024;   /* mörk plommon — samma som Background.Secondary */
  --purple-mid:    #5B3E86;   /* mellanton för ikonlinjer */

  /* SVG stroke/swirl/wave */
  --svg-stroke-width: 58px;

  /* Title sizes — Text.Size.Title.* */
  --title-xl:       100px;
  --title-lg:       80px;
  --title-md:       48px;
  --title-sm:       40px;
  --title-xs:       32px;

  /* Title line-heights */
  --title-xl-lh:    110px;
  --title-lg-lh:    86px;
  --title-md-lh:    60px;
  --title-sm-lh:    50px;
  --title-xs-lh:    45px;

  /* Title letter-spacing */
  --title-lg-ls:    -1.6px;
  --title-sm-ls:    -0.8px;
  --title-xs-ls:    -0.32px;

  /* Body sizes — Text.Size.Body.* */
  --body-lg:        24px;
  --body-md:        20px;
  --body-sm:        16px;
  --body-xs:        14px;
  --body-xxs:       12px;

  /* Body line-heights */
  --body-lg-lh:     36px;
  --body-md-lh:     30px;
  --body-sm-lh:     24px;

  /* Body letter-spacing */
  --body-lg-ls:     -0.24px;
  --body-md-ls:     -0.2px;

  /* Sizes — Sizes.* */
  --gap-sm:         10px;
  --gap-md:         12px;
  --radius-image:   20px;      /* Border Radius.Images  */
  --radius-btn:     30px;      /* Border Radius.Buttons */
  --margin-primary: 50px;

  /* Layout */
  --container-max:  1440px;
  --content-max:    1180px;   /* delad bredd för landningssidans sektioner */
  --section-py:     120px;
  --header-h:       86px;
}

/* ── Tablet (768–1024px) ─────────────────────────────────────────────────── */
/* Avgränsat intervall så att det aldrig läcker ner i mobil-nivån nedanför. */
@media (min-width: 768px) and (max-width: 1024px) {
  :root {
    --title-lg:    64px;   /* mitt emellan desktop 80px och mobil 40px */
    --title-md:    40px;
    --section-py:  80px;
  }
}

/* ── Mobil (max-width: 767px) ────────────────────────────────────────────── */
@media (max-width: 767px) {
  :root {
    --title-xl:     48px;
    --title-lg:     40px;
    --title-md:     32px;
    --title-sm:     24px;
    --title-xs:     20px;

    --title-xl-lh:  50px;
    --title-lg-lh:  46px;
    --title-md-lh:  42px;
    --title-sm-lh:  30px;
    --title-xs-lh:  24px;

    /* OBS: i originalfilen saknade --title-md-ls värde, vilket gjorde att
       raden under (--title-sm-ls) aldrig sattes. Rättat här.
       --title-lx-ls var dessutom en felstavning av --title-xl-ls. */
    --title-xl-ls:  -0.96px;
    --title-lg-ls:  -0.8px;
    --title-md-ls:  -0.64px;
    --title-sm-ls:  -0.48px;

    --body-lg:      20px;
    --body-md:      18px;
    --body-sm:      14px;
    --body-xs:      14px;

    --body-lg-lh:   28px;
    --body-md-lh:   26px;
    --body-sm-lh:   24px;

    --body-md-ls:   0.2px;

    --margin-primary: 16px;
    --section-py:     60px;
    --header-h:       86px;
  }
}