/**
 * SUNTECH Shop — Design tokens (self-contained, không import template-shop)
 * Nguồn gốc: template-shop/tokens.css + biến shop
 */

:root {
  /* Brand — Tech */
  --color-navy: #0b243b;
  --color-blue: #0072bc;
  --color-cyan: #00aeef;

  /* Brand — Energy */
  --color-orange: #e36c09;
  --color-gold: #fdb813;
  --color-yellow: #ffd700;

  /* Neutrals */
  --color-white: #ffffff;
  --color-silver: #d1d3d4;
  --color-gray-100: #f5f7fa;
  --color-gray-200: #e8ecf0;
  --color-gray-500: #6b7b8c;
  --color-gray-900: #1a2230;

  /* Semantic */
  --primary: var(--color-navy);
  --primary-foreground: var(--color-white);
  --accent: var(--color-cyan);
  --accent-warm: var(--color-orange);
  --background: var(--color-white);
  --background-muted: var(--color-gray-100);
  --foreground: var(--color-gray-900);
  --muted-foreground: var(--color-gray-500);
  --border: var(--color-gray-200);
  --ring: var(--color-cyan);

  /* Gradients */
  --gradient-tech: linear-gradient(135deg, #0072bc 0%, #00aeef 100%);
  --gradient-energy: linear-gradient(135deg, #e36c09 0%, #fdb813 55%, #ffd700 100%);
  --gradient-sun-soft: linear-gradient(180deg, rgba(253, 184, 19, 0.12) 0%, transparent 70%);

  /* Typography — khớp logo SUNTECH (design-system.md) */
  --font-display: 'Montserrat', system-ui, sans-serif;
  --font-body: 'Roboto', 'Segoe UI', system-ui, sans-serif;
  --font-tech: 'Exo 2', var(--font-display);
  --font-display-weight: 700;
  --font-display-style: italic;

  --text-display: 2.25rem;
  --text-h1: 1.75rem;
  --text-h2: 1.375rem;
  --text-h3: 1.125rem;
  --text-h4: 1rem;
  --text-body: 0.875rem;
  --text-small: 0.75rem;
  --text-xs: 0.6875rem;

  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.6;

  /* Spacing */
  --space-1: 4px;
  --space-2: 7px;
  --space-3: 10px;
  --space-4: 14px;
  --space-5: 20px;
  --space-6: 28px;
  --space-7: 40px;
  --space-8: 56px;
  --space-9: 80px;

  /* Layout */
  --container-max: 1200px;
  --container-narrow: 720px;
  --gutter: 20px;
  --header-h: 64px;

  /* Radius & shadow */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 3px rgba(11, 36, 59, 0.08);
  --shadow-md: 0 4px 16px rgba(11, 36, 59, 0.12);
  --shadow-glow-cyan: 0 0 20px rgba(0, 174, 239, 0.25);
  --shadow-glow-warm: 0 0 20px rgba(227, 108, 9, 0.2);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;

  /* Shop extensions */
  --shop-topbar-h: 32px;
  --shop-z-header: 200;
  --shop-z-toast: 300;
  --shop-z-overlay: 250;
  --shop-sidebar-w: 240px;
  --shop-card-img-ratio: 4 / 3;
  --shop-price-color: var(--color-orange);
  --shop-sale-color: #c0392b;
  --shop-success: #1e8e5a;

  /* Buttons */
  --btn-height: 30px;
  --btn-padding-x: 12px;
  --btn-padding-sm-x: 10px;
  --btn-font-size: var(--text-small);
  --btn-font-size-sm: var(--text-xs);
  --btn-height-xs: 26px;
  --btn-padding-xs-x: 8px;
  --btn-font-size-xs: 0.625rem;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  box-sizing: border-box;
  min-height: var(--btn-height);
  height: var(--btn-height);
  padding: 0 var(--btn-padding-x);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--btn-font-size);
  line-height: 1;
  color: var(--color-white);
  background: var(--gradient-energy);
  border: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-glow-warm);
  cursor: pointer;
  transition: filter var(--duration-fast) var(--ease-out);
}

.btn-primary:hover {
  filter: brightness(1.05);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  box-sizing: border-box;
  min-height: var(--btn-height);
  height: var(--btn-height);
  padding: 0 var(--btn-padding-x);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--btn-font-size);
  line-height: 1;
  color: var(--color-white);
  background: var(--gradient-tech);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: filter var(--duration-fast) var(--ease-out);
}

.btn-secondary:hover {
  filter: brightness(1.05);
}

.text-display {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 700;
  font-style: italic;
  line-height: var(--leading-tight);
  color: var(--primary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}