/* css/tokens.css */
:root {
  /* =========================================
     COLOR PALETTE
     ========================================= */
  --color-warm-white: #F7F5F0;
  --color-black: #0D0D0D;
  --color-burnt-orange: #FF3D00;
  --color-border: #E0DED8;
  --color-white: #FFFFFF;
  --color-gray: #555555;

  /* Semantic Colors */
  --bg-base: var(--color-warm-white);
  --bg-surface: var(--color-white);
  --bg-inverse: var(--color-black);
  
  --text-primary: var(--color-black);
  --text-inverse: var(--color-warm-white);
  --text-accent: var(--color-burnt-orange);
  --text-muted: var(--color-gray);

  --border-subtle: var(--color-border);

  /* =========================================
     TYPOGRAPHY
     ========================================= */
  --font-heading: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;

  --tracking-display: -2px;
  --tracking-heading: -1px;
  --tracking-body: 0;

  /* Font Weights */
  --weight-light: 300;
  --weight-medium: 500;
  --weight-heavy: 800;

  /* =========================================
     SPACING (4pt scale)
     ========================================= */
  --space-2: 0.125rem;  /* 2px */
  --space-4: 0.25rem;   /* 4px */
  --space-8: 0.5rem;    /* 8px */
  --space-12: 0.75rem;  /* 12px */
  --space-16: 1rem;     /* 16px */
  --space-24: 1.5rem;   /* 24px */
  --space-32: 2rem;     /* 32px */
  --space-48: 3rem;     /* 48px */
  --space-64: 4rem;     /* 64px */
  --space-96: 6rem;     /* 96px */
  --space-128: 8rem;    /* 128px */

  /* =========================================
     BORDERS & RADIUS
     ========================================= */
  --border-width-thin: 0.5px;
  --border-width-base: 1px;
  --radius-component: 4px;
  --radius-card: 8px;
  
  /* =========================================
     TRANSITIONS
     ========================================= */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);

  /* =========================================
     INTERACTIONS (Animazioni & Cursore)
     ========================================= */
  --anim-speed-fast: 200ms;
  --anim-speed-base: 400ms;
  --anim-speed-slow: 800ms;
  --anim-speed-crawl: 1200ms;
  --anim-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --anim-ease-in-out: cubic-bezier(0.87, 0, 0.13, 1);
  --anim-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --cursor-size: 10px;
  --cursor-size-hover: 36px;

  /* Hero Canvas Addon */
  --canvas-particle-color: #0D0D0D;
  --canvas-particle-accent: #FF3D00;
  --canvas-particle-opacity-min: 0.05;
  --canvas-particle-opacity-max: 0.12;
  --canvas-particle-opacity-accent: 0.15;
  --canvas-repulsion-radius: 120px;
  --canvas-repulsion-strength: 0.08;
  --canvas-float-speed-min: 0.2;
  --canvas-float-speed-max: 0.6;

  /* Circle Fill Addon */
  --circle-fill-threshold: 0.85;
  --circle-message-delay: 300ms;
  --circle-message-speed: 600ms;

  /* Pensieri Section Addon */
  --post-type-article-bg: #0D0D0D;
  --post-type-article-color: #F7F5F0;
  --post-type-note-bg: var(--bg-surface);
  --post-type-note-color: var(--text-primary);
  --reading-width: 680px;
  --reading-line-height: 1.75;

  /* Buyer Personas Addon */
  --persona-card-border: 0.5px solid #333333;
  --persona-card-border-hover: 0.5px solid var(--text-accent);
  --persona-card-bg: #161616;
  --persona-card-bg-hover: #1A1A1A;
  --persona-card-muted: #444444;
  --persona-section-bg: #0D0D0D;

  --guarantee-icon-size: 32px;
  --scenario-number-size: 72px;

  --roi-number-color: var(--text-accent);
  --roi-number-size: clamp(48px, 6vw, 72px);
  --process-step-line: 0.5px solid var(--border-subtle);

  /* Case Study Addon */
  --case-stat-number: clamp(40px, 5vw, 64px);
  --case-stack-tag-bg: #1A1A1A;
  --case-stack-tag-color: #888888;
}