/* ==================================================================
   Amorazza – tokens.css
   ==================================================================
   Design-System-Variablen: Farben, Typografie-Skala, Spacing, 
   Layout-Konstanten, Safe-Area-Insets.
   
   Wird als ERSTES geladen, vor base.css und components.css.
   Wird auf JEDER Seite geladen (Web + App).
   ================================================================== */
:root {
  --rose-50:  #fdf6f3;
  --rose-100: #fbeaf0;
  --rose-200: #f4c0d1;
  --rose-400: #d4537e;
  --rose-600: #993556;
  --rose-800: #4b1528;

  --ink-900: #2c2c2a;
  --ink-700: #5f5e5a;
  --ink-500: #888780;
  --ink-300: #d3d1c7;
  --ink-100: #f4f2ed;

  --bg:       #fdfcfa;
  --surface:  #ffffff;
  --border:   rgba(0, 0, 0, 0.08);
  --border-2: rgba(0, 0, 0, 0.16);

  --ok:       #0a7c3a;
  --warn:     #b8860b;
  --err:      #c0392b;

  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 20px;

  --shadow-sm: 0 1px 2px rgba(40,20,30,0.04);
  --shadow-md: 0 4px 16px rgba(40,20,30,0.06);

  /* ==================================================================
     TYPOGRAFIE-SKALA v004 – nur 5 Variablen für ALLEN Text im System
     ==================================================================
     Im App-Frame (WebView ohne Pinch-Zoom) müssen Schriften großzügig
     sein. Mindestwerte sind so gewählt, dass auch reife Augen alles
     ohne Anstrengung lesen können.
     ================================================================== */

  --fs-meta:   clamp(14px, 3vw, 15px);     /* Captions, Tags, Footer, Mini-Buttons, Tab-Labels */
  --fs-body:   clamp(17px, 4vw, 19px);     /* Standardtext, Bio, Form-Labels, Buttons */
  --fs-strong: clamp(20px, 4.5vw, 23px);   /* H3, hervorgehobener Text, Card-Titel */
  --fs-title:  clamp(26px, 5.5vw, 34px);   /* H2, Sektionsüberschriften, Page-Titles */
  --fs-hero:   clamp(36px, 7vw, 56px);     /* Hero-Marks, Pre-Launch-Headlines */

  /* Sonderfälle (NICHT in der 5-Variablen-Skala) */
  --fs-input: 16px;                         /* Inputs FIX 16px - sonst iOS Auto-Zoom */
  --fs-icon:  clamp(40px, 8vw, 56px);       /* Decorative Icons (Hero-Emoji etc.) */

  /* Fluid Spacing */
  --space-x:  clamp(16px, 4vw, 24px);
  --space-y:  clamp(20px, 4vw, 32px);

  /* Lesefluss-optimale Spaltenbreite (Einspaltigkeit auch auf Desktop) */
  --content-width: 640px;

  /* Tap-Target-Standard (Apple/Google: 44 px – wir nehmen 48 als Puffer) */
  --tap-min:  48px;
  --tap-nav:  56px;  /* App-Tabs und Bottom-Navs etwas größer */

  /* Safe-Area-Insets für PWA / native App-Frames */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
}