/* ==============================================
   DESIGN SYSTEM — CSS Variables
   "Tailwind feeling" sem o peso do framework
   ============================================== */

:root {
  /* --- Cores --- */
  --color-bg:         #FAFAFA;
  --color-surface:    #FFFFFF;
  --color-text:       #1A1A1A;
  --color-text-soft:  #555555;
  --color-text-muted: #888888;
  --color-primary:    #2563EB;
  --color-primary-hover: #1D4ED8;
  --color-accent:     #F59E0B;
  --color-border:     #E5E7EB;
  --color-border-hover: #D1D5DB;
  --color-success:    #10B981;
  --color-error:      #EF4444;
  --color-code-bg:    #F3F4F6;

  /* --- Destaques (Jon Benson / Makepeace) --- */
  --color-highlight:       #F59E0B;
  --color-highlight-bg:    #FEF3C7;
  --color-highlight-soft:  #FFFBEB;
  --color-callout-bg:      #EFF6FF;
  --color-callout-border:  #BFDBFE;
  --color-tip-bg:          #ECFDF5;
  --color-tip-border:      #A7F3D0;
  --color-rule-bg:         #FEF2F2;
  --color-rule-border:     #FECACA;
  --color-quote-bg:        #F9FAFB;
  --color-section-number:  #2563EB;

  /* --- Tipografia --- */
  --font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Roboto", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono:   "SF Mono", "Roboto Mono", "Consolas", monospace;

  --text-xs:    0.75rem;   /* 12px */
  --text-sm:    0.875rem;  /* 14px */
  --text-base:  1rem;      /* 16px */
  --text-lg:    1.125rem;  /* 18px */
  --text-xl:    1.25rem;   /* 20px */
  --text-2xl:   1.5rem;    /* 24px */
  --text-3xl:   1.875rem;  /* 30px */
  --text-4xl:   2.25rem;   /* 36px */

  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;

  --weight-normal:  400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  /* --- Espaçamento --- */
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */

  /* --- Bordas --- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* --- Sombras --- */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:  0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg:  0 10px 15px rgba(0, 0, 0, 0.1);

  /* --- Transições --- */
  --transition-fast:   150ms cubic-bezier(0.19, 1, 0.22, 1);
  --transition-normal: 250ms cubic-bezier(0.19, 1, 0.22, 1);
  --transition-slow:   400ms cubic-bezier(0.19, 1, 0.22, 1);

  /* --- Layout --- */
  --max-width:     720px;
  --max-width-lg:  1024px;
  --nav-height:    56px;
  --bottom-nav-h:  64px;

  /* --- Breakpoints (referência, usados via media queries) --- */
  /* mobile:  < 640px   */
  /* tablet:  640-1024px */
  /* desktop: > 1024px  */

  /* --- Z-index --- */
  --z-nav:     100;
  --z-modal:   200;
  --z-tooltip: 300;

  /* --- Icon System --- */
  --icon-glow-color: rgba(37, 99, 235, 0.35);
  --icon-glow-color-strong: rgba(37, 99, 235, 0.55);
}

/* ==============================================
   ICON KEYFRAME ANIMATIONS
   Steve Jobs minimalism — subtle, purposeful motion
   ============================================== */

@keyframes iconGlow {
  0%   { box-shadow: 0 0 0 0 var(--icon-glow-color); }
  50%  { box-shadow: 0 0 12px 4px var(--icon-glow-color-strong); }
  100% { box-shadow: 0 0 0 0 var(--icon-glow-color); }
}

@keyframes iconPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}