/**
 * EZ3 Studio — Design System Tokens
 * Version 3
 * ─────────────────────────────────────────────────────────────────────────────
 * Single source of truth for all visual decisions.
 * Import this file first in every HTML/CSS file that belongs to this project.
 *
 * Usage:  color: var(--color-text-primary);
 *         padding: var(--space-6);
 * ─────────────────────────────────────────────────────────────────────────────
 */

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

:root {

  /* ───────────────────────────────────────────────────────────────────────────
   * COLORS
   * ─────────────────────────────────────────────────────────────────────────── */

  /* Brand — gold palette */
  --color-gold:       #B88953;
  --color-gold-light: #D4A76A;
  --color-gold-dark:  #8A6636;

  /* Background — layered dark surfaces */
  --color-bg:           #282828;
  --color-bg-raised:    #313131;
  --color-bg-card:      #2E2E2E;

  /* Section backgrounds */
  --color-section-dark:  #212121;
  --color-section-light: #f5f5f5;

  /* Surface / Glass — translucent overlays */
  --color-surface:        rgba(255, 255, 255, 0.05);
  --color-surface-hover:  rgba(255, 255, 255, 0.08);
  --color-border:         rgba(255, 255, 255, 0.10);
  --color-border-strong:  rgba(255, 255, 255, 0.20);

  /* Text — white at various opacities */
  --color-text-primary:   #FFFFFF;
  --color-text-secondary: rgba(255, 255, 255, 0.65);
  --color-text-tertiary:  rgba(255, 255, 255, 0.38);
  --color-text-disabled:  rgba(255, 255, 255, 0.20);
  --color-text-inverse:   #282828;

  /* Text — para light surfaces (light theme / componentes claros) */
  --color-text-black: #1E1E1E;   /* corpo de texto em fundo branco */
  --color-text-gray:  #777777;   /* texto secundário / cargo / meta */

  /* Semantic — system feedback colors */
  --color-success: #4CAF50;
  --color-warning: #F59E0B;
  --color-error:   #EF4444;
  --color-info:    #3B82F6;


  /* ───────────────────────────────────────────────────────────────────────────
   * TYPOGRAPHY
   * ─────────────────────────────────────────────────────────────────────────── */

  /* Family */
  --font-family: 'Albert Sans', sans-serif;

  /* Weights */
  --font-weight-light:   300;
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;
  --font-weight-black:   900;

  /* H1 — Section Titles (Albert Sans Bold) */
  --text-h1-size: 64px;
  --text-h1-line: 64px;
  --text-h1-ls:   -1.88px;    /* -0.029em at 64px */
  --text-h1-weight: 700;      /* Bold */

  /* H1 — Slider variant (Albert Sans Light) */
  --text-h1-slider-size: 64px;
  --text-h1-slider-line: 16px;
  --text-h1-slider-ls:   0;
  --text-h1-slider-weight: 300;  /* Light */

  /* H2 (Albert Sans Light) */
  --text-h2-size: 48px;
  --text-h2-line: 48px;
  --text-h2-weight: 300;      /* Light */

  /* H3 (Albert Sans Light) */
  --text-h3-size: 36px;
  --text-h3-line: 36px;
  --text-h3-weight: 300;      /* Light */

  /* H4 (Albert Sans Light) */
  --text-h4-size: 24px;
  --text-h4-line: 24px;
  --text-h4-weight: 300;      /* Light */

  /* H5 (Albert Sans Light) */
  --text-h5-size: 20px;
  --text-h5-line: 20px;
  --text-h5-weight: 300;      /* Light */

  /* H6 (Albert Sans Light) */
  --text-h6-size: 16px;
  --text-h6-line: 16px;
  --text-h6-weight: 300;      /* Light */

  /* Body scale */
  --text-body-lg: 16px;
  --text-body:    14px;
  --text-body-sm: 13px;
  --text-caption: 11px;
  --text-label:    9px;

  /* Shared body line-height multiplier */
  --line-body: 1.7;


  /* ───────────────────────────────────────────────────────────────────────────
   * SPACING — 4px base grid
   * ─────────────────────────────────────────────────────────────────────────── */

  --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;


  /* ───────────────────────────────────────────────────────────────────────────
   * BORDER RADIUS
   * ─────────────────────────────────────────────────────────────────────────── */

  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-xl:   16px;
  --radius-full: 100px;


  /* ───────────────────────────────────────────────────────────────────────────
   * SHADOWS
   * ─────────────────────────────────────────────────────────────────────────── */

  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.30);
  --shadow-md:   0 4px 16px rgba(0, 0, 0, 0.40);
  --shadow-lg:   0 16px 48px rgba(0, 0, 0, 0.50);
  --shadow-gold: 0 0 32px rgba(184, 137, 83, 0.20);


  /* ───────────────────────────────────────────────────────────────────────────
   * MOTION
   * ─────────────────────────────────────────────────────────────────────────── */

  /* Durations */
  --duration-fast:   150ms;
  --duration-base:   300ms;
  --duration-slow:   600ms;
  --duration-slower: 1000ms;

  /* Easing curves */
  --ease-default: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in:      cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-out:     cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);


  /* ───────────────────────────────────────────────────────────────────────────
   * Z-INDEX SCALE
   * ─────────────────────────────────────────────────────────────────────────── */

  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   1000;
  --z-toast:   9000;
  --z-cursor:  9999;

}