/* [CELULA: design-system] tokens.css — fonte unica de custom properties do site Ramos Atelier */
/* Consumido por todas as celulas. Nao redefinir estes valores em outros arquivos. */

:root {

  /* [CELULA: design-system] paleta — base tonal preto/dourado do brief */
  --ink-900: #000000;
  --ink-800: #08070A;
  --ink-700: #0F0E12;
  --ink-600: #17151B;
  --line:    #2A2620;

  --gold-100: #F2E3BE;
  --gold-300: #D9BE7F;
  --gold-500: #C09A4C;
  --gold-700: #8A6B2E;
  --gold-900: #4A3817;

  --offwhite: #F6F0E6;
  --muted:    #A79E8F;

  /* [CELULA: design-system] gradiente dourado canonico — filetes, sublinhados, realces */
  --gradient-gold: linear-gradient(
    100deg,
    #8A6B2E 0%,
    #D9BE7F 38%,
    #F2E3BE 52%,
    #C09A4C 70%,
    #8A6B2E 100%
  );

  /* [CELULA: design-system] tipografia — familias */
  --font-display: 'Cormorant Garamond', serif;
  --font-body: 'Jost', 'Inter', sans-serif;

  /* [CELULA: design-system] escala tipografica fluida — clamp(minimo, preferido, maximo) */
  --fs-display: clamp(3.2rem, 9vw, 9rem);
  --fs-h1: clamp(2.6rem, 6vw, 5.6rem);
  --fs-h2: clamp(2.1rem, 4.2vw, 3.8rem);
  --fs-h3: clamp(1.6rem, 2.6vw, 2.4rem);
  --fs-h4: clamp(1.25rem, 1.6vw, 1.6rem);
  --fs-body: clamp(1rem, 0.6vw + 0.85rem, 1.125rem);
  --fs-small: clamp(0.85rem, 0.3vw + 0.78rem, 0.95rem);
  --fs-label: clamp(0.6875rem, 0.15vw + 0.66rem, 0.75rem);

  /* [CELULA: design-system] escala de espacamento — progressao nao-linear */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1.25rem;
  --sp-5: 2rem;
  --sp-6: 3rem;
  --sp-7: 4.5rem;
  --sp-8: 6.5rem;
  --sp-9: 9rem;
  --sp-10: 12rem;
  --sp-11: 16rem;
  --sp-12: 21rem;

  /* [CELULA: design-system] container e grid */
  --container-width: 1440px;
  --gutter: 32px;
  --gutter-mobile: 20px;
  --section-padding-block: clamp(7rem, 14vh, 12rem);

  /* [CELULA: design-system] raios — estetica de ourivesaria, linhas retas, minimos */
  --radius-0: 0px;
  --radius-1: 1px;
  --radius-2: 2px;

  /* [CELULA: design-system] duracoes de transicao e animacao */
  --dur-instant: 100ms;
  --dur-fast: 200ms;
  --dur-base: 400ms;
  --dur-slow: 700ms;
  --dur-slower: 1200ms;

  /* [CELULA: design-system] curvas de easing — cubic-bezier nomeadas */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* [CELULA: design-system] z-index nomeados — evita empilhamento arbitrario */
  --z-base: 0;
  --z-grain: 5;
  --z-content: 10;
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;
}

/* [CELULA: design-system] acessibilidade — zera duracoes quando o usuario pede menos movimento */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms;
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-slower: 0ms;
  }
}