/* GT Tokens — design tokens canónicos.
 *
 * Sistema RESTRICTIVO: pocos tokens, nombres explícitos, sin variantes
 * decorativas. Si un componente necesita un valor que no está acá,
 * primero discutir si debe entrar al sistema; no inventar tokens locales
 * ni hardcodear pixeles.
 *
 * Categorías cerradas:
 *   spacing · radius · surface · opacity · border · shadow · blur/glass
 *   z-index · accent · platform · text
 *
 * No agregar tokens "por las dudas".
 */

:root {
	/* ----- Spacing scale (base 4px) ----- */
	--gt-space-0:   0;
	--gt-space-1:   0.25rem;   /*  4px */
	--gt-space-2:   0.5rem;    /*  8px */
	--gt-space-3:   0.75rem;   /* 12px */
	--gt-space-4:   1rem;      /* 16px */
	--gt-space-5:   1.25rem;   /* 20px */
	--gt-space-6:   1.5rem;    /* 24px */
	--gt-space-7:   2rem;      /* 32px */
	--gt-space-8:   2.5rem;    /* 40px */
	--gt-space-9:   3rem;      /* 48px */
	--gt-space-10:  4rem;      /* 64px */
	--gt-space-11:  5rem;      /* 80px */
	--gt-space-12:  6rem;      /* 96px */

	/* ----- Radius ----- */
	--gt-radius-none: 0;
	--gt-radius-sm:   6px;
	--gt-radius-md:   10px;
	--gt-radius-lg:   14px;
	--gt-radius-xl:   20px;
	--gt-radius-full: 999px;

	/* ----- Surfaces (dark canvas) -----
	 * canvas    → fondo de la página
	 * raised    → cards, paneles base
	 * elevated  → secciones destacadas sobre raised
	 * overlay   → sheets, popovers, off-canvas
	 * floating  → modales, dropdowns, tooltips
	 */
	--gt-surface-canvas:   #05060a;
	--gt-surface-raised:   #0a0c13;
	--gt-surface-elevated: #10131c;
	--gt-surface-overlay:  #161a25;
	--gt-surface-floating: #1d2230;

	/* ----- Opacity ----- */
	--gt-opacity-0:        0;
	--gt-opacity-disabled: 0.4;
	--gt-opacity-subtle:   0.6;
	--gt-opacity-muted:    0.75;
	--gt-opacity-strong:   0.85;
	--gt-opacity-full:     1;

	/* ----- Borders ----- */
	--gt-border-width-hairline: 1px;
	--gt-border-width-default:  1px;
	--gt-border-width-strong:   2px;

	--gt-border-color-subtle:  rgba(255, 255, 255, 0.06);
	--gt-border-color-default: rgba(255, 255, 255, 0.10);
	--gt-border-color-strong:  rgba(255, 255, 255, 0.18);
	--gt-border-color-accent:  rgba(91, 91, 245, 0.45);

	/* ----- Shadows -----
	 * none     → sin sombra
	 * stage    → elevación base del sistema (cards, paneles, overlays)
	 * floating → elevación máxima (modales, dropdowns, tooltips)
	 *
	 * El sistema NO expone más niveles. Si un componente quiere otra cosa,
	 * primero refactorizar el componente.
	 */
	--gt-shadow-none:     none;
	--gt-shadow-stage:    0 8px 22px rgba(0, 0, 0, 0.40);
	--gt-shadow-floating: 0 24px 60px rgba(0, 0, 0, 0.55);

	/* ----- Blur / glass -----
	 * Un único blur canónico para todo material glass.
	 * No definir variantes; si necesitás otro blur, no es glass.
	 */
	--gt-blur-glass:   blur(12px) saturate(140%);
	--gt-glass-bg:     rgba(10, 12, 19, 0.72);
	--gt-glass-border: rgba(255, 255, 255, 0.08);

	/* ----- Z-index ----- */
	--gt-z-base:     1;
	--gt-z-raised:   10;
	--gt-z-dropdown: 100;
	--gt-z-sticky:   200;
	--gt-z-overlay:  500;
	--gt-z-modal:    1000;
	--gt-z-toast:    1500;
	--gt-z-tooltip:  2000;

	/* ----- Accent -----
	 * Un solo accent + estados. accent-ring es específico para focus rings
	 * y outlines: alpha-blend para que se vea sobre cualquier superficie.
	 */
	--gt-accent:         #5b5bf5;
	--gt-accent-hover:   #7a7bff;
	--gt-accent-pressed: #4646d6;
	--gt-accent-soft:    rgba(91, 91, 245, 0.18);
	--gt-accent-ring:    rgba(122, 123, 255, 0.60);

	/* ----- Platform colors -----
	 * Solo las 4 plataformas que vendemos. Si entra otra, primero entra
	 * al sistema acá. No hardcodear hex en componentes.
	 */
	--gt-platform-ps:     #006fcd;
	--gt-platform-xbox:   #107c10;
	--gt-platform-switch: #e60012;
	--gt-platform-pc:     #6b7280;

	/* ----- Text hierarchy ----- */
	--gt-text-primary:   rgba(245, 246, 250, 0.94);
	--gt-text-secondary: rgba(245, 246, 250, 0.72);
	--gt-text-muted:     rgba(245, 246, 250, 0.52);
	--gt-text-disabled:  rgba(245, 246, 250, 0.32);
	--gt-text-eyebrow:   rgba(245, 246, 250, 0.60);
}