@charset "UTF-8";

/* ==========================================================================
   Alma Portuguesa - Design Tokens
   Tema filho: AlmaPortuguesa-child
   Carregado antes de css/custom.css

   Cores, tipografia e sombras: Figma "Alma Portuguesa" (coleções
   AP / Primitives + AP / Semantic, estilos de texto AP/* e efeitos AP/*).
   Espaçamento, border radius, line-height, pesos e transições: padrão da casa.
   ========================================================================== */

:root {
  /* —— 1.1 Cores – paleta (AP / Primitives) —— */
  --color-mint-50: #EEF7F4;
  --color-mint-100: #D7EDE6;
  --color-mint-500: #5BAA98;         /* Verde da marca – ação, links e acentos (paleta do cliente) */
  --color-mint-600: #4E9787;         /* Ação hover (500 escurecido) */
  --color-mint-700: #286B59;         /* Ação pressionada */
  --color-mint-800: #205646;
  --color-mint-900: #173F34;         /* Fundo escuro */
  --color-brown-700: #6D4F22;        /* Títulos (paleta do cliente) */
  --color-sand-50: #FAF8F4;          /* Fundo da página */
  --color-sand-100: #F1EBE1;
  --color-white: #FFFFFF;
  --color-neutral-200: #D9DFDA;      /* Bordas suaves / desabilitado */
  --color-neutral-500: #7A847F;      /* Borda de campo */
  --color-neutral-600: #626462;      /* Texto secundário */
  --color-neutral-900: #23352E;      /* Texto principal */
  --color-error-50: #FFF1EF;
  --color-error-700: #A73528;
  --color-success-50: #EEF7F0;
  --color-success-700: #296A3F;
  --color-info-50: #EEF4FA;
  --color-info-700: #285F8A;

  /* —— 1.2 Cores – semânticas (AP / Semantic) —— */
  --color-background-page: var(--color-sand-50);
  --color-background-surface: var(--color-white);
  --color-background-subtle: var(--color-mint-50);
  --color-background-inverse: var(--color-mint-900);
  --color-text-primary: var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-600);
  --color-text-heading: var(--color-brown-700);
  --color-text-inverse: var(--color-white);
  --color-text-link: var(--color-mint-500);
  --color-brand-accent: var(--color-mint-500);
  --color-action-default: var(--color-mint-500);
  --color-action-hover: var(--color-mint-600);
  --color-action-pressed: var(--color-mint-700);
  --color-action-disabled: var(--color-neutral-200);
  --color-border-subtle: var(--color-neutral-200);
  --color-border-control: var(--color-neutral-500);
  --color-border-focus: var(--color-mint-500);
  --color-feedback-error: var(--color-error-700);
  --color-feedback-error-bg: var(--color-error-50);
  --color-feedback-success: var(--color-success-700);
  --color-feedback-success-bg: var(--color-success-50);
  --color-feedback-info: var(--color-info-700);
  --color-feedback-info-bg: var(--color-info-50);

  /* —— 1.3 Sombras e foco (AP/Shadow/Soft + AP/Focus/Ring) —— */
  --shadow-soft: 0 4px 16px rgba(23, 64, 51, 0.08);
  --shadow-dropdown: 0 16px 40px rgba(23, 63, 52, 0.12);  /* Submenu do header */
  --shadow-focus-ring: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-border-focus);
  --overlay-mint-900-40: rgba(23, 63, 52, 0.4);             /* Overlay do menu mobile */
  --overlay-hero: rgba(3, 23, 18, 0.3);                     /* Película sobre o vídeo do hero (Figma 43:259) */
  --overlay-hero-internal: rgba(3, 23, 18, 0.6);            /* Película do hero interno (Figma 95:2495, 60%) */
  --overlay-cta: rgba(3, 23, 18, 0.5);                      /* Película sobre o vídeo do CTA (Figma 53:318) */
  --overlay-cta-gradient: linear-gradient(79deg, var(--color-mint-900) 3.6%, rgba(60, 165, 136, 0) 128.75%); /* CTA com imagem (Figma 111:9664) */

  /* —— 1.4 Layout ——
     Breakpoints do Figma (não funcionam como var em @media): tablet ≤ 980px, mobile ≤ 767px */
  --container-max-width: 1280px;
  --header-z-index: 99999;

  /* —— 1.5 Espaçamento —— */
  --space-5: 5px;
  --space-10: 10px;
  --space-15: 15px;
  --space-20: 20px;
  --space-25: 25px;
  --space-30: 30px;
  --space-35: 35px;
  --space-40: 40px;
  --space-45: 45px;
  --space-50: 50px;
  --space-55: 55px;
  --space-60: 60px;
  --space-65: 65px;
  --space-70: 70px;
  --space-75: 75px;
  --space-80: 80px;
  --space-85: 85px;
  --space-90: 90px;
  --space-95: 95px;
  --space-100: 100px;

  /* —— 1.6 Borda —— */
  --border-width-1: 1px;
  --border-width-2: 2px;

  /* —— 1.7 Border radius —— */
  --border-radius-5: 5px;
  --border-radius-10: 10px;
  --border-radius-15: 15px;
  --border-radius-20: 20px;
  --border-radius-25: 25px;
  --border-radius-30: 30px;
  --border-radius-35: 35px;
  --border-radius-40: 40px;
  --border-radius-45: 45px;
  --border-radius-50: 50px;
  --border-radius-pill: 999px;

  /* —— 1.8 Tipografia – famílias (Figma) —— */
  --font-family-raleway: "Raleway", Helvetica, Arial, sans-serif;
  --font-family-signature: "Cormorant Garamond", Georgia, serif;  /* AP/Home/Signature (itálico) */

  /* —— 1.9 Tipografia – pesos (Raleway no Figma) —— */
  --font-weight-extra-light: 200;  /* Hero da home */
  --font-weight-light: 300;        /* Display mobile */
  --font-weight-regular: 400;      /* Textos de corpo, assinatura */
  --font-weight-medium: 500;       /* Títulos de seção da home, hero mobile */
  --font-weight-semibold: 600;     /* Card, nav, label de campo */
  --font-weight-bold: 700;         /* H1–H3, botões, eyebrow */
  --font-weight-extra-bold: 800;   /* H4 */
  --font-weight-black: 900;        /* Display desktop */

  /* —— 1.10 Tipografia – escala (estilos de texto AP/*) —— */
  --font-size-hero-display: 90px;   /* AP/Approved/Display – título do hero da home */
  --font-size-hero: 72px;           /* AP/Home/Hero */
  --font-size-display: 56px;        /* AP/Display/Desktop */
  --font-size-signature: 52px;      /* AP/Home/Signature */
  --font-size-h1: 48px;             /* AP/Heading/H1 */
  --font-size-section: 48px;        /* AP/Home/Section */
  --font-size-hero-mobile: 36px;    /* AP/Home/Hero Mobile */
  --font-size-h2: 36px;             /* AP/Heading/H2 */
  --font-size-display-mobile: 32px; /* AP/Display/Mobile */
  --font-size-section-mobile: 28px; /* AP/Home/Section Mobile */
  --font-size-card: 28px;           /* AP/Home/Card */
  --font-size-h3: 24px;             /* AP/Heading/H3 */
  --font-size-h4: 20px;             /* AP/Heading/H4 */
  --font-size-body-large: 20px;     /* AP/Body/Large */
  --font-size-body-home: 18px;      /* AP/Home/Body */
  --font-size-base: 16px;           /* AP/Body/Default + AP/Label/Button */
  --font-size-small: 14px;          /* AP/Body/Small + AP/Label/Field */
  --font-size-nav: 13px;            /* AP/Home/Nav */
  --font-size-eyebrow: 12px;        /* AP/Label/Eyebrow */

  /* —— 1.11 Tipografia – line-height —— */
  --line-height-90: 90%;
  --line-height-100: 100%;         /* Display desktop */
  --line-height-110: 110%;         /* Hero, section, assinatura */
  --line-height-120: 120%;         /* H1, H2, display mobile, card */
  --line-height-130: 130%;         /* H3, eyebrow */
  --line-height-140: 140%;         /* H4, body small, label */
  --line-height-150: 150%;         /* Body default, botão, nav */
  --line-height-160: 160%;         /* Body large, body home */

  /* —— 1.12 Tipografia – letter-spacing —— */
  --letter-spacing-hero: -1.6px;   /* AP/Home/Hero */
  --letter-spacing-section: -1px;  /* AP/Home/Section */
  --letter-spacing-eyebrow: 1.4px; /* AP/Label/Eyebrow (caixa alta) */

  /* —— 1.13 Transições —— */
  --transition-fast: 0.2s ease;
  --transition-default: 0.3s ease;
  --transition-slow: 0.5s ease;
  --ease-expo-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-header-in: 1s;
  --duration-nav-expand: 0.65s;
  --duration-dropdown: 0.45s;

  /* —— 1.14 Animações de entrada (scroll reveal, referência jobyaviation.com) —— */
  --duration-reveal: 1.2s;         /* Fade + subida dos blocos */
  --duration-reveal-words: 1.1s;   /* Palavras dos títulos saindo da máscara */
  --duration-reveal-image: 1.6s;   /* Imagens: recorte + zoom */
  --duration-hero-video: 2.4s;     /* Zoom de entrada do vídeo do hero */
  --stagger-reveal: 0.12s;         /* Atraso entre blocos que entram juntos */
  --stagger-words: 0.06s;          /* Atraso entre palavras do título */
  --duration-gallery: 1.1s;        /* Galeria de soluções: troca de card */
  --duration-gallery-scrub: 0.4s;  /* Galeria de soluções: suaviza o crescimento ligado à rolagem */
  --duration-gallery-text-out: 0.45s; /* Galeria de soluções: saída do texto do card */
  --duration-scrub: 0.35s;         /* Efeitos ligados à rolagem (subtítulo, título) */
}