/* =====================================================
   Flor de Sal · Design Tokens · Brandbook v3
   Use estas variáveis em todo build da marca.
   Default theme = dark (noite-mar). Para light, aplique
   .theme-osso no elemento root ou container.
   ===================================================== */

:root {
  /* === CORES PRIMÁRIAS === */
  --fds-noite-mar:       #0F1A1F; /* base · 60% */
  --fds-ouro-sais:       #C9A96A; /* assinatura · 10% */
  --fds-areia:           #E8E2D4; /* secundária · 22% */
  --fds-osso:            #F8F4EB; /* papel */

  /* === CORES DE APOIO === */
  --fds-verde-mare:      #7A8C7E; /* botânica, categorias */
  --fds-mare-funda:      #1F3A3D; /* fundo alternativo */
  --fds-ouro-claro:      #DCC289; /* variação clara */

  /* === SEMÂNTICAS · DEFAULT DARK (noite-mar) === */
  --fds-bg:              var(--fds-noite-mar);
  --fds-bg-elevated:     #14222A;
  --fds-bg-muted:        var(--fds-mare-funda);
  --fds-bg-sand:         var(--fds-areia);

  --fds-text:            var(--fds-osso);
  --fds-text-muted:      #B7AFA0;
  --fds-text-accent:     var(--fds-ouro-sais);
  --fds-text-inverse:    var(--fds-noite-mar);

  --fds-border:          #26333A;
  --fds-border-accent:   var(--fds-ouro-sais);
  --fds-border-soft:     #2E3D45;

  /* === TIPOGRAFIA === */
  --fds-font-display:    'Italiana', 'Cormorant Garamond', Georgia, serif;
  --fds-font-heading:    'Marcellus', Georgia, serif;
  --fds-font-body:       'Jost', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;

  --fds-fw-light:        300;
  --fds-fw-regular:      400;
  --fds-fw-medium:       500;

  --fds-fs-eyebrow:      0.8125rem;  /* 13 */
  --fds-fs-body-sm:      0.9375rem;  /* 15 */
  --fds-fs-body:         1.25rem;    /* 20 */
  --fds-fs-h3:           1.75rem;    /* 28 */
  --fds-fs-h2:           2.5rem;     /* 40 */
  --fds-fs-h1:           4rem;       /* 64 */
  --fds-fs-display:      6rem;       /* 96 */
  --fds-fs-hero:         clamp(3rem, 8vw, 8rem);

  --fds-tracking-tight:  -0.01em;
  --fds-tracking-normal: 0;
  --fds-tracking-wide:   0.08em;
  --fds-tracking-wider:  0.18em;
  --fds-tracking-widest: 0.28em;

  --fds-lh-tight:        1.05;
  --fds-lh-snug:         1.2;
  --fds-lh-normal:       1.5;
  --fds-lh-loose:        1.75;

  /* === ESPAÇAMENTO · escala em rem === */
  --fds-space-0:         0;
  --fds-space-1:         0.25rem;
  --fds-space-2:         0.5rem;
  --fds-space-3:         0.75rem;
  --fds-space-4:         1rem;
  --fds-space-5:         1.5rem;
  --fds-space-6:         2rem;
  --fds-space-7:         3rem;
  --fds-space-8:         4rem;
  --fds-space-9:         6rem;
  --fds-space-10:        8rem;

  /* === RAIO === */
  --fds-radius-none:     0;
  --fds-radius-sm:       2px;
  --fds-radius-md:       4px;
  --fds-radius-lg:       8px;
  --fds-radius-pill:     9999px;

  /* === SOMBRAS (uso parcimonioso · luz baixa) === */
  --fds-shadow-soft:     0 1px 2px rgba(15, 26, 31, 0.08), 0 4px 12px rgba(15, 26, 31, 0.04);
  --fds-shadow-lifted:   0 4px 8px rgba(15, 26, 31, 0.10), 0 20px 40px rgba(15, 26, 31, 0.10);
  --fds-shadow-deep:     0 8px 16px rgba(15, 26, 31, 0.18), 0 32px 64px rgba(15, 26, 31, 0.16);

  /* === BREAKPOINTS · referência === */
  --fds-bp-sm: 480px;
  --fds-bp-md: 768px;
  --fds-bp-lg: 1024px;
  --fds-bp-xl: 1280px;

  /* === MOVIMENTO · transições "que demoram" === */
  --fds-dur-fast:        160ms;
  --fds-dur-base:        280ms;
  --fds-dur-slow:        520ms;
  --fds-dur-demora:      900ms;
  --fds-ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);
  --fds-ease-emphasis:   cubic-bezier(0.2, 0, 0, 1);
  --fds-ease-exit:       cubic-bezier(0.4, 0, 1, 1);

  /* === GRID === */
  --fds-container:       1200px;
  --fds-gutter:          var(--fds-space-5);
}

/* ============ TEMA OSSO (light) · uso em papelaria, miolo de cardápio, web em modo claro ============ */
.theme-osso,
[data-theme="osso"] {
  --fds-bg:              var(--fds-osso);
  --fds-bg-elevated:     #FFFFFF;
  --fds-bg-muted:        var(--fds-areia);
  --fds-bg-sand:         var(--fds-areia);

  --fds-text:            var(--fds-noite-mar);
  --fds-text-muted:      #3D4A4F;
  --fds-text-accent:     #A88547; /* ouro um pouco mais escuro p/ contraste AA sobre osso */
  --fds-text-inverse:    var(--fds-osso);

  --fds-border:          #DFD8C5;
  --fds-border-accent:   #A88547;
  --fds-border-soft:     #E8E2D4;
}

/* ============ TEMA AREIA · uso em capas, peças intermediárias ============ */
.theme-areia,
[data-theme="areia"] {
  --fds-bg:              var(--fds-areia);
  --fds-bg-elevated:     var(--fds-osso);
  --fds-bg-muted:        #D9D2C0;
  --fds-bg-sand:         var(--fds-areia);

  --fds-text:            var(--fds-noite-mar);
  --fds-text-muted:      #3D4A4F;
  --fds-text-accent:     #A88547;
  --fds-text-inverse:    var(--fds-osso);

  --fds-border:          #CFC8B2;
  --fds-border-accent:   #A88547;
  --fds-border-soft:     #DCD3BD;
}

/* ============ MOTION SAFE PREFERENCE ============ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --fds-dur-fast:   0ms;
    --fds-dur-base:   0ms;
    --fds-dur-slow:   0ms;
    --fds-dur-demora: 0ms;
  }
}