/* ui-next/tokens.css — design-tokens som CSS custom properties.
 *
 * TVÅ-LAGERS ARKITEKTUR (godkänd: "bäst för framtiden + dynamiskt"):
 *   1. PRIMITIVER  — 1:1 med Figma-variablerna (designsystem fileKey
 *                    xLvdxqagb5ZKsdeZIpOSmg). Source of truth för värden.
 *                    Designer ändrar en Figma-variabel → vi uppdaterar EN primitiv.
 *   2. SEMANTISKA  — det komponenterna refererar (--primary, --color-ink ...).
 *                    Frikopplat → byt tema utan att röra primitiver/komponenter.
 *
 * Värdena är hämtade VERBATIM från Figma "VINYL SCANNER" (HnGMAocsad6f2Ycuph2xxy)
 * via get_variable_defs över de 24 app-skärmarna. RGBA-alfa bevarad
 * (#RRGGBBAA → rgba()). System/* + Blur/System Material = iOS-kit, EJ med här.
 *
 * Färg-pattern per hue: Light · Medium · Dark Base · Dark Muted(50%) · Subtle(20–25%).
 * Typografi: Rubik (titlar, Black/Bold) + Inter (body). Composite text-styles
 * exponeras som .rk-*-utility-klasser längst ned.
 */

:root {
  /* ════════════════════════════════════════════════════════════════
   * LAGER 1 — PRIMITIVER (Figma-variabler, verbatim)
   * ════════════════════════════════════════════════════════════════ */

  /* ── Color · Green ── (Figma: Green/*) */
  --green-light:       #dcd8c7;
  --green-medium:      #c4b986;
  --green-dark-base:   #3c3308;
  --green-dark-muted:  rgba(60, 51, 8, 0.5);    /* #3c330880 */

  /* ── Color · Red ── (Figma: Red/*) */
  --red-light:         #fedbf6;
  --red-medium:        #ff0014;
  --red-dark-base:     #32090c;
  --red-dark-muted:    rgba(50, 9, 12, 0.7);    /* #32090cb2 */
  --red-dark-subtle:   rgba(50, 9, 12, 0.25);   /* #32090c40 */

  /* ── Color · Yellow ── (Figma: Yellow/*) */
  --yellow-light:          #f2eedd;
  --yellow-medium-base:    #ffd200;
  --yellow-medium-muted:   rgba(255, 210, 0, 0.7);   /* #ffd200b2 */
  --yellow-medium-subtle:  rgba(255, 210, 0, 0.2);   /* #ffd20033 */
  --yellow-dark:           #e5b904;

  /* ── Color · Purple ── (Figma: Purple/*) */
  --purple-light:      #c7c8f6;
  --purple-medium:     #5458e2;
  --purple-dark:       #170a34;

  /* ── Color · Blue ── (Figma: Blue/*) */
  --blue-light:        #c2d1f5;
  --blue-medium:       #0d47d9;
  --blue-dark:         #051337;

  /* ── Color · White/cream ── (Figma: White/*) */
  --white-light:       #ffffff;
  --white-dark-base:   #fffcef;
  --white-dark-muted:  rgba(255, 252, 239, 0.7);   /* #fffcefb2 */
  --white-dark-subtle: rgba(255, 252, 239, 0.2);   /* #fffcef33 */

  /* ── Color · Vendor ── (Figma: Vendor/*  — butiks/streaming-färger)
   * OBS: Figma stavar "Disccogs" (dubbel-c). Vi normaliserar till "discogs". */
  --vendor-discogs-base:      #003535;
  --vendor-discogs-subtle:    rgba(0, 53, 53, 0.25);    /* #00353540 */
  --vendor-bengans-base:      #000000;
  --vendor-bengans-subtle:    rgba(0, 0, 0, 0.25);      /* #00000040 */
  --vendor-ginza-base:        #22599f;
  --vendor-ginza-subtle:      rgba(34, 89, 159, 0.25);  /* #22599f40 */
  --vendor-vinylpladen-base:  #093340;
  --vendor-vinylpladen-subtle:rgba(9, 51, 64, 0.25);    /* #09334040 */
  --vendor-hhv-base:          #333333;
  --vendor-imusic-base:       #d9191e;
  --vendor-tradera-base:      #ffcf3c;
  --vendor-tradera-subtle:    rgba(255, 207, 60, 0.25); /* #ffcf3c40 */
  --vendor-ebay-base:         #f02d2d;
  --vendor-ebay-subtle:       rgba(240, 45, 45, 0.25);  /* #f02d2d40 */
  --vendor-spotify-base:      #1ed760;
  --vendor-spotify-subtle:    rgba(30, 215, 96, 0.25);  /* #1ed76040 */
  --vendor-apple-music-base:  #ff4e6b;
  --vendor-apple-music-subtle:rgba(255, 78, 107, 0.25); /* #ff4e6b40 */
  --vendor-tidal-base:        #000000;
  --vendor-tidal-subtle:      rgba(0, 0, 0, 0.25);      /* #00000040 */
  --vendor-bandcamp-base:     #60909a;
  --vendor-bandcamp-subtle:   rgba(96, 144, 154, 0.25); /* #60909a40 */

  /* ── Typography · families ── (Figma: Font Family/*) */
  --font-rubik: 'Rubik', system-ui, -apple-system, sans-serif;
  --font-inter: 'Inter', system-ui, -apple-system, sans-serif;

  /* ── Typography · weights ── (Figma: Weight/*) */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;
  --weight-black:   900;

  /* ── Typography · sizes ── (Figma: Size/*) */
  --size-display:       36px;
  --size-title-xl:      26px;   /* Title 1 XL */
  --size-title-large:   18px;   /* Title 2 Large */
  --size-title-medium:  14px;   /* Title 3 Medium */
  --size-title-small:   12px;   /* Title 4 Small */
  --size-title-xs:      10px;   /* Title 5 XS */
  --size-body-medium:   13px;   /* Body 2 Medium */
  --size-body-small:    12px;   /* Body 3 Small */
  --size-fineprint:     10px;

  /* ── Typography · line-heights ── (Figma: Line Height/*) */
  --lh-display:      36px;
  --lh-title-xl:     26px;
  --lh-title-large:  18px;
  --lh-title-medium: 14px;
  --lh-title-small:  12px;
  --lh-title-xs:     10px;
  --lh-body-medium:  20px;
  --lh-body-small:   12px;
  --lh-fineprint:    10px;

  /* ── Typography · letter-spacing ── (Figma: Letter Spacing/*) */
  --ls-display:      -0.8px;
  --ls-title-xl:     -0.5px;
  --ls-title-large:  -0.3px;
  --ls-title-medium: -0.3px;
  --ls-title-small:  -0.3px;
  --ls-title-xs:     -0.2px;
  --ls-body-medium:  0px;
  --ls-body-small:   -0.2px;
  --ls-fineprint:    0px;

  /* ════════════════════════════════════════════════════════════════
   * LAGER 2 — SEMANTISKA ALIAS (komponenter refererar dessa)
   * Mappning bekräftad från FAKTISK användning på app-skärmarna
   * (ej gissad). T.ex. ink = Red/Dark Base (ramar+skuggor på SCAN-skärmen).
   * ════════════════════════════════════════════════════════════════ */

  /* ── Ytor ── */
  --surface:         var(--yellow-light);      /* app-bakgrund (cream #f2eedd) */
  --surface-raised:  var(--white-light);       /* kort/paneler (#ffffff) */
  --surface-sunken:  var(--white-dark-base);   /* subtil off-white (#fffcef) */
  --surface-frost:   var(--white-dark-muted);  /* frostad FAB/overlay (70%) */

  /* ── Glas (Apple-native "material") ──
     iOS-vibrans = stark blur + SATURATION (innehåll bakom glöder igenom) +
     hårfin topp-rim (specular highlight) + mjuk float-skugga. Delas av
     bottenpillen, back-FAB:arna och library-FAB:ens ring så glaset är enhetligt. */
  --glass-filter:  saturate(180%) blur(20px);
  --glass-fill:    rgba(255, 252, 239, 0.6);    /* cream "thin material" */
  --glass-rim:     rgba(255, 255, 255, 0.55);   /* topp-specular + glaskant */
  --glass-shadow:  0 10px 30px rgba(60, 51, 8, 0.14);

  /* ── Text / ink ── */
  --color-ink:       var(--red-dark-base);     /* ramar, hårda skuggor, mörk text */
  --on-surface:      var(--red-dark-base);     /* primär text */
  --on-surface-dim:  var(--green-dark-muted);  /* sekundär text (50%) */
  --on-surface-mute: var(--red-dark-muted);    /* dämpad text (70%) */

  /* ── Brand-accenter ── */
  --primary:    var(--red-medium);          /* scan-accent #ff0014 */
  --on-primary: var(--yellow-light);        /* text på rött = cream */
  --accent:     var(--yellow-medium-base);  /* highlight #ffd200 */
  --on-accent:  var(--red-dark-base);       /* text på gult = ink */
  --info:       var(--blue-medium);         /* CTA/info #0d47d9 */
  --on-info:    var(--white-light);
  --listen:     var(--purple-medium);       /* lyssna/Shazam-accent #5458e2 */
  --on-listen:  var(--white-light);
  --warning:    var(--red-medium);
  --success:    var(--green-medium);

  /* Behåll legacy brand-namn (gamla komponenter refererar dessa) */
  --color-red:    var(--red-medium);
  --color-blue:   var(--blue-medium);
  --color-yellow: var(--yellow-medium-base);
  --color-cream:  var(--yellow-light);
  --color-white:  var(--white-light);

  /* ── State ── */
  --state-hover:    var(--red-dark-subtle);    /* 25% ink-tint */
  --state-active:   var(--red-dark-muted);
  --state-disabled: var(--green-medium);
  --focus-ring:     var(--blue-medium);

  /* ── Typografi (semantiska alias som komponenterna använder) ── */
  --font-display: var(--font-rubik);   /* titlar (Black/Bold) */
  --font-body:    var(--font-inter);
  --font-mono:    var(--font-inter);   /* designen använder ingen mono */

  --text-display:  var(--size-display);       /* 36 */
  --text-h1:       var(--size-title-xl);       /* 26 */
  --text-h2:       var(--size-title-large);    /* 18 */
  --text-h3:       var(--size-title-medium);   /* 14 */
  --text-body:     var(--size-body-medium);    /* 13 */
  --text-caption:  var(--size-body-small);     /* 12 */
  --text-micro:    var(--size-fineprint);      /* 10 */

  /* ── Spacing (8-bas; designen auto-layoutar i 4/8/12/16/24) ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Radius (från designen: chip 0, knapp 8, settings 5, FAB pill) ── */
  --radius-sm:   5px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* ── Skugga ──
   * Signatur = hård offset i ink-färg. Float = "Floating glass button
   * shadow" (Figma): DROP_SHADOW #3C330821 (0,16) blur40 → rgba(60,51,8,.13). */
  --shadow-1:     2px 2px 0 var(--color-ink);
  --shadow-2:     4px 4px 0 var(--color-ink);
  --shadow-card:  5px 6px 0 var(--color-ink);
  --shadow-float: 0px 16px 40px 0px rgba(60, 51, 8, 0.13);
  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 45%, transparent);

  /* ── Motion ── */
  --motion-fast: 120ms;
  --motion-mid:  240ms;
  --motion-slow: 400ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-expo:     cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Layout ── */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --content-max: 520px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-mid:  0ms;
    --motion-slow: 0ms;
  }
}

/* ════════════════════════════════════════════════════════════════
 * TEXT-STYLES — composite Figma-stilar som utility-klasser.
 * Motsvarar Mobile/* i Figma (variabel-closures → konkret CSS).
 * Använd dessa i komponenter istället för att sätta family+size+weight
 * var för sig. Fungerar även inne i Shadow DOM (ärvs via :host).
 * ════════════════════════════════════════════════════════════════ */
.rk-display {
  font-family: var(--font-rubik); font-weight: var(--weight-bold);
  font-size: var(--size-display); line-height: var(--lh-display); letter-spacing: var(--ls-display);
}
.rk-title-xl {
  font-family: var(--font-rubik); font-weight: var(--weight-black);
  font-size: var(--size-title-xl); line-height: var(--lh-title-xl); letter-spacing: var(--ls-title-xl);
}
.rk-title-large {
  font-family: var(--font-rubik); font-weight: var(--weight-black);
  font-size: var(--size-title-large); line-height: var(--lh-title-large); letter-spacing: var(--ls-title-large);
}
.rk-title-medium {
  font-family: var(--font-rubik); font-weight: var(--weight-black);
  font-size: var(--size-title-medium); line-height: var(--lh-title-medium); letter-spacing: var(--ls-title-medium);
}
.rk-title-small {
  font-family: var(--font-rubik); font-weight: var(--weight-black);
  font-size: var(--size-title-small); line-height: var(--lh-title-small); letter-spacing: var(--ls-title-small);
}
.rk-title-xs {
  font-family: var(--font-rubik); font-weight: var(--weight-black);
  font-size: var(--size-title-xs); line-height: var(--lh-title-xs); letter-spacing: var(--ls-title-xs);
}
.rk-body {
  font-family: var(--font-inter); font-weight: var(--weight-regular);
  font-size: var(--size-body-medium); line-height: var(--lh-body-medium); letter-spacing: var(--ls-body-medium);
}
.rk-body-sm {
  font-family: var(--font-inter); font-weight: var(--weight-regular);
  font-size: var(--size-body-small); line-height: var(--lh-body-small); letter-spacing: var(--ls-body-small);
}
.rk-body-sm-bold   { font-family: var(--font-inter); font-weight: var(--weight-bold);   font-size: var(--size-body-small); line-height: var(--lh-body-small); letter-spacing: var(--ls-body-small); }
.rk-body-sm-medium { font-family: var(--font-inter); font-weight: var(--weight-medium); font-size: var(--size-body-small); line-height: var(--lh-body-small); letter-spacing: var(--ls-body-small); }
.rk-fineprint {
  font-family: var(--font-inter); font-weight: var(--weight-medium);
  font-size: var(--size-fineprint); line-height: var(--lh-fineprint); letter-spacing: var(--ls-fineprint);
}