/* ═══════════════════════════════════════════════════
   ELLO CONSULTORIA — DESIGN SYSTEM TOKENS v1.0
   Source: https://elloconsultoria.com/
   ═══════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* ── Brand Core (official_from_source) ── */
  --color-brand-primary: #FF5722;
  --color-brand-primary-hover: #E64A19;
  --color-brand-primary-active: #D84315;
  --color-brand-primary-light: #FF8A65;
  --color-brand-primary-lighter: #FFCCBC;
  --color-brand-primary-lightest: #FBE9E7;
  --color-brand-primary-contrast: #FFFFFF;
  --color-brand-secondary: #FFC978;
  --color-brand-secondary-light: #FFE0B2;
  --color-brand-secondary-contrast: #3E2723;

  /* ── Accent System ── */
  --color-accent-1: #FF5722;
  --color-accent-2: #FFC978;
  --color-accent-3: #FF8A65;
  --color-accent-4: #1B5E20;
  --color-accent-5: #0D47A1;

  /* ── Content ── */
  --color-content-primary: #FFFFFF;
  --color-content-secondary: #D4D8DD;
  --color-content-tertiary: #9EA5AC;
  --color-content-inverse: #0F0F0F;
  --color-content-link: #FF5722;

  /* ── Background (dark-first, official_from_source) ── */
  --color-background-screen: #000000;
  --color-background-elevated: #151515;
  --color-background-subtle: #1A1A1A;
  --color-background-muted: #1F1F1F;
  --color-background-overlay: rgba(0, 0, 0, 0.6);

  /* ── Border ── */
  --color-border-default: #1F1F1F;
  --color-border-subtle: rgba(255, 255, 255, 0.06);
  --color-border-strong: rgba(255, 255, 255, 0.12);
  --color-border-focus: #FF5722;

  /* ── Interactive ── */
  --color-interactive-primary: #FF5722;
  --color-interactive-primary-hover: #E64A19;
  --color-interactive-primary-light: rgba(255, 87, 34, 0.1);
  --color-interactive-secondary: rgba(255, 255, 255, 0.08);
  --color-interactive-control: #FFFFFF;

  /* ── Feedback ── */
  --color-feedback-success: #4CAF50;
  --color-feedback-success-bg: rgba(76, 175, 80, 0.12);
  --color-feedback-warning: #FFC107;
  --color-feedback-warning-bg: rgba(255, 193, 7, 0.12);
  --color-feedback-danger: #F44336;
  --color-feedback-danger-bg: rgba(244, 67, 54, 0.12);
  --color-feedback-info: #2196F3;
  --color-feedback-info-bg: rgba(33, 150, 243, 0.12);

  /* ── Chart ── */
  --color-chart-1: #FF5722;
  --color-chart-2: #FFC978;
  --color-chart-3: #4CAF50;
  --color-chart-4: #2196F3;
  --color-chart-5: #FF8A65;
  --color-chart-6: #9C27B0;
  --color-chart-track: #1F1F1F;

  /* ── Typography ── */
  --font-family: 'Nunito Sans', sans-serif;
  --font-size-display-large: 3rem;
  --font-size-display-medium: 2.5rem;
  --font-size-title-screen: 2rem;
  --font-size-title-section: 1.75rem;
  --font-size-title-subsection: 1.5rem;
  --font-size-title-body: 1.25rem;
  --font-size-body-large: 1.1rem;
  --font-size-body-default: 1rem;
  --font-size-body-small: 0.875rem;
  --font-size-label: 0.85rem;
  --font-size-caption: 0.75rem;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --line-height-tight: 1.2;
  --line-height-heading: 1.3;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;
  --line-height-loose: 1.8;

  /* ── Spacing ── */
  --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px;
  --space-24: 24px; --space-32: 32px; --space-40: 40px; --space-48: 48px;
  --space-56: 56px; --space-64: 64px; --space-72: 72px; --space-80: 80px;
  --space-96: 96px; --space-112: 112px; --space-128: 128px;

  /* ── Padding ── */
  --padding-xs: 8px; --padding-sm: 16px; --padding-md: 24px; --padding-lg: 32px; --padding-xl: 48px;

  /* ── Radius ── */
  --radius-small: 8px;
  --radius-medium: 12px;
  --radius-large: 16px;
  --radius-x-large: 24px;
  --radius-pill: 999px;

  /* ── Elevation ── */
  --shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-low: 0 4px 16px rgba(0, 0, 0, 0.2);
  --shadow-medium: 0 10px 30px rgba(0, 0, 0, 0.3);
  --shadow-high: 0 20px 40px rgba(0, 0, 0, 0.45);
  --shadow-overlay: 0 30px 60px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 8px 25px rgba(255, 87, 34, 0.3);
  --shadow-glow-hover: 0 12px 35px rgba(255, 87, 34, 0.4);

  /* ── Motion ── */
  --motion-fast: 150ms;
  --motion-base: 300ms;
  --motion-slow: 500ms;
  --motion-easing: ease;
  --motion-easing-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* ── Size ── */
  --size-icon-sm: 16px;
  --size-icon-md: 24px;
  --size-icon-lg: 32px;
  --size-avatar-sm: 32px;
  --size-avatar-md: 40px;
  --size-avatar-lg: 56px;
  --size-avatar-xl: 80px;
}