/* ============================================================
   PuroArchive – Design Tokens (variables.css)
   FINAL VERSION – nicht ändern ohne Absprache
   ============================================================ */

:root {
  /* === FARBEN === */
  --color-bg:              #F0EDE6;
  --color-surface:         #FAFAF8;
  --color-surface-alt:     #EEEBE3;
  --color-primary:         #D94F1E;
  --color-primary-dark:    #B8401A;
  --color-primary-light:   #E8734A;
  --color-text:            #0D0D0D;
  --color-text-muted:      #6B6560;
  --color-text-inverse:    #FAFAF8;
  --color-border:          rgba(13,13,13,0.10);
  --color-overlay:         rgba(13,13,13,0.50);

  /* Kategorie-Farben (Erdtöne) */
  --cat-moebelstuck:       #C4A882;
  --cat-leuchte:           #D4C17A;
  --cat-skulptur:          #8FA68E;
  --cat-illustration:      #B8967A;
  --cat-kunst:             #9B8DB0;
  --cat-typografie:        #7A9BB8;
  --cat-architektur:       #A8A8A0;
  --cat-konzept:           #C4B5A0;

  /* Status */
  --color-success:         #5A8A6A;
  --color-error:           #C45A4A;
  --color-pending:         #C4A060;

  /* === TYPOGRAFIE === */
  /* Inter via Google Fonts – siehe base.css @import */
  --font-primary:          'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:             'JetBrains Mono', 'Courier New', monospace;

  --font-size-xs:          11px;
  --font-size-sm:          13px;
  --font-size-base:        15px;
  --font-size-lg:          17px;
  --font-size-xl:          22px;
  --font-size-2xl:         28px;
  --font-size-3xl:         36px;
  --font-size-4xl:         48px;

  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-bold:      700;
  --font-weight-black:     900;

  --letter-spacing-tight:  -0.03em;
  --letter-spacing-normal:  0;
  --letter-spacing-wide:    0.08em;
  --letter-spacing-wider:   0.15em;

  /* === SPACING (8pt Grid) === */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;

  /* === SAFE AREAS (iOS) === */
  --safe-top:    env(safe-area-inset-top, 44px);
  --safe-bottom: env(safe-area-inset-bottom, 34px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);

  /* === BORDER RADIUS === */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-2xl:  36px;
  --radius-full: 9999px;

  /* === SHADOWS === */
  --shadow-sm:  0 1px 3px rgba(13,13,13,0.06);
  --shadow-md:  0 4px 16px rgba(13,13,13,0.10);
  --shadow-lg:  0 8px 32px rgba(13,13,13,0.14);
  --shadow-xl:  0 16px 48px rgba(13,13,13,0.18);

  /* === TRANSITIONS === */
  --transition-fast:    150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:    280ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:    400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring:  500ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-screen:  320ms cubic-bezier(0.72, 0, 0.28, 1);
}