/* ===================================
   Engadina Now - Design Tokens
   Alpine Whisper Design Language
   =================================== */

:root {
  /* ===== Primary Colors - Toni naturali Engadina ===== */
  --sky-light: #E8F4F8;        /* Cielo mattutino */
  --lake-blue: #4A90A4;        /* Lago Silvaplana */
  --stone-grey: #8B9A9F;       /* Pietra alpina */
  --snow-white: #FAFBFC;       /* Neve fresca */
  --forest-dark: #2C3E50;      /* Bosco cembro */

  /* ===== Status Colors - Mai urlati, sempre muted ===== */
  --status-ok: #52A675;        /* Verde bosco (not neon green) */
  --status-attention: #D4A574; /* Ambra (not bright yellow) */
  --status-warning: #C67B70;   /* Terracotta (not red alert) */
  --status-info: #6B9AC4;      /* Azzurro ghiacciaio */

  /* ===== Backgrounds ===== */
  --bg-app: #F7F8FA;           /* Grigio nebbia leggera */
  --bg-card: #FFFFFF;          /* Bianco caldo */
  --bg-card-hover: #FCFDFD;    /* Quasi bianco al hover */
  --bg-overlay: rgba(0,0,0,0.02); /* Overlay gentile */

  /* ===== Text Hierarchy - Mai nero puro ===== */
  --text-primary: #2C3E50;     /* Quasi nero, warm */
  --text-secondary: #7A8B95;   /* Grigio pietra */
  --text-tertiary: #A8B5BD;    /* Grigio nebbia */
  --text-disabled: #D1D5DB;    /* Grigio ultra light */

  /* ===== Borders & Dividers ===== */
  --border-light: rgba(0, 0, 0, 0.04);
  --border-medium: rgba(0, 0, 0, 0.08);
  --divider: rgba(0, 0, 0, 0.06);

  /* ===== Shadows - Sempre soft, mai dure ===== */
  --shadow-sm: 0 1px 3px rgba(76, 144, 164, 0.06);
  --shadow-md: 0 2px 8px rgba(76, 144, 164, 0.08);
  --shadow-lg: 0 4px 16px rgba(76, 144, 164, 0.12);
  --shadow-hover: 0 6px 20px rgba(76, 144, 164, 0.15);

  /* ===== Gradients ===== */
  --gradient-sky: linear-gradient(180deg, #D6EBF3 0%, #F5F8FA 100%);
  --gradient-card: linear-gradient(180deg, #FFFFFF 0%, #FCFDFD 100%);

  /* ===== Typography Scale - Swiss Clarity ===== */
  /* Font Family - System native per familiarità */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
                 "Helvetica Neue", Arial, sans-serif;

  /* Font Sizes - Scale armonica */
  --text-hero: 32px;      /* Temperatura principale */
  --text-xlarge: 24px;    /* Hero secondary */
  --text-large: 20px;     /* Titoli card */
  --text-body: 16px;      /* Corpo testo */
  --text-small: 14px;     /* Info secondarie */
  --text-xsmall: 12px;    /* Timestamp, label */

  /* Font Weights - Mai ultra-bold */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;  /* Max weight usato */

  /* Line Heights - Respira */
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* Letter Spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.01em;

  /* ===== Spacing Scale - Sistema 4px base ===== */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;
  --space-3xl: 32px;
  --space-4xl: 40px;

  /* Component Spacing */
  --card-padding: 20px;
  --card-gap: 12px;
  --section-gap: 24px;
  --nav-height: 60px;

  /* ===== Border Radius ===== */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ===== Animation Timing - Tutto smooth ===== */
  /* Durations */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 350ms;

  /* Easing - Naturale */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}