/* ═══════════════════════════════════════════════════════════
   Selfrag Design Tokens — Single Source of Truth
   ===========================================================
   Brand foundation for Selfrag AG.

   Consumed by:
     - selfrag-ds-core.css            (DOM-agnostic web components)
     - SELF-2026-Website-Refresh/theme/selfrag/css/tokens.css
       (Drupal theme — can be swapped to @import this file)
     - any external HTML/CSS via:
       @import "../SELF-Branding/tokens.css";

   Mirror in JSON form: tokens.json (for docs, JS, build tooling).

   Naming convention:
     --sf-*        brand + neutral + system colors
     --sf-font-*   typography family
     --sf-text-*   typography scale
     --sf-lh-*     line-heights
     --sf-sp-N     spacing (N × 4px)
     --sf-radius-* border radii
     --sf-shadow-* elevations
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Brand Colors ───────────────────────────────────────── */
  --sf-red:           #E10018;
  --sf-red-dark:      #B80014;
  --sf-red-glow:      rgba(225, 0, 24, 0.15);

  /* ── Neutrals ───────────────────────────────────────────── */
  --sf-black:         #000000;
  --sf-heading:       #000000;
  --sf-text:          #323232;
  --sf-text-secondary:#666666;
  --sf-grey:          #999999;
  --sf-grey-mid:      #cccccc;
  --sf-border:        #eaeaea;
  --sf-border-light:  #eeeeee;
  --sf-bg-alt:        #F5F5F5;
  --sf-bg:            #FFFFFF;
  --sf-white:         #FFFFFF;

  /* ── Surface ────────────────────────────────────────────── */
  --sf-card-bg:        #FFFFFF;
  --sf-header-bg:      #FFFFFF;
  --sf-header-shadow:  rgba(0, 0, 0, 0.08);
  --sf-dropdown-bg:    #FFFFFF;
  --sf-dropdown-hover: #F5F5F5;
  --sf-footer-bg:      #1a1a1a;

  /* ── Legacy aliases (Drupal-theme back-compat) ──────────── */
  --sf-logo-dot:  #999999;
  --sf-logo-text: #555555;
  --sf-step-num:  #D0D0D0;

  /* ── System Colors ──────────────────────────────────────── */
  --sf-green: #2e7d32;
  --sf-warn:  #e65100;
  --sf-error: #c62828;

  /* ── Font Families ──────────────────────────────────────── */
  --sf-font-heading: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sf-font-body:    "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ── Font Weights ───────────────────────────────────────── */
  --sf-font-weight-light:   300;
  --sf-font-weight-regular: 400;
  --sf-font-weight-medium:  500;
  --sf-font-weight-bold:    700;

  /* ── Typography Scale (Desktop) ─────────────────────────── */
  --sf-text-xs:   12px;
  --sf-text-sm:   14px;
  --sf-text-md:   16px;
  --sf-text-lg:   18px;
  --sf-text-xl:   22px;
  --sf-text-2xl:  28px;
  --sf-text-3xl:  36px;
  --sf-text-4xl:  48px;
  --sf-text-5xl:  64px;
  --sf-text-6xl:  80px;
  --sf-text-7xl: 112px;

  /* ── Line-Heights (paired with --sf-text-*) ─────────────── */
  --sf-lh-xs:   1.5;
  --sf-lh-sm:   1.55;
  --sf-lh-md:   1.6;
  --sf-lh-lg:   1.55;
  --sf-lh-xl:   1.4;
  --sf-lh-2xl:  1.3;
  --sf-lh-3xl:  1.2;
  --sf-lh-4xl:  1.15;
  --sf-lh-5xl:  1.1;
  --sf-lh-6xl:  1.05;
  --sf-lh-7xl:  1.0;

  /* ── Typography Scale (Mobile) ──────────────────────────── */
  --sf-text-xs-m:  11px;
  --sf-text-sm-m:  13px;
  --sf-text-md-m:  15px;
  --sf-text-lg-m:  17px;
  --sf-text-xl-m:  19px;
  --sf-text-2xl-m: 22px;
  --sf-text-3xl-m: 28px;
  --sf-text-4xl-m: 34px;
  --sf-text-5xl-m: 42px;
  --sf-text-6xl-m: 52px;
  --sf-text-7xl-m: 64px;

  /* ── Letter-Spacing ─────────────────────────────────────── */
  --sf-tracking-tight: -0.01em;
  --sf-tracking-base:   0em;
  --sf-tracking-wide:   0.05em;
  --sf-tracking-section: 0.2em;  /* uppercase section labels */

  /* ── Spacing (4px base) ─────────────────────────────────── */
  --sf-sp-1:    4px;
  --sf-sp-2:    8px;
  --sf-sp-3:   12px;
  --sf-sp-4:   16px;
  --sf-sp-5:   20px;
  --sf-sp-6:   24px;
  --sf-sp-8:   32px;
  --sf-sp-10:  40px;
  --sf-sp-12:  48px;
  --sf-sp-14:  56px;
  --sf-sp-16:  64px;
  --sf-sp-20:  80px;
  --sf-sp-22:  88px;

  /* ── Layout ─────────────────────────────────────────────── */
  --sf-section-padding:        88px 48px;
  --sf-section-padding-mobile: 56px 24px;
  --sf-container-max:         1080px;
  --sf-container-wide:        1200px;
  --sf-header-height:          80px;

  /* ── Radii ──────────────────────────────────────────────── */
  --sf-radius-sm:   4px;
  --sf-radius-md:   8px;
  --sf-radius-lg:  12px;
  --sf-radius-xl:  20px;
  --sf-radius-full: 9999px;

  /* ── Shadows ────────────────────────────────────────────── */
  --sf-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --sf-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --sf-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
  --sf-shadow-glow: 0 0 0 4px var(--sf-red-glow);

  /* ── Transitions ────────────────────────────────────────── */
  --sf-ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --sf-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --sf-dur-fast: 200ms;
  --sf-dur-base: 300ms;
  --sf-dur-slow: 700ms;

  /* ── Legacy transition aliases (Drupal back-compat) ─────── */
  --sf-transition-fast: 0.2s ease;
  --sf-transition-base: 0.3s ease;
  --sf-transition-slow: 0.7s ease;
}

/* ── Mobile Token Overrides ─────────────────────────────────
   Auto-swap desktop sizes for mobile sizes ≤ 768px.
   Components consume --sf-text-* — no media query needed in them.
   ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --sf-text-xs:  var(--sf-text-xs-m);
    --sf-text-sm:  var(--sf-text-sm-m);
    --sf-text-md:  var(--sf-text-md-m);
    --sf-text-lg:  var(--sf-text-lg-m);
    --sf-text-xl:  var(--sf-text-xl-m);
    --sf-text-2xl: var(--sf-text-2xl-m);
    --sf-text-3xl: var(--sf-text-3xl-m);
    --sf-text-4xl: var(--sf-text-4xl-m);
    --sf-text-5xl: var(--sf-text-5xl-m);
    --sf-text-6xl: var(--sf-text-6xl-m);
    --sf-text-7xl: var(--sf-text-7xl-m);

    --sf-section-padding: var(--sf-section-padding-mobile);
  }
}