/*
 * Andaime.Fun — tokens de correção visual v2.0.0
 * Carregar DEPOIS de andaime-fun-design-tokens.css.
 * Os caminhos images/andaime-fun/ pressupõem a estrutura deste kit; ajuste somente
 * o prefixo ao copiar os arquivos para templates/tibiacom/images/.
 */

:root {
  /* Assets novos */
  --af-asset-wallpaper-desktop: url("images/andaime-fun/wallpaper-desktop-1920x1280.webp");
  --af-asset-wallpaper-mobile: url("images/andaime-fun/wallpaper-mobile-1080x1920.webp");
  --af-asset-brand-lockup: url("images/andaime-fun/brand-lockup-empty-1200.webp");
  --af-asset-frame-ornate: url("images/andaime-fun/frame-ornate-9slice-960.webp");
  --af-asset-divider: url("images/andaime-fun/ornament-diamond-divider-600.webp");
  --af-asset-card-server: url("images/andaime-fun/card-server-portal-existing.webp");
  --af-asset-card-community: url("images/andaime-fun/card-community-runes-existing.webp");
  --af-asset-guide: url("images/andaime-fun/card-guide-book.webp");
  --af-asset-parchment: url("images/andaime-fun/texture-parchment-512.webp");
  --af-asset-navy-texture: url("images/andaime-fun/texture-navy-512.webp");

  /* Superfícies recalibradas pela imagem-alvo */
  --af-navy-950: #0e1a2c;
  --af-navy-900: #122230;
  --af-navy-850: #15283c;
  --af-navy-800: #183251;
  --af-navy-700: #1d3c5f;
  --af-navy-600: #275274;

  --af-parchment-50: #f8f2df;
  --af-parchment-100: #f4efd8;
  --af-parchment-200: #f0e2cb;
  --af-parchment-300: #e6d5b5;
  --af-parchment-400: #d5bd95;
  --af-parchment-500: #bda276;

  --af-gold-100: #fff0bd;
  --af-gold-200: #f6cd83;
  --af-gold-300: #edc377;
  --af-gold-400: #dcb365;
  --af-gold-500: #cfa765;
  --af-gold-600: #bc9456;
  --af-gold-700: #966d3c;
  --af-gold-800: #704c27;
  --af-gold-900: #503b22;

  --af-emerald-950: #0a2a25;
  --af-emerald-900: #10322e;
  --af-emerald-800: #154338;
  --af-emerald-700: #285c4e;
  --af-emerald-600: #087b55;
  --af-emerald-glow: #00d991;

  --af-blue-action-800: #0b2c5d;
  --af-blue-action-700: #113873;
  --af-blue-action-600: #174688;
  --af-blue-action-500: #2064b8;

  --af-color-page: var(--af-navy-950);
  --af-color-panel-title: var(--af-navy-800);
  --af-color-surface: var(--af-parchment-100);
  --af-color-surface-raised: var(--af-parchment-50);
  --af-color-surface-muted: var(--af-parchment-200);
  --af-color-text: #2b2119;
  --af-color-text-muted: #695641;
  --af-color-text-inverse: #f8f2df;
  --af-color-text-gold: #fff0bd;
  --af-color-border-dark: #2b1a0b;
  --af-color-border-highlight: var(--af-gold-200);
  --af-color-focus: #76edbd;

  /* Gradientes — fundos simples; o ornamento real vem dos assets */
  --af-gradient-navy: linear-gradient(180deg, #1d3c5f 0%, #183251 48%, #0e1a2c 100%);
  --af-gradient-emerald: linear-gradient(180deg, #285c4e 0%, #154338 48%, #10322e 100%);
  --af-gradient-blue-button: linear-gradient(180deg, #2064b8 0%, #174688 52%, #113873 100%);
  --af-gradient-gold-button: linear-gradient(180deg, #edc377 0%, #cfa765 50%, #bc9456 100%);
  --af-gradient-parchment: linear-gradient(135deg, #f8f2df 0%, #f0e2cb 52%, #e6d5b5 100%);
  --af-gradient-wallpaper-overlay: linear-gradient(180deg, rgb(5 17 29 / 4%) 0%, rgb(5 17 29 / 16%) 54%, rgb(5 17 29 / 54%) 100%);

  /* Grade medida na referência 1487×1058 */
  --af-shell-max: 1128px;
  --af-column-side: 256px;
  --af-column-main: 584px;
  --af-column-gap: 16px;
  --af-shell-top-desktop: 52px;
  --af-header-desktop: 240px;
  --af-sidebar-offset-desktop: -50px;
  --af-shell-gutter-tablet: 16px;
  --af-shell-gutter-mobile: 16px;

  /* Marca: imagem ornamental vazia + texto HTML sobreposto */
  --af-brand-width-desktop: 620px;
  --af-brand-width-tablet: 540px;
  --af-brand-width-mobile: min(94vw, 420px);
  --af-brand-top-desktop: 18px;
  --af-brand-wordmark-y: 66.5%;
  --af-brand-wordmark-size: clamp(2rem, 3.25vw, 3rem);
  --af-brand-wordmark-tracking: 0.035em;
  --af-header-mobile: 190px;

  /* Painel central */
  --af-panel-title-height: 56px;
  --af-panel-min-height-auth: 570px;
  --af-panel-inline-auth: 72px;
  --af-panel-block-auth: 36px 40px;
  --af-panel-inline-default: 28px;
  --af-panel-block-default: 28px 34px;
  --af-panel-radius: 4px;

  /* Moldura ornamental quadrada 9-slice; números relativos ao WebP 959×960 */
  --af-frame-slice: 144;
  --af-frame-width-main: 28px;
  --af-frame-width-card: 24px;
  --af-frame-outset-main: 10px;
  --af-frame-outset-card: 7px;
  --af-frame-line: 2px;
  --af-frame-corner: 24px;
  --af-frame-highlight: #f6cd83;
  --af-frame-mid: #bc9456;
  --af-frame-shadow: #503b22;

  /* Formulários e ações */
  --af-control-height: 42px;
  --af-button-height: 44px;
  --af-button-height-primary: 44px;
  --af-button-height-cta: 48px;
  --af-input-width-auth: 440px;
  --af-login-button-width: 196px;
  --af-create-button-width: 258px;
  --af-radius-control: 4px;
  --af-radius-button: 5px;
  --af-button-bevel-light: rgb(255 255 255 / 42%);
  --af-button-bevel-dark: rgb(48 27 4 / 42%);

  /* Laterais compactas */
  --af-card-title-height: 50px;
  --af-nav-row-height: 55px;
  --af-nav-item-height: 38px;
  --af-left-account-height: 214px;
  --af-card-media-server: 108px;
  --af-card-media-compact: 104px;
  --af-right-card-gap: 12px;
  --af-right-server-height: 226px;
  --af-right-guide-height: 248px;
  --af-right-community-height: 230px;

  /* Textura e profundidade */
  --af-parchment-grain-opacity: 0.11;
  --af-navy-grain-opacity: 0.18;
  --af-shadow-panel: 0 14px 30px rgb(2 11 21 / 55%), inset 0 0 0 1px rgb(246 205 131 / 30%);
  --af-shadow-brand: drop-shadow(0 16px 20px rgb(2 11 21 / 55%));
  --af-shadow-control: inset 0 1px 0 var(--af-button-bevel-light), inset 0 -2px 0 var(--af-button-bevel-dark), 0 3px 8px rgb(2 11 21 / 25%);

  /* Camadas */
  --af-z-wallpaper: 0;
  --af-z-wallpaper-overlay: 1;
  --af-z-character: 2;
  --af-z-content: 10;
  --af-z-header: 20;
  --af-z-popover: 40;

  /* Limites de QA (documentação; usar valores literais nos @media) */
  --af-breakpoint-mobile-max: 760px;
  --af-breakpoint-tablet-min: 761px;
  --af-breakpoint-desktop-min: 1181px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --af-duration-fast: 0ms;
    --af-duration-normal: 0ms;
    --af-duration-slow: 0ms;
  }
}