/* =================================================================
   ARCADE LIQUOR — DESIGN SYSTEM
   Tokens · base · typography · buttons · utilities
   Source of truth for the look. Reference these in Bricks elements
   via global classes + CSS variables (never paste raw hex onto elements).
   ================================================================= */

:root{
  /* ---- Color (lab46-derived: ink/paper/white + slate-blue accent only) ---- */
  --al-ink:#0B0C0F;
  --al-ink-2:#16181C;
  --al-paper:#F2F2EF;
  --al-white:#FFFFFF;
  --al-slate:#7791A5;     /* primary accent: links, benefits bar */
  --al-deep:#355672;      /* deep accent: hovers, link text on light */
  --al-lslate:#C9D3DB;    /* light accent: labels on dark */
  --al-grey:#6E7178;      /* body muted */
  --al-line:#E3E3DF;      /* hairline on light */
  --al-line-dark:#23262E; /* hairline on dark */

  /* ---- Type families ---- */
  --al-serif:'Fraunces',Georgia,'Times New Roman',serif;
  --al-body:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  /* ---- Fluid type scale ---- */
  --al-fs-display:clamp(48px,7.2vw,102.4px);
  --al-fs-h1:clamp(38.4px,5vw,64px);
  --al-fs-h2:clamp(32px,4vw,52.8px);
  --al-fs-h3:clamp(24px,2.4vw,35.2px);
  --al-fs-quote:clamp(32px,4.4vw,57.6px);
  --al-fs-body:17px;
  --al-fs-sm:14px;
  --al-fs-eyebrow:11.5px;

  /* ---- Spacing (8px rhythm) ---- */
  --al-sp-1:8px;  --al-sp-2:16px; --al-sp-3:24px; --al-sp-4:32px;
  --al-sp-5:48px; --al-sp-6:64px; --al-sp-8:96px;
  --al-section:clamp(72px,11vw,160px);

  /* ---- Layout ---- */
  --al-maxw:1320px;
  --al-pad:clamp(20px,5vw,80px);

  /* ---- Motion ---- */
  --al-ease:cubic-bezier(.15,.85,.35,1);
}

/* ---- Base (light touch — Bricks owns structural layout) ---- */
html{overflow-x:clip;-webkit-text-size-adjust:100%}
body{
  font-family:var(--al-body);
  color:var(--al-ink);
  background:var(--al-white);
  font-size:var(--al-fs-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body.al-no-scroll{overflow:hidden}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}

/* ---- Typography helpers ---- */
.al-serif{
  font-family:var(--al-serif);
  font-optical-sizing:auto;
  font-weight:360;
  line-height:1.04;
  letter-spacing:-.012em;
}
.al-serif--disp{font-variation-settings:'opsz' 144;}

.al-h1{font-family:var(--al-serif);font-variation-settings:'opsz' 144;font-weight:360;font-size:var(--al-fs-h1);line-height:1.04;letter-spacing:-.015em;}
.al-h2{font-family:var(--al-serif);font-variation-settings:'opsz' 144;font-weight:360;font-size:var(--al-fs-h2);line-height:1.06;letter-spacing:-.014em;}
.al-h3{font-family:var(--al-serif);font-weight:400;font-size:var(--al-fs-h3);line-height:1.1;letter-spacing:-.01em;}

.al-eyebrow{
  font-size:var(--al-fs-eyebrow);
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.al-lede{color:var(--al-grey);font-size:clamp(16px,1.3vw,19px);line-height:1.6;}

/* Inline accent link inside serif statements */
.al-ul{
  color:var(--al-deep);
  text-decoration:underline;
  text-underline-offset:5px;
  text-decoration-thickness:1px;
  transition:opacity .3s var(--al-ease);
}
.al-ul:hover{opacity:.7;}

/* ---- Color utility classes ---- */
.al-text-slate{color:var(--al-slate);}
.al-text-deep{color:var(--al-deep);}
.al-text-lslate{color:var(--al-lslate);}
.al-text-grey{color:var(--al-grey);}
.al-bg-ink{background:var(--al-ink);color:#fff;}
.al-bg-paper{background:var(--al-paper);}
.al-bg-slate{background:var(--al-slate);}

/* ---- Layout utilities ---- */
.al-wrap{max-width:var(--al-maxw);margin-inline:auto;padding-inline:var(--al-pad);}
.al-section{padding-block:var(--al-section);}
.al-center{text-align:center;}

/* ---- Bracketed ghost button (signature component) ---- */
.al-btn{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-width:215px;
  border:1px solid;
  padding:15px 20px;
  font-family:var(--al-body);
  font-size:11.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:600;
  background:none;
  cursor:pointer;
  text-decoration:none;
  transition:all .45s var(--al-ease);
}
.al-btn::before{content:"[";opacity:.55;font-weight:400;}
.al-btn::after{content:"]";opacity:.55;font-weight:400;}
.al-btn > span{flex:1;text-align:center;}
.al-btn--light{border-color:rgba(255,255,255,.5);color:#fff;}
.al-btn--light:hover{background:#fff;color:var(--al-ink);border-color:#fff;}
.al-btn--dark{border-color:var(--al-ink);color:var(--al-ink);}
.al-btn--dark:hover{background:var(--al-ink);color:var(--al-paper);}
.al-btn--sm{min-width:150px;padding:13px 16px;}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;}
}