/* ==========================================================================
   GS1 Digital Link Catalog — Design System Tokens
   Fonte colori: GS1 Global Colour Palette (CMYK 2015-01-12)
   Solo i colori ufficiali GS1 primari e secondari sono utilizzati.
   ========================================================================== */

:root {
  /* --- GS1 Primary Palette --- */
  --gs1-blue: #002c6c;
  --gs1-orange: #f26334;
  --gs1-dark-gray: #454545;
  --gs1-dark-medium-gray: #888b8d;
  --gs1-light-medium-gray: #b1b3b3;
  --gs1-light-gray: #f4f4f4;

  /* --- GS1 Secondary Palette --- */
  --gs1-raspberry: #f05587;
  --gs1-purple: #bf83b9;
  --gs1-lavender: #af96d4;
  --gs1-slate: #89aadb;
  --gs1-sky: #00b6de;
  --gs1-link: #008dbd;
  --gs1-mist: #8db9ca;
  --gs1-teal: #22bcb9;
  --gs1-forest: #71b790;
  --gs1-grass: #7ac143;
  --gs1-recycling: #00b74f;
  --gs1-olive: #9dbb68;
  --gs1-lime: #c1d82f;
  --gs1-gold: #c4b000;
  --gs1-peach: #fbb034;
  --gs1-tangerine: #ff8200;
  --gs1-honey: #b78b20;
  --gs1-terracotta: #d3875f;

  /* --- Typography --- */
  --font-sans: 'Inter', 'Gotham', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;

  /* --- Radii --- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 0.15s;
  --dur-base: 0.3s;
  --dur-slow: 0.5s;

  /* --- Elevation (light) --- */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 8px 24px -8px rgba(15, 23, 42, 0.12);
  --shadow-lg: 0 16px 40px -12px rgba(15, 23, 42, 0.18);
  --shadow-xl: 0 24px 64px -16px rgba(15, 23, 42, 0.28);
  --shadow-glow-blue: 0 8px 32px -8px rgba(0, 44, 108, 0.35);
  --shadow-glow-orange: 0 8px 32px -8px rgba(242, 99, 52, 0.35);

  /* --- Semantic surface tokens (LIGHT) --- */
  --bg-canvas: #f7f8fa;
  --bg-canvas-alt: #eef1f5;
  --bg-surface: #ffffff;
  --bg-surface-raised: #ffffff;
  --bg-surface-sunken: #f4f4f4;
  --bg-glass: rgba(255, 255, 255, 0.7);
  --bg-glass-strong: rgba(255, 255, 255, 0.88);
  --bg-overlay: rgba(10, 15, 30, 0.5);
  --bg-inverse: #0b1220;

  --border-subtle: rgba(15, 23, 42, 0.08);
  --border-default: rgba(15, 23, 42, 0.12);
  --border-strong: rgba(15, 23, 42, 0.2);
  --border-glass: rgba(255, 255, 255, 0.5);

  --text-primary: #10182b;
  --text-secondary: #454545;
  --text-tertiary: #6b7280;
  --text-muted: #9aa1ac;
  --text-on-accent: #ffffff;
  --text-link: var(--gs1-blue);

  --accent: var(--gs1-blue);
  --accent-strong: #001f4d;
  --accent-soft: rgba(0, 44, 108, 0.08);
  --accent-2: var(--gs1-orange);
  --accent-2-soft: rgba(242, 99, 52, 0.1);

  --success: #16875a;
  --success-soft: rgba(22, 135, 90, 0.12);
  --warning: #b45309;
  --warning-soft: rgba(180, 83, 9, 0.12);

  --mesh-1: rgba(0, 44, 108, 0.55);
  --mesh-2: rgba(242, 99, 52, 0.45);
  --mesh-3: rgba(0, 182, 222, 0.35);
  --scrollbar-thumb: rgba(15, 23, 42, 0.18);

  /* Superficie "terminale" sempre scura, indipendente dal tema (blocchi codice, URL bar) */
  --surface-code: #0b1220;

  color-scheme: light;
}

:root[data-theme='dark'] {
  --bg-canvas: #0a0e17;
  --bg-canvas-alt: #0d1220;
  --bg-surface: #121826;
  --bg-surface-raised: #161e2e;
  --bg-surface-sunken: #0d1220;
  --bg-glass: rgba(18, 24, 38, 0.6);
  --bg-glass-strong: rgba(18, 24, 38, 0.85);
  --bg-overlay: rgba(2, 4, 10, 0.65);
  --bg-inverse: #f7f8fa;

  --border-subtle: rgba(255, 255, 255, 0.07);
  --border-default: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.22);
  --border-glass: rgba(255, 255, 255, 0.1);

  --text-primary: #f3f5f9;
  --text-secondary: #c3c9d4;
  --text-tertiary: #8b93a3;
  --text-muted: #5c6474;
  --text-on-accent: #ffffff;
  --text-link: #6fa3ff;

  --accent: #4d84e8;
  --accent-strong: #7fa8ef;
  --accent-soft: rgba(77, 132, 232, 0.16);
  --accent-2: #ff8a5c;
  --accent-2-soft: rgba(255, 138, 92, 0.16);

  --success: #34d399;
  --success-soft: rgba(52, 211, 153, 0.14);
  --warning: #fbbf24;
  --warning-soft: rgba(251, 191, 36, 0.14);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 12px 32px -8px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 20px 48px -12px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 30px 70px -16px rgba(0, 0, 0, 0.6);
  --shadow-glow-blue: 0 0 40px -6px rgba(77, 132, 232, 0.45);
  --shadow-glow-orange: 0 0 40px -6px rgba(255, 138, 92, 0.4);

  --mesh-1: rgba(77, 132, 232, 0.35);
  --mesh-2: rgba(255, 138, 92, 0.28);
  --mesh-3: rgba(0, 182, 222, 0.22);
  --scrollbar-thumb: rgba(255, 255, 255, 0.14);

  color-scheme: dark;
}

/* ==========================================================================
   Base reset & global element theming
   ========================================================================== */

* {
  box-sizing: border-box;
}

html {
  background: var(--bg-canvas);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg-canvas);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

::selection {
  background: var(--accent-2);
  color: #ffffff;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  background-clip: padding-box;
}

a {
  color: var(--text-link);
}

img.img-fallback {
  opacity: 0.55;
  padding: 12% !important;
}

/* ==========================================================================
   Shared component primitives — reused across pages
   ========================================================================== */

.gs-glass {
  background: var(--bg-glass);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--border-glass);
}

.gs-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}

.gs-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  line-height: 1.3;
  white-space: nowrap;
  flex-shrink: 0;
}

/* AI Ready: arancione GS1, badge "pieno" per restare il segnale più prominente */
.gs-badge--ai {
  background: linear-gradient(135deg, var(--gs1-orange), #ff8f5c);
  color: #fff;
  box-shadow: 0 4px 14px -4px rgba(242, 99, 52, 0.5);
}

.gs-badge--verified {
  background: var(--success-soft);
  color: var(--success);
}

/* GS1 Web Vocabulary: blu GS1, fisso indipendentemente dal tema */
.gs-badge--vocab {
  background: rgba(0, 44, 108, 0.14);
  color: #002c6c;
}

/* schema.org: rosso del brand schema.org, fisso indipendentemente dal tema */
.gs-badge--schema {
  background: rgba(153, 0, 0, 0.14);
  color: #990000;
}

/* Su sfondo scuro i colori di brand fissi perdono contrasto: schiariti solo per leggibilità */
:root[data-theme='dark'] .gs-badge--vocab {
  background: rgba(77, 132, 232, 0.18);
  color: #82abf5;
}

:root[data-theme='dark'] .gs-badge--schema {
  background: rgba(255, 107, 107, 0.16);
  color: #ff8f8f;
}

.gs-badge--neutral {
  background: var(--bg-surface-sunken);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}

/* Badge circolare/quadrato colorato per icone a supporto di stat, timeline, infografiche */
.icon-badge {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--icon-badge-bg, var(--accent-soft));
  color: var(--icon-badge-color, var(--accent));
}

.icon-badge.sm {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
}

.icon-badge.round {
  border-radius: var(--radius-full);
}

/* Blocco codice JSON con evidenziazione sintattica (JSON-LD drawer, eventi EPCIS) */
.gs-code-block {
  margin: 0;
  padding: 14px 16px;
  background: var(--surface-code);
  border-radius: var(--radius-md);
  overflow-x: auto;
}

.gs-code-block code {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.6;
  white-space: pre;
  color: #cbd5e1;
}

.jl-key { color: #7dd3fc; }
.jl-string { color: #a5f3af; }
.jl-number { color: #fbbf7a; }
.jl-bool { color: #f0abfc; }
.jl-null { color: #94a3b8; }

.gs-btn {
  appearance: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.92rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}

.gs-btn:active {
  transform: scale(0.97);
}

.gs-btn--primary {
  background: var(--gs1-blue);
  color: #fff;
  box-shadow: var(--shadow-glow-blue);
}
.gs-btn--primary:hover {
  background: var(--accent-strong);
}

.gs-btn--ghost {
  background: var(--bg-surface-sunken);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
}
.gs-btn--ghost:hover {
  border-color: var(--border-strong);
}

.gs-kbd {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  background: var(--bg-surface-sunken);
  border: 1px solid var(--border-default);
  border-bottom-width: 2px;
  padding: 2px 6px;
  border-radius: 6px;
  color: var(--text-tertiary);
}

@keyframes gs-fade-up {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes gs-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes gs-scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes gs-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}