/* ============================================================
   ANYSHIFT BELGIË — DESIGN SYSTEM
   Tokens + component styles. Import this sheet to use the system.
   ============================================================ */

@font-face {
  font-family: 'Newake';
  src: url('/fonts/Newake-Font-Regular.otf') format('opentype'),
       url('/fonts/Newake-Font-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Brand colors ---- */
  --as-red:        #FF0000;   /* primary */
  --as-red-700:    #D60000;   /* hover / pressed */
  --as-red-50:     #FFF0F0;   /* soft tint surface */
  --as-black:      #1A1D21;   /* headings, ink */
  --as-white:      #FFFFFF;

  /* ---- Neutrals (UI) ---- */
  --as-ink:        #333840;   /* body text */
  --as-ink-soft:   #6A7178;   /* secondary text */
  --as-paper:      #F5F5F6;   /* section background */
  --as-line:       #E7E7EA;   /* hairlines / borders */
  --as-placeholder:#B6B8BC;

  /* ---- Accents (use sparingly) ---- */
  --as-blue:       #253B84;
  --as-yellow:     #F9C022;
  --as-green:      #1FA463;   /* success / status */

  /* ---- Gradients (ready to use — background: var(--as-grad-*)) ---- */
  --as-grad-fade: linear-gradient(180deg, #FFFFFF 0%, #FFD2D2 16%, var(--as-red) 33%);
  --as-grad-red:  linear-gradient(135deg, #FF4D4D 0%, #FF0000 48%, #CC0000 100%);
  --as-grad-soft: linear-gradient(180deg, #FFF5F5 0%, #FFE0E0 100%);

  /* ---- Radius ---- */
  --as-r-pill: 999px;
  --as-r-xl:   28px;   /* sections, big cards */
  --as-r-lg:   20px;   /* cards */
  --as-r-md:   16px;   /* inputs, small cards */
  --as-r-sm:   12px;   /* chips, tight controls */

  /* ---- Spacing scale ---- */
  --as-s1: 4px;  --as-s2: 8px;  --as-s3: 12px; --as-s4: 16px;
  --as-s5: 24px; --as-s6: 32px; --as-s7: 48px; --as-s8: 64px; --as-s9: 96px;

  /* ---- Elevation ---- */
  --as-shadow-sm: 0 1px 2px rgba(26,29,33,.06), 0 2px 8px rgba(26,29,33,.05);
  --as-shadow-md: 0 8px 28px rgba(26,29,33,.10);
  --as-shadow-red: 0 10px 28px rgba(255,0,0,.28);

  /* ---- Type ---- */
  --as-font-display: 'Newake', 'Arial Black', system-ui, sans-serif;
  --as-font-body: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.as-display, .as-h1, .as-h2, .as-h3, .as-h4, .as-h5, .as-h6 {
  font-family: var(--as-font-display);
  font-weight: 400;
  color: var(--as-black);
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: .035em;
  margin: 0;
}
.as-display { font-size: clamp(48px, 7vw, 84px); }
.as-h1 { font-size: clamp(36px, 4.5vw, 56px); }
.as-h2 { font-size: clamp(28px, 3vw, 40px); }
.as-h3 { font-size: clamp(20px, 2vw, 26px); line-height: 1.08; letter-spacing: .03em; }
.as-h4 { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.12; letter-spacing: .03em; }
.as-h5 { font-size: 15px; line-height: 1.15; letter-spacing: .045em; }
.as-h6 { font-size: 13px; line-height: 1.2; letter-spacing: .07em; }

.as-eyebrow {
  font-family: var(--as-font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--as-red);
  margin: 0;
}
.as-body-lg { font: 400 19px/1.6 var(--as-font-body); color: var(--as-ink); }
.as-body    { font: 400 16px/1.65 var(--as-font-body); color: var(--as-ink); }
.as-body-sm { font: 400 14px/1.6 var(--as-font-body); color: var(--as-ink-soft); }
.as-caption { font: 600 12px/1.4 var(--as-font-body); letter-spacing: .04em; color: var(--as-ink-soft); }

/* ============================================================
   BUTTONS — pill shaped
   ============================================================ */
.as-btn {
  font-family: var(--as-font-body);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 30px;
  border-radius: var(--as-r-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .18s ease, background .2s ease, color .2s ease,
              border-color .2s ease, box-shadow .2s ease;
}
.as-btn:active { transform: translateY(1px); }
.as-btn svg { width: 17px; height: 17px; }

/* Primary — solid red */
.as-btn--primary { background: var(--as-red); color: #fff; box-shadow: var(--as-shadow-red); }
.as-btn--primary:hover { background: var(--as-red-700); box-shadow: 0 12px 30px rgba(255,0,0,.34); }

/* Secondary — black */
.as-btn--dark { background: var(--as-black); color: #fff; }
.as-btn--dark:hover { background: #000; }

/* Outline */
.as-btn--outline { background: transparent; color: var(--as-red); border-color: var(--as-red); }
.as-btn--outline:hover { background: var(--as-red); color: #fff; }

/* Ghost / subtle */
.as-btn--ghost { background: var(--as-red-50); color: var(--as-red); }
.as-btn--ghost:hover { background: #ffe1e1; }

/* On-red surfaces */
.as-btn--white { background: #fff; color: var(--as-red); }
.as-btn--white:hover { background: var(--as-black); color: #fff; }

/* Sizes */
.as-btn--lg { padding: 18px 38px; font-size: 17px; }
.as-btn--sm { padding: 11px 20px; font-size: 13px; }

/* Gradient surfaces */
.as-grad-fade { background: var(--as-grad-fade); }
.as-grad-red  { background: var(--as-grad-red); color: #fff; }
.as-grad-soft { background: var(--as-grad-soft); }

/* App-store badge buttons (for red / dark surfaces) */
.as-storebtn {
  display: inline-flex; align-items: center; gap: 12px;
  background: #fff; color: var(--as-black);
  border: 1.5px solid #fff;
  border-radius: var(--as-r-md);
  padding: 11px 24px; text-decoration: none;
  font-family: var(--as-font-body);
  transition: background .2s ease, color .2s ease, transform .18s ease;
}
.as-storebtn:active { transform: translateY(1px); }
.as-storebtn svg { width: 23px; height: 23px; fill: var(--as-black); flex: 0 0 auto; }
.as-storebtn small { display: block; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--as-ink-soft); }
.as-storebtn b { display: block; font-size: 15px; font-weight: 600; line-height: 1.15; }
/* outline variant (transparent + white border, for on red) */
.as-storebtn--outline { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; }
.as-storebtn--outline svg { fill: #fff; }
.as-storebtn--outline small { color: rgba(255,255,255,.78); }
.as-storebtn--outline b { color: #fff; }

/* Official store badges (PNG) */
.store-badge { display: inline-flex; border-radius: 10px; transition: transform .18s ease, box-shadow .18s ease; }
.store-badge:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(26,29,33,.18); }
.store-badge img { height: 48px; width: auto; display: block; border-radius: 10px; }

/* ============================================================
   BLOG CARD
   ============================================================ */
.as-blogcard {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--as-line);
  border-radius: var(--as-r-lg); overflow: hidden;
  box-shadow: var(--as-shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.as-blogcard:hover { transform: translateY(-5px); box-shadow: var(--as-shadow-md); }
/* Red rounded canvas/frame around the full, uncropped hero image. */
.as-blogcard__media { position: relative; margin: 14px 14px 0; padding: 8px; line-height: 0;
  background: var(--as-grad-red); border-radius: 18px; box-shadow: var(--as-shadow-red); }
.as-blogcard__media img { display: block; width: 100%; height: auto; border-radius: 11px; }
/* The AnyShift logo is already baked into every blog hero image, so the
   rebuild's extra corner-logo overlay is removed everywhere. */
.as-blogcard__corner { display: none !important; }
.as-blogcard__body { display: flex; flex-direction: column; gap: 12px; padding: 22px; flex: 1; }
.as-blogcard__title { font-family: var(--as-font-display); text-transform: uppercase; letter-spacing: .025em;
  font-size: 19px; line-height: 1.18; color: var(--as-black); margin: 2px 0; }
.as-blogcard__excerpt { font: 400 14px/1.6 var(--as-font-body); color: var(--as-ink-soft); margin: 0; }
.as-blogcard__more { margin-top: auto; display: inline-flex; align-items: center; gap: 7px;
  color: var(--as-red); font-weight: 600; font-size: 14px; text-decoration: none; }
.as-blogcard__more svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.as-blogcard__more:hover { gap: 11px; transition: gap .2s; }

/* ============================================================
   INPUTS
   ============================================================ */
.as-field { display: flex; flex-direction: column; gap: 7px; }
.as-label { font: 600 13px/1 var(--as-font-body); color: var(--as-black); }
.as-input {
  font: 400 15px/1 var(--as-font-body);
  width: 100%;
  padding: 15px 20px;
  border: 1.5px solid var(--as-line);
  border-radius: var(--as-r-md);
  background: #fff;
  color: var(--as-ink);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.as-input::placeholder { color: var(--as-placeholder); }
.as-input:focus {
  outline: none;
  border-color: var(--as-red);
  box-shadow: 0 0 0 4px rgba(255,0,0,.10);
}
/* pill input (newsletter style) */
.as-input--pill { border-radius: var(--as-r-pill); padding-left: 24px; padding-right: 24px; }

.as-inputgroup {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1.5px solid var(--as-line);
  border-radius: var(--as-r-pill);
  padding: 7px 7px 7px 8px;
}
.as-inputgroup:focus-within { border-color: var(--as-red); box-shadow: 0 0 0 4px rgba(255,0,0,.10); }
.as-inputgroup .as-input { border: 0; box-shadow: none; flex: 1; padding: 10px 16px; }
.as-inputgroup .as-input:focus { box-shadow: none; }

/* ============================================================
   CARDS & SECTIONS — rounded corners everywhere
   ============================================================ */
.as-section {
  border-radius: var(--as-r-xl);
  padding: clamp(28px, 4vw, 56px);
  background: #fff;
}
.as-section--paper { background: var(--as-paper); }
.as-section--red {
  background: var(--as-red);
  color: #fff;
}
.as-section--red .as-display,
.as-section--red .as-h1,
.as-section--red .as-h2,
.as-section--red .as-h3 { color: #fff; }

.as-card {
  background: #fff;
  border: 1px solid var(--as-line);
  border-radius: var(--as-r-lg);
  padding: 28px;
  box-shadow: var(--as-shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.as-card--hover:hover { transform: translateY(-4px); box-shadow: var(--as-shadow-md); }

.as-card--soft { background: var(--as-paper); border-color: transparent; box-shadow: none; }
.as-card--outline { background: #fff; border: 1.5px solid var(--as-line); box-shadow: none; }
.as-card--red { background: var(--as-red); color: #fff; border-color: transparent; box-shadow: var(--as-shadow-red); }
.as-card--accent {
  background: var(--as-red-50); border: 1px solid transparent; box-shadow: none;
}

/* ============================================================
   BADGES / CHIPS
   ============================================================ */
.as-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 12px/1 var(--as-font-body);
  letter-spacing: .03em;
  padding: 7px 13px;
  border-radius: var(--as-r-pill);
}
.as-badge--red   { background: var(--as-red-50); color: var(--as-red); }
.as-badge--solid { background: var(--as-red); color: #fff; }
.as-badge--dark  { background: var(--as-black); color: #fff; }
.as-badge--soft  { background: var(--as-paper); color: var(--as-ink); }
.as-badge--green { background: rgba(31,164,99,.12); color: var(--as-green); }
.as-badge--dot::before { content:""; width:7px; height:7px; border-radius:50%; background: currentColor; }

/* ============================================================
   AVATAR
   ============================================================ */
.as-avatar { border-radius: 50%; object-fit: cover; display: block; }

/* ============================================================
   AMBIENT BUBBLES — drifting translucent circles on red surfaces
   ============================================================ */
.as-bubbles {
  position: absolute; inset: 0; overflow: hidden;
  pointer-events: none; border-radius: inherit; z-index: 0;
}
.as-bubble {
  position: absolute; bottom: -60px; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.55), rgba(255,255,255,.10));
  animation: as-rise linear infinite;
}
@keyframes as-rise {
  0%   { transform: translate(0,0) scale(.7); opacity: 0; }
  12%  { opacity: .5; }
  80%  { opacity: .32; }
  100% { transform: translate(var(--dx, 0), -480px) scale(1.18); opacity: 0; }
}
/* keep content above the bubbles */
.as-onbubbles { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .as-bubble { animation: none; opacity: .22; }
}

/* ============================================================
   ICONS — single consistent line style (1.8px, round joins)
   ============================================================ */
.as-icon { display: inline-flex; width: 24px; height: 24px; }
.as-icon svg {
  width: 100%; height: 100%;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.as-iconchip {
  width: 52px; height: 52px; border-radius: var(--as-r-md);
  display: grid; place-items: center;
  background: var(--as-paper); color: var(--as-red);
}
.as-iconchip--tint  { background: var(--as-red-50); color: var(--as-red); }
.as-iconchip--solid { background: var(--as-red); color: #fff; }
.as-iconchip--dark  { background: var(--as-black); color: #fff; }
.as-iconchip--round { border-radius: var(--as-r-pill); }