/**
 * ============================================================
 * DESIGN SYSTEM — ESTAÇÃO SOLAR
 * tokens.css — Variáveis globais / Design Tokens
 * ============================================================
 *
 * Paleta Golden Meadow (palette.scss):
 *   - Sunflower Gold: #FBB02D  (primária — amarelo solar)
 *   - Golden Glow:    #F3DE2C  (amarelo brilhante)
 *   - Blaze Orange:   #FB6107  (laranja solar)
 *   - Lime Moss:      #7CB518  (verde natureza)
 *   - Forest Moss:    #5C8001  (verde escuro — base dos gradientes)
 *
 * Hierarquia de tokens:
 *   1. Primitives  → valores brutos (hex, rem, ms)
 *   2. Semantics   → intenção de uso (primary, surface, text)
 *   3. Components  → tokens específicos por componente
 * ============================================================
 */

/* ─────────────────────────────────────────
   1. PRIMITIVES — Paleta base do projeto
   ───────────────────────────────────────── */
:root {

  /* ── Amarelo / Dourado (sunflower-gold + golden-glow) ─ */
  --yellow-50:  #FFFBEB;
  --yellow-100: #FEF3C7;
  --yellow-200: #FDE68A;
  --yellow-300: #FCD34D;
  --yellow-400: #F3DE2C;   /* ← golden-glow */
  --yellow-500: #FBB02D;   /* ← sunflower-gold — COR PRINCIPAL */
  --yellow-600: #D4890A;
  --yellow-700: #B26A00;
  --yellow-800: #8B5000;
  --yellow-900: #6B3A00;

  /* ── Verde (lime-moss + forest-moss) ─ */
  --green-50:  #F0F7E0;
  --green-100: #DAEDB3;
  --green-200: #C0E07A;
  --green-300: #A3D147;
  --green-400: #8FC41E;
  --green-500: #7CB518;    /* ← lime-moss — COR SECUNDÁRIA */
  --green-600: #6A9E12;
  --green-700: #5C8001;    /* ← forest-moss — BASE DOS GRADIENTES */
  --green-800: #4A6601;
  --green-900: #2F4500;

  /* ── Neutros (escala de cinza) ─ */
  --gray-0:   #FFFFFF;
  --gray-50:  #F8FAFC;
  --gray-100: #F1F5F9;
  --gray-200: #E2E8F0;
  --gray-300: #CBD5E1;
  --gray-400: #94A3B8;
  --gray-500: #64748B;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1E293B;
  --gray-900: #0F172A;

  /* ── Cores de status ─ */
  --red-500:    #EF4444;
  --orange-500: #FB6107;   /* ← blaze-orange */
  --lime-500:   #34D399;   /* verde-claro esmeralda (pegada ecológica, substituiu azul) */
  --teal-500:   #10B981;   /* verde esmeralda médio */
  --blue-500:   #34D399;   /* alias → aponta para lime-500 (sem azul no sistema) */

  /* ── Tipografia — Escala modular (1.25x) ─ */
  --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 */
  --text-5xl:  3rem;       /*  48px */
  --text-6xl:  3.75rem;    /*  60px */
  --text-7xl:  4.5rem;     /*  72px */

  /* ── Line-heights ─ */
  --leading-none:    1;
  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;
  --leading-loose:   2;

  /* ── Font weights ─ */
  --font-normal:    400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;
  --font-extrabold: 800;
  --font-black:     900;

  /* ── Espaçamento — Escala de 4px ─ */
  --space-0:   0;
  --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 */
  --space-24:  6rem;       /* 96px */
  --space-32:  8rem;       /* 128px */

  /* ── Border radius ─ */
  --radius-sm:   0.25rem;   /*  4px */
  --radius-md:   0.5rem;    /*  8px */
  --radius-lg:   0.75rem;   /* 12px */
  --radius-xl:   1rem;      /* 16px */
  --radius-2xl:  1.5rem;    /* 24px */
  --radius-full: 9999px;

  /* ── Shadows ─ */
  --shadow-sm:  0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10);
  --shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.10);
  --shadow-xl:  0 20px 25px -5px rgb(0 0 0 / 0.10), 0 8px 10px -6px rgb(0 0 0 / 0.10);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --shadow-glow-yellow: 0 0 30px rgb(251 176 45 / 0.35);   /* sunflower-gold */
  --shadow-glow-green:  0 0 30px rgb(92 128 1 / 0.35);    /* forest-moss */

  /* ── 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);

  /* ── Z-index ─ */
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-sticky:  300;
  --z-toast:   400;

  /* ── Breakpoints (referência — não usados diretamente em CSS) ─ */
  /* sm: 640px | md: 768px | lg: 1024px | xl: 1280px | 2xl: 1536px */

  /* ── Containers ─ */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;
}


/* ─────────────────────────────────────────
   2. SEMANTICS — Tokens por intenção de uso
   ───────────────────────────────────────── */
:root {

  /* ── Cores de marca ─ */
  --color-primary:        var(--yellow-500);    /* Amarelo solar — ação, destaque */
  --color-primary-hover:  var(--yellow-600);
  --color-primary-light:  var(--yellow-100);
  --color-primary-dark:   var(--yellow-700);

  --color-secondary:       var(--green-500);    /* Verde natureza — confirmação, eco */
  --color-secondary-hover: var(--green-600);
  --color-secondary-light: var(--green-50);
  --color-secondary-dark:  var(--green-800);

  /* ── Superfícies ─ */
  --color-surface:         var(--gray-0);       /* Fundo branco padrão */
  --color-surface-alt:     var(--gray-50);      /* Fundo de seções alternadas */
  --color-surface-dark:    var(--gray-900);     /* Fundo de seções escuras */
  --color-surface-card:    var(--gray-0);       /* Fundo de cards */

  /* ── Texto ─ */
  --color-text-primary:   var(--gray-900);      /* Títulos, texto principal */
  --color-text-secondary: var(--gray-600);      /* Subtítulos, corpo */
  --color-text-muted:     var(--gray-400);      /* Placeholders, hints */
  --color-text-inverse:   var(--gray-0);        /* Texto sobre fundo escuro */
  --color-text-brand:     var(--yellow-500);    /* Texto amarelo de destaque */
  --color-text-accent:    var(--green-600);     /* Texto verde de destaque */

  /* ── Bordas ─ */
  --color-border:         var(--gray-200);
  --color-border-focus:   var(--yellow-500);

  /* ── Status / Feedback ─ */
  --color-success: var(--green-500);
  --color-warning: var(--yellow-500);
  --color-error:   var(--red-500);
  --color-info:    var(--teal-500);  /* verde esmeralda */

  /* ── Gradientes — tema claro minimalista ─ */
  --gradient-hero:      linear-gradient(150deg, #FDFCF8 0%, #F4F9F1 55%, #FFF8E8 100%);
  --gradient-primary:   linear-gradient(135deg, var(--yellow-500) 0%, var(--yellow-600) 100%);
  --gradient-solar:     linear-gradient(135deg, var(--yellow-400) 0%, var(--orange-500) 100%);
  --gradient-eco:       linear-gradient(135deg, var(--green-700) 0%, var(--green-500) 100%);
  --gradient-card-dark: linear-gradient(145deg, #FFFFFF 0%, #F8FAFC 100%);
  --gradient-text:      linear-gradient(90deg, var(--yellow-600), var(--green-600));
}


/* ─────────────────────────────────────────
   3. COMPONENTS — Tokens por componente
   ───────────────────────────────────────── */
:root {

  /* ── Botão Primário (CTA) ─ */
  --btn-primary-bg:           var(--color-primary);
  --btn-primary-bg-hover:     var(--color-primary-hover);
  --btn-primary-text:         var(--gray-900);
  --btn-primary-shadow:       var(--shadow-glow-yellow);
  --btn-primary-radius:       var(--radius-full);
  --btn-primary-padding:      var(--space-4) var(--space-8);
  --btn-primary-font-weight:  var(--font-bold);

  /* ── Botão Secundário (Ghost) ─ */
  --btn-secondary-bg:         transparent;
  --btn-secondary-border:     var(--color-primary);
  --btn-secondary-text:       var(--color-primary);
  --btn-secondary-radius:     var(--radius-full);

  /* ── Cards ─ */
  --card-bg:        var(--color-surface-card);
  --card-border:    var(--color-border);
  --card-radius:    var(--radius-xl);
  --card-shadow:    var(--shadow-md);
  --card-shadow-hover: var(--shadow-xl);
  --card-padding:   var(--space-6);

  /* ── Navbar ─ */
  --navbar-height:     72px;
  --navbar-bg:         rgba(255, 255, 255, 0.95);
  --navbar-bg-scroll:  rgba(255, 255, 255, 0.99);

  /* ── Badge ─ */
  --badge-radius: var(--radius-full);
  --badge-padding: var(--space-1) var(--space-3);

  /* ── WhatsApp Float Button ─ */
  --whatsapp-color:     #25D366;
  --whatsapp-size:      64px;
  --whatsapp-shadow:    0 8px 25px rgb(37 211 102 / 0.45);
  --whatsapp-bottom:    var(--space-6);
  --whatsapp-right:     var(--space-6);

  /* ── Section Spacing ─ */
  --section-py:     var(--space-20);
  --section-py-lg:  var(--space-32);
}