/* =========================================================================
   ArcheAge World — Propuesta 02 · Design tokens
   "Web chrome = menú de Ajustes de ArcheAge Chronicles"
   Todas las piezas del kit (base.css, demos) consumen SOLO estas variables.
   ========================================================================= */

/* ---- Fuentes (subset latín, woff2). Ruta relativa a este fichero. ---- */
@font-face { font-family: "Cinzel"; src: url("assets/fonts/cinzel-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Cinzel"; src: url("assets/fonts/cinzel-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("assets/fonts/ebgaramond-var.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("assets/fonts/inter-var.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }

:root {
  color-scheme: dark;

  /* ---------- Color: fondos ---------- */
  --aw-bg:            #141311;   /* negro cálido del menú */
  --aw-bg-raise:      #1a1916;
  --aw-bg-deep:       #0c0b0a;   /* viñeta / bordes */
  --aw-surface:       rgba(24, 23, 21, .78);   /* barras de lista */
  --aw-surface-hover: rgba(40, 38, 34, .82);
  --aw-surface-panel: rgba(22, 21, 19, .90);   /* panel de detalle */
  --aw-scrim:         rgba(8, 8, 7, .72);

  /* ---------- Color: líneas ---------- */
  --aw-line:          rgba(200, 190, 170, .20);  /* borde fino de fila */
  --aw-line-soft:     rgba(200, 190, 170, .10);
  --aw-line-strong:   rgba(222, 213, 194, .46);
  --aw-line-hi:       rgba(236, 229, 212, .78);

  /* ---------- Color: tinta ---------- */
  --aw-ink-hi:        #eee8da;   /* pestaña activa, títulos */
  --aw-ink:           #d2ccbe;   /* texto normal */
  --aw-ink-2:         #a39d91;   /* secundario */
  --aw-ink-muted:     #8a857a;   /* pestaña inactiva, leyenda */
  --aw-ink-dim:       #57534b;   /* deshabilitado */

  /* ---------- Color: crema (fila seleccionada / nodo aprendido) ---------- */
  --aw-cream:         #d8d1c0;
  --aw-cream-hi:      #e6e0d1;
  --aw-cream-lo:      #bfb7a4;
  --aw-cream-ink:     #1d1b17;   /* texto sobre crema */
  --aw-cream-ink-2:   #4a453c;
  --aw-cream-grad:    linear-gradient(180deg, var(--aw-cream-hi) 0%, var(--aw-cream) 55%, var(--aw-cream-lo) 100%);

  /* ---------- Color: acentos de juego ---------- */
  --aw-keyword:       #e2a24c;   /* [palabra clave] naranja */
  --aw-cost:          #e0574b;   /* coste rojo arriba a la derecha */
  --aw-gold:          #c8a25a;   /* exclusiva elegida */
  --aw-ok:            #9fbf86;
  --aw-danger:        #d06b5c;
  --aw-focus:         #efe6cf;   /* anillo de foco accesible */

  /* ---------- Tipografía ---------- */
  --aw-font-display:  "Cinzel", "Trajan Pro", Georgia, serif;             /* marca, H1 */
  --aw-font-ui:       "EB Garamond", "Cormorant Garamond", Georgia, "Times New Roman", serif; /* pestañas, filas, títulos */
  --aw-font-body:     "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; /* texto largo, descripciones */

  --aw-fs-xs:   .75rem;    /* 12 */
  --aw-fs-sm:   .8125rem;  /* 13 */
  --aw-fs-md:   .9375rem;  /* 15 */
  --aw-fs-lg:   1.0625rem; /* 17  pestañas / filas */
  --aw-fs-xl:   1.25rem;   /* 20  nombre en panel */
  --aw-fs-2xl:  1.625rem;  /* 26  H2 */
  --aw-fs-3xl:  clamp(2rem, 4.2vw, 3.5rem); /* H1 hero */
  --aw-lh-tight: 1.2;
  --aw-lh-body:  1.6;
  --aw-track-caps: .08em;

  /* ---------- Espaciado (escala 4px) ---------- */
  --aw-s-1: 4px;  --aw-s-2: 8px;  --aw-s-3: 12px; --aw-s-4: 16px;
  --aw-s-5: 20px; --aw-s-6: 24px; --aw-s-8: 32px; --aw-s-10: 40px;
  --aw-s-12: 48px; --aw-s-16: 64px;
  --aw-gutter: clamp(16px, 3.4vw, 56px);
  --aw-maxw: 1360px;

  /* ---------- Radios ---------- */
  --aw-r-xs: 2px;   /* filas del menú */
  --aw-r-sm: 3px;   /* botones, keycaps */
  --aw-r-md: 6px;   /* panel de detalle, cards */
  --aw-r-lg: 10px;

  /* ---------- Bordes ---------- */
  --aw-border:        1px solid var(--aw-line);
  --aw-border-strong: 1px solid var(--aw-line-strong);
  --aw-border-soft:   1px solid var(--aw-line-soft);

  /* ---------- Sombras / glow ---------- */
  --aw-shadow-row:    0 1px 0 rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.025);
  --aw-shadow-panel:  0 18px 50px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4);
  --aw-shadow-cream:  0 0 0 1px rgba(255,250,235,.25), 0 0 18px rgba(230,220,195,.12);
  --aw-glow-tab:      0 0 14px rgba(240,230,205,.35);
  --aw-glow-node:     0 0 10px rgba(245,236,210,.45);

  /* ---------- Texturas (ligeras) ---------- */
  --aw-tex-grain: url("assets/textures/grain-256.jpg");   /* 5 KB, 256px tile */
  --aw-tex-smoke: url("assets/textures/smoke-256.jpg");   /* 4 KB, se escala a ~1100px */
  --aw-vignette:  radial-gradient(120% 90% at 50% 35%, rgba(0,0,0,0) 45%, rgba(0,0,0,.55) 100%);

  /* ---------- Árbol de Traits ---------- */
  --aw-cell-x: 60px;       /* separación horizontal entre columnas del árbol */
  --aw-cell-y: 52px;       /* separación vertical entre filas */
  --aw-node:   34px;       /* nodo activo (rombo) */
  --aw-node-passive: 36px; /* nodo pasivo (estrella) */
  --aw-node-stat: 26px;    /* nodo de estadística */
  --aw-link:        rgba(214, 205, 186, .30);
  --aw-link-open:   rgba(226, 218, 200, .55);
  --aw-link-on:     rgba(240, 233, 216, .92);
  --aw-node-fill-locked:  #1b1a17;
  --aw-node-fill-open:    #35322d;

  /* ---------- Capas / movimiento ---------- */
  --aw-z-nav: 40; --aw-z-legend: 50; --aw-z-panel: 45; --aw-z-modal: 80;
  --aw-ease: cubic-bezier(.2,.7,.2,1);
  --aw-t-fast: 120ms; --aw-t: 200ms;

  /* ---------- Layout ---------- */
  --aw-topbar-h: 64px;
  --aw-legend-h: 56px;
}

/* Breakpoints (documentación; en CSS se usan literales):
   --bp-sm: 600px  (móvil grande)
   --bp-md: 900px  (tablet; panel de detalle pasa a hoja inferior por debajo)
   --bp-lg: 1200px (escritorio)                                            */
@media (max-width: 899px) {
  :root {
    --aw-cell-x: 30px; --aw-cell-y: 42px;
    --aw-node: 26px; --aw-node-passive: 28px; --aw-node-stat: 20px;
    --aw-topbar-h: 96px; /* marca + fila de pestañas desplazable */
    --aw-legend-h: 60px;
  }
}