/* ==========================================================================
   J International Bags — Design tokens, reset, typography
   ========================================================================== */

@font-face {
  font-family: 'Sora';
  src: url('/assets/fonts/sora-variable.woff2') format('woff2-variations'), url('/assets/fonts/sora-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-variable.woff2') format('woff2-variations'), url('/assets/fonts/inter-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand */
  --color-primary: #F64300;
  --color-primary-dark: #C93700;
  --color-primary-light: #FF6A2E;
  --color-secondary: #120B36;
  --color-secondary-light: #1E1450;
  --color-secondary-soft: #2A1F5E;

  /* Neutrals */
  --color-bg: #FAFAF9;
  --color-bg-alt: #F4F4F2;
  --color-surface: #FFFFFF;
  --color-border: #E7E2E2;
  --color-text: #17141F;
  --color-text-muted: #5B5866;
  --color-text-on-dark: #F3F1FA;
  --color-text-on-dark-muted: #B4AFC9;

  /* Gradients */
  --gradient-brand: linear-gradient(135deg, #F64300 0%, #FF7A3D 42%, #120B36 100%);
  --gradient-brand-soft: linear-gradient(135deg, rgba(246,67,0,0.14) 0%, rgba(18,11,54,0.10) 100%);
  --gradient-dark: linear-gradient(180deg, #120B36 0%, #0A0620 100%);
  --gradient-text: linear-gradient(90deg, #FF6A2E 0%, #F64300 60%, #C93700 100%);

  /* Type */
  --font-heading: 'Sora', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;

  /* Scale */
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;
  --fs-4xl: 3rem;
  --fs-5xl: 3.75rem;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 6rem;
  --space-16: 8rem;

  /* Shape / motion */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 8px rgba(18,11,54,0.06);
  --shadow-md: 0 8px 30px rgba(18,11,54,0.10);
  --shadow-lg: 0 20px 60px rgba(18,11,54,0.16);
  --shadow-glow: 0 10px 40px rgba(246,67,0,0.25);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-med: 420ms;
  --dur-slow: 800ms;

  --container-max: 1240px;
  --header-h: 84px;
}

* , *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; width: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, video, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { padding: 0; margin: 0; list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 var(--space-4);
  color: var(--color-secondary);
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.25rem, 4vw + 1rem, var(--fs-5xl)); font-weight: 800; }
h2 { font-size: clamp(1.75rem, 2.4vw + 1rem, var(--fs-3xl)); font-weight: 800; }
h3 { font-size: clamp(1.25rem, 1.2vw + 1rem, var(--fs-xl)); }
h4 { font-size: var(--fs-lg); }
p { margin: 0 0 var(--space-4); color: var(--color-text-muted); }

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}
.eyebrow::before {
  content: '';
  width: 22px;
  height: 2px;
  background: var(--gradient-text);
  border-radius: var(--radius-pill);
}

.text-gradient {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -60px; left: var(--space-4);
  background: var(--color-secondary); color: #fff; padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm); z-index: 999; transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: var(--space-4); }

::selection { background: var(--color-primary); color: #fff; }

/* Consistent branded keyboard-focus ring, sitewide. :focus-visible only fires
   for keyboard/assistive-tech navigation (not mouse clicks), so this never
   shows an unwanted ring on a tap/click — only when it's actually needed. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2.5px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}