/* ============================================================
   TOKENS — Júlia Brignol Advocacia
   Derivados na íntegra do design_system/design-system.html
   Extensões editoriais: aurora viva, easings cinematográficos,
   sombras magnéticas, numerais decorativos.
   ============================================================ */
:root {
  /* Cores · identidade Júlia Brignol */
  --color-vinho:           #2B0C0C;
  --color-vinho-center:    #310D0E;
  --color-vinho-edge:      #270A0B;
  --color-vinho-deep:      #1C0707;
  --color-vinho-light:     #3A1212;
  --color-dourado:         #C9A15B;
  --color-dourado-soft:    #D9BB80;
  --color-offwhite:        #F5EFE6;

  /* Estado · erro (derivado do field-help--error do DS: #E0817A / #B0413E) */
  --color-error:           #B0413E;
  --color-error-soft:      #E0817A;

  /* Alphas sobre vinho */
  --on-vinho-1: rgba(245, 239, 230, 0.92);
  --on-vinho-2: rgba(245, 239, 230, 0.70);
  --on-vinho-3: rgba(245, 239, 230, 0.50);
  --on-vinho-4: rgba(245, 239, 230, 0.30);
  --on-vinho-5: rgba(245, 239, 230, 0.12);

  /* Alphas sobre off-white */
  --on-off-1: rgba(42, 10, 12, 0.92);
  --on-off-2: rgba(42, 10, 12, 0.70);
  --on-off-3: rgba(42, 10, 12, 0.50);
  --on-off-4: rgba(42, 10, 12, 0.30);
  --on-off-5: rgba(42, 10, 12, 0.10);

  /* Dourado em alphas */
  --gold-5:  rgba(201, 161, 91, 0.05);
  --gold-10: rgba(201, 161, 91, 0.10);
  --gold-20: rgba(201, 161, 91, 0.20);
  --gold-30: rgba(201, 161, 91, 0.30);
  --gold-50: rgba(201, 161, 91, 0.50);
  --gold-70: rgba(201, 161, 91, 0.70);

  /* Aurora · halos cinematográficos em movimento lento */
  --aurora-1: rgba(201, 161, 91, 0.14);
  --aurora-2: rgba(217, 187, 128, 0.10);
  --aurora-3: rgba(58, 18, 18, 0.55);

  /* Tipografia */
  --font-serif: "Cormorant Garamond", "Bodoni Moda", Georgia, serif;
  --font-sans:  "Montserrat", "Raleway", "Helvetica Neue", Arial, sans-serif;
  --font-mono:  ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Easings */
  --ease-reveal:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-default:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-pulse:     cubic-bezier(0.4, 0, 0.6, 1);
  --ease-out:       cubic-bezier(0, 0, 0.2, 1);
  --ease-editorial: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-magnetic:  cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Durations */
  --d-fast:    150ms;
  --d-base:    300ms;
  --d-slow:    500ms;
  --d-reveal:  800ms;
  --d-letter:  900ms;
  --d-aurora:  18s;

  /* Sombras */
  --shadow-soft:     0 4px 30px rgba(0, 0, 0, 0.45);
  --shadow-strong:   0 25px 50px -12px rgba(0, 0, 0, 0.6);
  --shadow-gold:     0 0 20px rgba(201, 161, 91, 0.22);
  --shadow-gold-s:   0 0 12px rgba(201, 161, 91, 0.55);
  --shadow-magnetic: 0 18px 48px -18px rgba(201, 161, 91, 0.55), 0 0 24px rgba(201, 161, 91, 0.18);

  /* Raios */
  --r-sm:   0.125rem;
  --r-md:   0.375rem;
  --r-lg:   0.5rem;
  --r-xl:   0.75rem;
  --r-2xl:  1.5rem;
  --r-3xl:  2rem;
  --r-full: 9999px;

  /* Numerais decorativos editoriais */
  --numeral-size:    clamp(7rem, 16vw, 14rem);
  --numeral-opacity: 0.06;

  /* Z-index */
  --z-nav:     50;
  --z-overlay: 60;
  --z-cursor:  70;
}

/* Aurora · propriedades animáveis registradas para transição fluida.
   Fallback gracioso em browsers sem @property — apenas perde o tween. */
@property --aurora-x {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 50%;
}
@property --aurora-y {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 18%;
}