/* TAGOOLI Design Tokens — UI redesign Phase 1
 * Source of truth for colors, type, spacing, radii.
 * Prefer these variables; keep --tg-blue / --tg-blue-deep aliases for legacy CSS.
 */
:root {
  /* Brand colors (Aaron UI brief) */
  --tg-color-brand: #18375F;
  --tg-color-button: #1769D2;
  --tg-color-page: #F3F6FA;
  --tg-color-card: #FFFFFF;
  --tg-color-text: #18375F;
  --tg-color-muted: #7A8798;
  --tg-color-border: #E3EAF3;
  --tg-color-sale: #D92D35;
  --tg-color-star: #E9A323;
  --tg-color-success: #1F8A4C;
  --tg-color-warning: #D97706;
  --tg-color-white: #FFFFFF;
  --tg-color-link-hover-on-dark: #9DC4F5;
  --tg-color-logo-red: #E30613;

  /* Legacy aliases used across main.css / phase9 / home-plp */
  --tg-blue: var(--tg-color-button);
  --tg-blue-deep: var(--tg-color-brand);
  --tg-white: var(--tg-color-white);
  --tg-gray: var(--tg-color-page);
  --tg-text: var(--tg-color-text);
  --tg-muted: var(--tg-color-muted);
  --tg-border: var(--tg-color-border);
  --tg-red: var(--tg-color-sale);
  --tg-pink: #D81B60;
  --tg-black: #111111;
  --tg-gold: var(--tg-color-star);
  --tg-sale: var(--tg-color-sale);

  /* Layout */
  --tg-max: 1320px;
  --tg-header-h: 76px;
  --tg-announce-h: 32px;
  --tg-section-gap: 28px;
  --tg-module-gap: 24px;

  /* Controls */
  --tg-btn-h: 44px;
  --tg-btn-h-card: 48px;
  --tg-input-h: 48px;
  --tg-radius: 14px;
  --tg-radius-sm: 8px;
  --tg-radius-pill: 999px;
  --tg-shadow: 0 8px 24px rgba(24, 55, 95, 0.08);
  --tg-shadow-soft: 0 4px 14px rgba(24, 55, 95, 0.06);

  /* Type */
  --tg-font: "Inter", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --tg-fs-page-title: clamp(1.75rem, 2.2vw, 2rem);
  --tg-fs-module-title: clamp(1.25rem, 1.6vw, 1.5rem);
  --tg-fs-product-title: 0.9375rem;
  --tg-fs-body: 0.9375rem;
  --tg-fs-meta: 0.8125rem;
  --tg-fs-price: clamp(1.25rem, 1.6vw, 1.5rem);
  --tg-fs-amount: clamp(1.375rem, 1.8vw, 1.625rem);

  /* Banner (existing carousel; Phase 5 may refine) */
  --tg-banner-min: 360px;
  --tg-banner-ideal: 42vw;
  --tg-banner-max: 600px;
  --tg-banner-position: center;

  /* OD aliases → redesign palette */
  --tg-od-primary: var(--tg-color-button);
  --tg-od-bg: var(--tg-color-page);
  --tg-od-card: var(--tg-color-card);
  --tg-od-radius: var(--tg-radius);
  --tg-od-border: var(--tg-color-border);
  --tg-od-shadow: var(--tg-shadow);
  --tg-od-text: var(--tg-color-text);
  --tg-od-muted: var(--tg-color-muted);
}