/* ============================================================
   RAIZ HOST — Colors & Type Tokens
   v1.0 | raizhost.com.br
   Espelha o design system publicado (colors_and_type.css).
   Dark é o padrão; .theme-light inverte a paleta.
   ============================================================ */

:root {
  /* ---------- COLOR · Brand ---------- */
  --color-brand:        #3AAA35;
  --color-brand-dark:   #2D8A29;
  --color-brand-light:  #E8F5E7;
  --color-brand-muted:  rgba(58,170,53,0.12);

  /* ---------- COLOR · Neutrals (dark base) ---------- */
  --color-bg-base:      #0A0A0A;
  --color-bg-surface:   #111D11;
  --color-bg-elevated:  #1A2A1A;
  --color-bg-light:     #F5F5F0;
  --color-bg-white:     #FFFFFF;

  /* ---------- COLOR · Text ---------- */
  --color-text-primary:   #FFFFFF;
  --color-text-secondary: rgba(255,255,255,0.65);
  --color-text-muted:     rgba(255,255,255,0.35);
  --color-text-on-light:  #0A0A0A;
  --color-text-brand:     #3AAA35;

  /* ---------- COLOR · Semantic ---------- */
  --color-success:    #3AAA35;  --color-success-bg: rgba(58,170,53,0.10);
  --color-error:      #FF4444;  --color-error-bg:   rgba(255,68,68,0.10);
  --color-warning:    #F5A623;  --color-warning-bg: rgba(245,166,35,0.10);
  --color-info:       #4DA6FF;  --color-info-bg:    rgba(77,166,255,0.10);

  /* ---------- COLOR · Borders ---------- */
  --color-border:        rgba(255,255,255,0.08);
  --color-border-medium: rgba(255,255,255,0.15);
  --color-border-brand:  rgba(58,170,53,0.40);

  /* ---------- TYPE · Families ---------- */
  --font-display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --font-body:    'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Space Grotesk', ui-monospace, 'SFMono-Regular', monospace;

  /* ---------- TYPE · Scale ---------- */
  --text-display-lg: 64px;
  --text-display:    48px;
  --text-h1:         32px;
  --text-h2:         24px;
  --text-h3:         20px;
  --text-h4:         18px;
  --text-body-lg:    17px;
  --text-body:       15px;
  --text-body-sm:    13px;
  --text-caption:    12px;
  --text-label:      11px;

  /* ---------- TYPE · Weights ---------- */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  /* ---------- TYPE · Line heights ---------- */
  --leading-tight:   1.1;
  --leading-snug:    1.3;
  --leading-normal:  1.6;
  --leading-relaxed: 1.8;

  /* ---------- TYPE · Letter spacing ---------- */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.1em;
  --tracking-widest:  0.14em;

  /* ---------- SPACING · 4px base ---------- */
  --space-1:   4px;   --space-2:   8px;   --space-3:  12px;
  --space-4:  16px;   --space-5:  20px;   --space-6:  24px;
  --space-8:  32px;   --space-10: 40px;   --space-12: 48px;
  --space-16: 64px;   --space-20: 80px;   --space-24: 96px;
  --space-32: 128px;

  /* ---------- BORDERS ---------- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 100px;
  --border-thin:  0.5px;
  --border-base:  1px;
  --border-thick: 2px;

  /* ---------- SHADOWS ---------- */
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:    0 8px 32px rgba(0,0,0,0.6);
  --shadow-brand: 0 4px 24px rgba(58,170,53,0.25);

  /* ---------- TRANSITIONS ---------- */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 300ms cubic-bezier(0.34,1.56,0.64,1);

  /* ---------- LAYOUT ---------- */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;
  --container-app: 1160px;

  /* ---------- Z-INDEX ---------- */
  --z-base: 0;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */
.t-display-xl {
  font-family: var(--font-display); font-size: var(--text-display-lg);
  font-weight: var(--weight-black); line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.t-display {
  font-family: var(--font-display); font-size: var(--text-display);
  font-weight: var(--weight-black); line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.t-h2 { font-family: var(--font-body); font-size: var(--text-h2); font-weight: var(--weight-bold); line-height: var(--leading-snug); }
.t-body-sm { font-family: var(--font-body); font-size: var(--text-body-sm); line-height: var(--leading-normal); }
.t-caption { font-family: var(--font-body); font-size: var(--text-caption); color: var(--color-text-muted); }
.t-mono { font-family: var(--font-mono); }

.t-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-label); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest); text-transform: uppercase;
  color: var(--color-brand);
}

.text-brand     { color: var(--color-brand); }
.text-primary   { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted     { color: var(--color-text-muted); }