/* =====================================================================
   SHŌGUN — UI Design System v1 (2026-06-29)
   Source: Figma "Shogun UI Design System" (file V0zyxFOcoGUzpXQar7ssdy)
   Single source of truth for tokens + components. Import this first.

   Units: rem/em only (1rem = 16px at the default root size), so the whole
   system scales with the user's font-size preference. The Figma artboard
   is 1440px wide; display sizes are the 1:1 values expressed in rem, with
   fluid clamp() versions keeping them legible down to mobile.
   ===================================================================== */

:root{
  /* ---- Color ---- */
  --ds-red:        #F60A0A;   /* Primary text / brand red            */
  --ds-pink:       #FFCCDD;   /* Primary background / on-red text     */
  --ds-logo-red:   #FF0000;   /* Pure-red logo fill (wordmark)        */
  --ds-red-50:     rgba(246,10,10,.5);  /* placeholder / disabled red */

  /* ---- Typography ---- */
  --ds-font:        "Momo Trust Sans", "Helvetica Neue", Arial, sans-serif;
  --ds-font-input:  "Kind Sans", "Momo Trust Sans", Arial, sans-serif; /* inputs/lists */
  --ds-w-regular:   400;
  --ds-w-bold:      800;   /* "ExtraBold" in the system = Bold weight */

  /* Fluid type scale — clamp(min, 1440-relative, artboard size) */
  --ds-h1:       clamp(3rem,     10.42vw, 9.375rem);
  --ds-h2:       clamp(2rem,      4.86vw, 4.375rem);
  --ds-h3:       clamp(1.625rem,  3.47vw, 3.125rem);
  --ds-body-1:   clamp(0.72rem,   1.7792vw, 1.6rem);
  --ds-body-2:   clamp(0.64rem,   1.3312vw, 1.2rem);
  --ds-caption:  clamp(0.8125rem, 1.39vw, 1.25rem);
  --ds-overline: 0.625rem;
  --ds-ui:       1.25rem;     /* button / input text */
  --ds-ui-sm:    0.9375rem;   /* language toggle     */

  /* ---- Form / control metrics ---- */
  --ds-control-h:    2.1875rem;
  --ds-border:       0.09375rem;   /* 1.5px */
  --ds-radius:       0;            /* the system uses sharp corners */

  /* ---- Layout grid (responsive columns) ---- */
  --ds-cols:    12;          /* columns — desktop ≥75em              */
  --ds-margin:  0;           /* page side margin — desktop & tablet  */
  --ds-gutter:  1.25rem;     /* gap between columns                  */
}

/* =====================================================================
   LAYOUT GRID — 12 / 8 / 4 responsive columns
     Desktop ≥75em    : 12 columns · 0 margin
     Tablet  48–75em  :  8 columns · 0 margin
     Phone   ≤47.99em :  4 columns · 1.25rem margin
   Gutter is 1.25rem at every breakpoint. Breakpoints are in em so they
   also respond to the user's font-size.
   ===================================================================== */
@media (max-width:74.99em){                  /* tablet */
  :root{ --ds-cols: 8; --ds-margin: 0; }
}
@media (max-width:47.99em){                  /* phone */
  :root{ --ds-cols: 4; --ds-margin: 1.25rem; }
}

/* Page container: full width with the responsive side margin. */
.ds-container{
  width:100%;
  margin-inline:auto;
  padding-inline:var(--ds-margin);
}

/* The column grid itself. Place children with .ds-col-* span helpers. */
.ds-grid{
  display:grid;
  grid-template-columns:repeat(var(--ds-cols), 1fr);
  column-gap:var(--ds-gutter);
  row-gap:var(--ds-gutter);
}

/* Column spans 1–12. A span larger than the active column count is
   clamped by CSS Grid, so `ds-col-12` fills 8 on tablet and 4 on phone. */
.ds-col-1 { grid-column:span 1; }
.ds-col-2 { grid-column:span 2; }
.ds-col-3 { grid-column:span 3; }
.ds-col-4 { grid-column:span 4; }
.ds-col-5 { grid-column:span 5; }
.ds-col-6 { grid-column:span 6; }
.ds-col-7 { grid-column:span 7; }
.ds-col-8 { grid-column:span 8; }
.ds-col-9 { grid-column:span 9; }
.ds-col-10{ grid-column:span 10; }
.ds-col-11{ grid-column:span 11; }
.ds-col-12{ grid-column:span 12; }

/* =====================================================================
   TYPOGRAPHY
   ===================================================================== */
.ds-h1{ font:var(--ds-w-bold) var(--ds-h1)/1 var(--ds-font); color:var(--ds-red); }
.ds-h2{ font:var(--ds-w-bold) var(--ds-h2)/1 var(--ds-font); color:var(--ds-red); }
.ds-h3{ font:var(--ds-w-bold) var(--ds-h3)/1 var(--ds-font); color:var(--ds-red); }

.ds-body-1{ font:var(--ds-w-regular) var(--ds-body-1)/1.15 var(--ds-font); color:var(--ds-red); }
.ds-body-2{ font:var(--ds-w-regular) var(--ds-body-2)/1.2  var(--ds-font); color:var(--ds-red); }
.ds-caption{ font:var(--ds-w-regular) var(--ds-caption)/1.2 var(--ds-font); color:var(--ds-red); }
.ds-overline{
  font:var(--ds-w-regular) var(--ds-overline)/1 var(--ds-font);
  color:var(--ds-red); text-transform:uppercase; letter-spacing:.08em;
}
.ds-bold{ font-weight:var(--ds-w-bold); }
.ds-underline{ text-decoration:underline; text-underline-position:from-font; }

/* =====================================================================
   MENU / CLOSE  (text links, uppercase, underlined)
   ===================================================================== */
.ds-menu{
  font:var(--ds-w-regular) var(--ds-ui)/1 var(--ds-font);
  color:var(--ds-red); text-transform:uppercase; text-decoration:underline;
  text-underline-position:from-font; background:none; border:0; cursor:pointer;
  display:inline-flex; align-items:center; gap:.3em;
}
.ds-menu--close::before{ content:"\00D7"; text-decoration:none; } /* × */

/* =====================================================================
   BUTTONS
   ===================================================================== */
/* Button 1 — outlined, fills red on hover */
.ds-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.25em;
  min-height:var(--ds-control-h); padding:.25em .6em;
  font:var(--ds-w-regular) var(--ds-ui)/1 var(--ds-font);
  color:var(--ds-red); background:transparent;
  border:var(--ds-border) solid var(--ds-red); border-radius:var(--ds-radius);
  cursor:pointer; transition:background-color .18s ease, color .18s ease;
}
.ds-btn:hover,
.ds-btn:focus-visible{ background:var(--ds-red); color:var(--ds-pink); }

/* Button 2 — text only (no border), with arrow */
.ds-btn--text{
  border:0; padding:0; background:none; min-height:0;
}
.ds-btn--text:hover{ background:none; color:var(--ds-red); opacity:.7; }

/* Inline arrow icon — drop in <svg class="ds-arrow">…</svg>.
   Sized in em (not rem) so it scales with whatever text size it sits next
   to (15x13px at the default --ds-ui 20px button text). Fill follows
   currentColor, so it tracks the button's text colour automatically
   (default red, pink on Button 1's filled hover, etc). */
.ds-arrow{ width:.75em; height:.65em; flex:none; }
.ds-arrow path{ fill:currentColor; transition:fill .18s ease; }

/* =====================================================================
   LANGUAGE TOGGLE  (Button 3)  — segmented EN / IT
   Active segment: filled red + pink text + globe glyph.
   ===================================================================== */
.ds-lang{ display:inline-flex; }
.ds-lang button{
  display:inline-flex; align-items:center; justify-content:center; gap:.27em;
  min-height:var(--ds-control-h); padding:.25em .53em;
  font:var(--ds-w-regular) var(--ds-ui-sm)/1 var(--ds-font);
  color:var(--ds-red); background:transparent;
  border:var(--ds-border) solid var(--ds-red); border-radius:var(--ds-radius);
  cursor:pointer;
}
.ds-lang button + button{ border-left:0; }      /* shared inner edge */
.ds-lang button[aria-pressed="true"]{ background:var(--ds-red); color:var(--ds-pink); }
.ds-lang button[aria-pressed="true"] .ds-globe path{ stroke:var(--ds-pink); }
.ds-globe{ width:1em; height:1em; flex:none; }
.ds-globe path{ stroke:var(--ds-red); }

/* =====================================================================
   CHECKBOX  (0.875rem box, fills red + check when active)
   ===================================================================== */
.ds-check{
  display:inline-flex; align-items:center; gap:.5rem;
  font:var(--ds-w-regular) var(--ds-ui)/1.2 var(--ds-font); color:var(--ds-red);
  cursor:pointer;
}
.ds-check input{ position:absolute; opacity:0; width:0; height:0; }
.ds-check .box{
  width:.875rem; height:.875rem; flex:none;
  border:.0625rem solid var(--ds-red); border-radius:var(--ds-radius);
  display:grid; place-items:center;
}
.ds-check input:checked + .box{ background:var(--ds-red); }
.ds-check input:checked + .box::after{
  content:""; width:.5rem; height:.3125rem;
  border:.09375rem solid var(--ds-pink); border-top:0; border-right:0;
  transform:translateY(-.0625rem) rotate(-45deg);
}
.ds-check input:focus-visible + .box{ outline:.125rem solid var(--ds-red); outline-offset:.125rem; }

/* =====================================================================
   INPUT FIELD  (underline only; label = red @50%, active text = red)
   ===================================================================== */
.ds-field{ display:flex; flex-direction:column; }
.ds-field input{
  font:var(--ds-w-regular) var(--ds-ui)/1 var(--ds-font-input);
  color:var(--ds-red); background:none;
  border:0; border-bottom:.0625rem solid var(--ds-red);
  padding:0 0 .3125rem .3125rem; border-radius:0;
}
.ds-field input::placeholder{ color:var(--ds-red-50); }
.ds-field input:focus{ outline:none; }
.ds-field .req{ color:var(--ds-red-50); }   /* the " *" marker */

/* =====================================================================
   LIST / SELECT  (label + value + dropdown triangle, underline only)
   ===================================================================== */
.ds-list{ display:inline-flex; align-items:baseline; gap:.5rem;
  font:var(--ds-w-regular) var(--ds-ui)/1 var(--ds-font-input); color:var(--ds-red); }
.ds-list select{
  appearance:none; -webkit-appearance:none;
  font:inherit; color:var(--ds-red); background:none;
  border:0; border-bottom:.0625rem solid var(--ds-red);
  padding:0 1.125rem .3125rem .3125rem; border-radius:0; cursor:pointer;
  /* dropdown triangle */
  background-image:linear-gradient(45deg,transparent 50%,var(--ds-red) 50%),
                   linear-gradient(-45deg,transparent 50%,var(--ds-red) 50%);
  background-position:right .375rem bottom .5rem, right .125rem bottom .5rem;
  background-size:.25rem .25rem, .25rem .25rem; background-repeat:no-repeat;
}
.ds-list select:focus{ outline:none; }

/* =====================================================================
   ACCESSIBILITY
   ===================================================================== */
@media (prefers-reduced-motion: reduce){
  .ds-btn{ transition:none; }
}