/* ================================================================
   B2B-SUPERCHARGE · DESIGN TOKENS
   Single source of truth. Every concept file imports this.
   Never hardcode a color, size, or spacing value — use a token.

   Font: Söhne (Klim)
   Accent: Burnt Sienna #8B4513
   Surface: Warm Cream #FAF8F6
   Locked: 2026-04-12
   ================================================================ */

:root {
  /* ---- COLOR: SURFACES ---- */
  --surface-page:       #FAF8F6;
  --surface-card:       #FFFFFF;
  --surface-panel:      #F5F0EA;
  --surface-subtle:     #FAFAFA;
  --surface-dark:       #1a1a1a;
  --surface-accent:     #8B4513;

  /* ---- COLOR: INK (text on light) ---- */
  --ink:                #1a1a1a;
  --ink-secondary:      #52525b;
  --ink-tertiary:       #71717a;
  --ink-muted:          #a1a1aa;
  --ink-faint:          #d4d4d8;

  /* ---- COLOR: ON DARK (text on dark surfaces) ---- */
  --on-dark:            #fafafa;
  --on-dark-secondary:  #a3a3a3;
  --on-dark-muted:      #737373;
  --on-dark-faint:      #404040;

  /* ---- COLOR: ACCENT ---- */
  --accent:             #8B4513;
  --accent-hover:       #7A3B10;
  --accent-light:       #A0522D;
  --accent-bg:          rgba(139, 69, 19, 0.08);
  --accent-on:          #FFFFFF;

  /* ---- COLOR: BORDERS ---- */
  --border:             #e5e5e5;
  --border-light:       #f0f0f0;
  --border-subtle:      #f5f0ea;
  --border-dark:        #262626;
  --border-accent:      #8B4513;

  /* ---- COLOR: SEMANTIC ---- */
  --success:            #16a34a;
  --success-bg:         #f0fdf4;
  --warning:            #ca8a04;
  --warning-bg:         #fefce8;
  --error:              #dc2626;
  --error-bg:           #fef2f2;

  /* ---- TYPOGRAPHY: FAMILIES ---- */
  --font-sans:          'Soehne', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:          ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace;

  /* ---- TYPOGRAPHY: SCALE ---- */
  --text-xs:            11px;
  --text-sm:            12px;
  --text-base:          13px;
  --text-md:            14px;
  --text-lg:            16px;
  --text-xl:            18px;

  --heading-sm:         20px;
  --heading-md:         24px;
  --heading-lg:         28px;
  --heading-xl:         32px;
  --heading-2xl:        40px;

  --display-sm:         44px;
  --display-md:         48px;
  --display-lg:         56px;

  /* ---- TYPOGRAPHY: WEIGHTS ---- */
  --weight-regular:     400;    /* Söhne Buch */
  --weight-medium:      500;    /* Söhne Kräftig */
  --weight-semibold:    600;    /* Söhne Halbfett */

  /* ---- TYPOGRAPHY: TRACKING ---- */
  --tracking-tight:     -0.04em;
  --tracking-snug:      -0.025em;
  --tracking-normal:    -0.01em;
  --tracking-wide:      0.04em;
  --tracking-label:     0.06em;

  /* ---- TYPOGRAPHY: LEADING ---- */
  --leading-none:       1;
  --leading-tight:      1.15;
  --leading-snug:       1.3;
  --leading-normal:     1.5;
  --leading-relaxed:    1.65;

  /* ---- SPACING ---- */
  --sp-1:    4px;
  --sp-2:    8px;
  --sp-3:    12px;
  --sp-4:    16px;
  --sp-5:    20px;
  --sp-6:    24px;
  --sp-8:    32px;
  --sp-10:   40px;
  --sp-12:   48px;
  --sp-16:   64px;
  --sp-20:   80px;
  --sp-24:   96px;
  --sp-32:   128px;

  /* ---- RADIUS ---- */
  --radius-sm:          4px;
  --radius-md:          6px;
  --radius-lg:          10px;
  --radius-xl:          14px;
  --radius-2xl:         16px;
  --radius-pill:        9999px;

  /* ---- SHADOWS ---- */
  --shadow-xs:          0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:          0 1px 3px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.03);
  --shadow-md:          0 1px 3px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.04);
  --shadow-lg:          0 2px 4px rgba(0,0,0,0.04), 0 12px 32px rgba(0,0,0,0.06), 0 48px 80px rgba(0,0,0,0.06);

  /* ---- TRANSITIONS ---- */
  --duration-fast:      120ms;
  --duration-base:      200ms;
  --duration-slow:      400ms;
  --ease:               cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- LAYOUT ---- */
  --max-width:          1200px;
  --max-width-wide:     1400px;
  --page-padding:       40px;
  --page-padding-sm:    24px;
}