/* ==========================================================================
   RANERI — Design tokens
   --------------------------------------------------------------------------
   Fonte única de valores visuais do site. Os demais arquivos CSS devem
   consumir estes tokens em vez de repetir valores literais.

   Ordem de carregamento:
   tokens.css → base.css → header.css → hero.css → home.css → responsive.css
   ========================================================================== */

:root {
    /* ----------------------------------------------------------------------
       Cores da marca (identidade oficial)
       ---------------------------------------------------------------------- */
    --color-primary: #A51916;          /* Vermelho RANERI */
    --color-primary-hover: #BC1E1A;
    --color-primary-active: #8C1411;
    --color-black: #111111;            /* Preto RANERI */
    --color-gray: #B3B3B3;             /* Cinza RANERI */
    --color-white: #FFFFFF;

    /* Neutros derivados (escala de grafite) */
    --color-ink-950: #0A0A0A;
    --color-ink-900: #111111;
    --color-ink-850: #151515;
    --color-ink-800: #1B1B1B;
    --color-ink-700: #262626;
    --color-gray-600: #474747;         /* texto de apoio no tema claro (8.4:1) */
    --color-gray-500: #6B6B6B;         /* índices no tema claro (5.3:1) */
    --color-gray-400: #8A8A8A;         /* texto de apoio (≥ 4.5:1 sobre #111) */
    --color-gray-300: #B3B3B3;
    --color-gray-200: #D4D4D4;
    --color-gray-100: #EDEDED;
    --color-paper: #F4F4F4;            /* fundo do tema claro */

    /* Semânticas */
    --color-bg: var(--color-ink-900);
    --color-bg-deep: var(--color-ink-950);
    --color-surface: var(--color-ink-850);
    --color-text: #F4F4F4;
    --color-text-muted: var(--color-gray-300);
    --color-text-subtle: var(--color-gray-400);
    --color-accent: var(--color-primary);
    --color-line: rgba(255, 255, 255, 0.12);
    --color-line-soft: rgba(255, 255, 255, 0.07);
    --color-line-strong: rgba(255, 255, 255, 0.28);
    --color-focus: var(--color-white);
    --color-selection: rgba(165, 25, 22, 0.55);

    /* ----------------------------------------------------------------------
       Tipografia
       "RANERI Sans"/"RANERI Display" são reservados para uma fonte local
       futura (ver bloco @font-face comentado em base.css). Até lá, a pilha
       usa fontes do sistema — sem dependência de serviços externos.
       ---------------------------------------------------------------------- */
    --font-sans: "RANERI Sans", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --font-display: "RANERI Display", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "Cascadia Mono", Consolas, ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Escala fluida (clamp: mínimo · fluido · máximo) */
    --fs-2xs: 0.6875rem;                                   /* 11px */
    --fs-xs: 0.75rem;                                      /* 12px */
    --fs-sm: 0.875rem;                                     /* 14px */
    --fs-base: 1rem;                                       /* 16px */
    --fs-md: clamp(1.0625rem, 1rem + 0.25vw, 1.25rem);     /* 17 → 20 */
    --fs-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);     /* 20 → 26 */
    --fs-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);       /* 24 → 36 */
    --fs-2xl: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);         /* 32 → 56 */
    --fs-3xl: clamp(2.25rem, 1.2rem + 4vw, 5.75rem);       /* 36 → 92 */

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    --lh-tight: 1.04;
    --lh-snug: 1.18;
    --lh-normal: 1.45;
    --lh-relaxed: 1.6;

    --ls-tight: -0.028em;
    --ls-snug: -0.012em;
    --ls-normal: 0;
    --ls-wide: 0.08em;
    --ls-wider: 0.2em;

    /* ----------------------------------------------------------------------
       Espaçamentos
       ---------------------------------------------------------------------- */
    --space-3xs: 0.25rem;   /*  4px */
    --space-2xs: 0.5rem;    /*  8px */
    --space-xs: 0.75rem;    /* 12px */
    --space-sm: 1rem;       /* 16px */
    --space-md: 1.5rem;     /* 24px */
    --space-lg: 2rem;       /* 32px */
    --space-xl: 3rem;       /* 48px */
    --space-2xl: 4rem;      /* 64px */
    --space-3xl: 6rem;      /* 96px */
    --space-4xl: 8rem;      /* 128px */

    /* Cadência vertical das seções (densidades deliberadamente diferentes) */
    --section-space-sm: clamp(3.75rem, 2.25rem + 5vw, 6.5rem);     /*  60 → 104 */
    --section-space-md: clamp(4.5rem, 2.5rem + 7vw, 9rem);         /*  72 → 144 */
    --section-space-lg: clamp(5.5rem, 3rem + 8.5vw, 11rem);        /*  88 → 176 */
    --section-space-xl: clamp(6.5rem, 3.25rem + 10.5vw, 13.5rem);  /* 104 → 216 */
    --section-space: var(--section-space-md);

    /* ----------------------------------------------------------------------
       Layout
       ---------------------------------------------------------------------- */
    --container-max: 90rem;                                   /* 1440px */
    --container-pad: clamp(1.25rem, 0.4rem + 3.6vw, 4rem);    /* 20 → 64 */

    /* Breakpoints conceituais (referência — media queries usam os valores
       literais em em, pois custom properties não funcionam em @media).
       sm 40em (640) · md 48em (768) · lg 60em (960) · xl 90em (1440) · 2xl 120em (1920) */
    --bp-sm: 40em;
    --bp-md: 48em;
    --bp-lg: 60em;
    --bp-xl: 90em;
    --bp-2xl: 120em;

    /* ----------------------------------------------------------------------
       Alturas e dimensões de controle
       ---------------------------------------------------------------------- */
    --header-height: 4rem;          /* 64px (mobile) — 80px em ≥ 60em */
    --control-size: 2.75rem;        /* 44px: área mínima de toque */
    --btn-height: 3rem;             /* 48px */
    --logo-height: 1.75rem;         /* 28px (mobile) */

    /* ----------------------------------------------------------------------
       Bordas, raios e sombras
       ---------------------------------------------------------------------- */
    --border-width: 1px;
    --border-accent: 2px;

    --radius-none: 0;
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.45);

    /* ----------------------------------------------------------------------
       Movimento
       ---------------------------------------------------------------------- */
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

    --dur-fast: 150ms;
    --dur-base: 250ms;
    --dur-slow: 450ms;
    --dur-slower: 800ms;

    /* ----------------------------------------------------------------------
       Camadas (z-index)
       ---------------------------------------------------------------------- */
    --z-below: -1;
    --z-base: 0;
    --z-raised: 1;
    --z-hero-content: 10;
    --z-hero-controls: 20;
    --z-header: 100;
    --z-skip-link: 200;
}

/* --------------------------------------------------------------------------
   Tema claro — seção de pausa (01 · Soluções)
   Uso: data-theme="light" no elemento. Redefine só as cores semânticas: os
   componentes continuam consumindo os mesmos tokens (fundo e texto do tema
   aplicados em base.css). Vermelho #A51916 sobre #F4F4F4: 6.9:1.
   -------------------------------------------------------------------------- */
[data-theme="light"] {
    --color-bg: var(--color-paper);
    --color-surface: var(--color-white);
    --color-text: var(--color-ink-900);
    --color-text-muted: var(--color-gray-600);
    --color-text-subtle: var(--color-gray-500);
    --color-line: rgba(17, 17, 17, 0.14);
    --color-line-soft: rgba(17, 17, 17, 0.08);
    --color-line-strong: rgba(17, 17, 17, 0.34);
    --color-focus: var(--color-ink-900);
    --color-selection: rgba(165, 25, 22, 0.85);   /* texto selecionado é branco */
}