/**
 * Paprika Atlas — Design Tokens
 *
 * Enda sanningskalla for visuella varden.
 * Baserat pa designsystem v2 (2026-02-15).
 *
 * Specen (steg 4): "Tokeniserat genom hela temat —
 * inga raa hardkodade varden i komponenter."
 *
 * Dynamiska tokens (blob-kraft, hover-level, anim-speed)
 * injiceras inline fran PHP (inc/enqueue.php) sa de kan
 * styras via tema-admin utan kodandring.
 */

:root {

  /* ═══════════════════════════════════════════
     FARGER — Ink
     ═══════════════════════════════════════════ */
  --ink: #1A1A1A;
  --ink-soft: #3D3D3D;
  --ink-muted: #6B6B6B;

  /* ═══════════════════════════════════════════
     FARGER — Paper
     ═══════════════════════════════════════════ */
  --paper: #FEFCF8;
  --paper-warm: #F7F3EC;
  --paper-dark: #EEEAE3;

  /* ═══════════════════════════════════════════
     FARGER — Accent
     ═══════════════════════════════════════════ */
  --accent: #0E8A7D;
  --accent-hover: #0A7269;
  --accent-light: #E8F5F3;
  --accent-dark: #0C7D71;
  --accent-bright: #12A594;
  --accent-dark-hover: #0A6E63;
  --accent-bright-hover: #0E9484;

  /* ═══════════════════════════════════════════
     FARGER — Kategorifärger
     ═══════════════════════════════════════════ */
  --deep-indigo: #2B2D7C;
  --deep-indigo-light: #EDEDF8;
  --deep-indigo-bright: #6366B3;
  --chartreuse: #BFDE42;
  --chartreuse-dark: #7A9A1F;
  --chartreuse-bright: #B5D44A;
  --amber: #E5A100;
  --amber-bright: #F0C040;
  --canary: #FFD639;
  --canary-light: #FFFAE8;
  --plum: #7B3F7C;
  --accent-teal-bright: #3DD4C0;

  /* ═══════════════════════════════════════════
     FARGER — Semantiska
     ═══════════════════════════════════════════ */
  --pro-green: #2A7D4F;
  --pro-green-light: #EBF5EF;
  --con-red: #9B3B3B;
  --con-red-light: #F9EDED;

  /* ═══════════════════════════════════════════
     FARGER — Tag-bakgrunder
     ═══════════════════════════════════════════ */
  --tag-green-bg: rgba(191, 222, 66, 0.1);
  --tag-plum-bg: rgba(123, 63, 124, 0.06);
  --tag-indigo-bg: rgba(43, 45, 124, 0.06);
  --tag-neutral-border: #D0CBC4;

  /* ═══════════════════════════════════════════
     FARGER — Skuggor
     ═══════════════════════════════════════════ */
  --shadow-card: rgba(26, 26, 26, 0.12);
  --shadow-dropdown: rgba(26, 26, 26, 0.15);
  --shadow-cta: rgba(14, 138, 125, 0.3);
  --divider-on-dark: rgba(255, 255, 255, 0.1);
  --divider-on-light: rgba(0, 0, 0, 0.06);
  --link-underline: rgba(14, 138, 125, 0.3);

  /* ═══════════════════════════════════════════
     FARGER — Tier-badge bakgrunder
     ═══════════════════════════════════════════ */
  --tier-excellent-bg: rgba(43, 45, 124, 0.1);
  --tier-great-bg: var(--accent-light);
  --tier-good-bg: rgba(122, 154, 31, 0.1);
  --tier-ok-bg: rgba(229, 161, 0, 0.1);

  /* ═══════════════════════════════════════════
     ANIMATION — timing
     ═══════════════════════════════════════════ */
  --duration-fast: 0.2s;
  --duration-normal: 0.35s;
  --duration-reveal: 0.6s;
  --duration-slow: 1s;
  --duration-ring: 1.5s;
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* ═══════════════════════════════════════════
     LETTER-SPACING
     ═══════════════════════════════════════════ */
  --ls-tight: 0.01em;
  --ls-normal: 0.06em;
  --ls-wide: 0.1em;
  --ls-extra: 0.18em;

  /* ═══════════════════════════════════════════
     TYPSNITT
     ═══════════════════════════════════════════ */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Archivo', -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* ═══════════════════════════════════════════
     FONT-SIZE SKALA
     ═══════════════════════════════════════════ */
  --fs-xs: 8px;
  --fs-sm: 10px;
  --fs-label: 11px;
  --fs-tag: 12px;
  --fs-small: 14px;
  --fs-body: 16px;
  --fs-base: 18px;
  --fs-ring: 22px;
  --fs-h2: 28px;
  --fs-badge: 36px;
  --fs-total: 40px;
  --fs-h1: clamp(36px, 5vw, 56px);

  /* ═══════════════════════════════════════════
     FONT-WEIGHT
     ═══════════════════════════════════════════ */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;

  /* ═══════════════════════════════════════════
     LINE-HEIGHT
     ═══════════════════════════════════════════ */
  --lh-none: 1;
  --lh-tight: 1.1;
  --lh-snug: 1.55;
  --lh-normal: 1.65;
  --lh-relaxed: 1.75;

  /* ═══════════════════════════════════════════
     SPACING — 4px-bas
     ═══════════════════════════════════════════ */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;

  /* ═══════════════════════════════════════════
     BORDER-RADIER
     ═══════════════════════════════════════════ */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 100px;

  /* ═══════════════════════════════════════════
     BREAKPOINTS
     (anvands i media queries, inte som var())
     ═══════════════════════════════════════════ */
  --bp-tablet: 900px;
  --bp-mobile: 600px;

  /* ═══════════════════════════════════════════
     LAYOUT
     ═══════════════════════════════════════════ */
  --container-max: 1200px;
  --container-article: 780px;
  --card-image-col: 320px;

  /* ═══════════════════════════════════════════
     DOKUMENTERADE UNDANTAG FRAN 4PX-BAS
     ═══════════════════════════════════════════ */
  --bar-height: 6px;
  --border-thin: 2px;
  --border-thick: 3px;
  --border-frame: 4px;
  --border-divider: 1px;
  --stroke-ring: 5;
  --badge-size: 100px;
  --score-ring-size: 72px;
  --image-frame-max: 260px;
  --cta-ghost-min-h: 40px;

  /* ═══════════════════════════════════════════
     BETYGSGRANSER — B-modellen (spikat)
     Excellent: 9.5–10  (Deep Indigo)
     Great:     8.5–9.4  (Accent Teal)
     Good:      7.0–8.4  (Chartreuse)
     OK:        0–6.9    (Amber)
     ═══════════════════════════════════════════ */

  /* ═══════════════════════════════════════════
     DYNAMISKA TOKENS (default-fallback)
     Overskrids av inline-CSS fran PHP nar
     tema-admin ar implementerat.
     ═══════════════════════════════════════════ */
  --blob-kraft: 5;
  --blob-amplitude: 0.5;
  --hover-level: 5;
  --hover-lift: -4px;
  --anim-speed: 5;
  --anim-duration-mult: 1;

  /* ═══════════════════════════════════════════
     SELECTION
     ═══════════════════════════════════════════ */
  --selection-bg: var(--canary);
  --selection-color: var(--ink);
}

/**
 * Reduced motion — bindande, alltid pa (steg 4b beslut).
 * Overrider alla animationer oavsett blob-kraft/UI-varde.
 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --blob-amplitude: 0;
    --hover-lift: 0px;
    --anim-duration-mult: 0;
    --duration-fast: 0.01ms;
    --duration-normal: 0.01ms;
    --duration-reveal: 0.01ms;
    --duration-slow: 0.01ms;
    --duration-ring: 0.01ms;
  }
}