/* Always.flights · design tokens and base styles · v1
   Fonts: Cormorant Garamond (display), DM Sans (body), IBM Plex Mono (codes). All three are open source (SIL OFL). */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500&family=DM+Sans:wght@400;500&family=IBM+Plex+Mono:wght@500&display=swap");

:root{
  /* Brand colours */
  --always-cellar-black:#0F120C;
  --always-ivory:#F6F1E4;
  --always-champagne:#E4CF9C;
  --always-brut-gold:#C9A961;
  --always-olive:#5E6B2F;        /* the stopover only, use sparingly */
  --always-olive-light:#98A85A;  /* olive on dark backgrounds */
  --always-deep-olive:#3B4421;
  --always-sand:#EFE6CC;
  --always-line:#DDD5BF;
  --always-muted:#6B6A55;

  /* Type */
  --always-font-display:'Cormorant Garamond',Georgia,serif;
  --always-font-body:'DM Sans',system-ui,sans-serif;
  --always-font-mono:'IBM Plex Mono',ui-monospace,monospace;

  /* Radii and spacing */
  --always-radius-xs:6px; --always-radius-sm:12px; --always-radius-md:16px; --always-radius-lg:20px; --always-radius-xl:24px;
  --always-space-1:4px; --always-space-2:8px; --always-space-3:12px; --always-space-4:16px; --always-space-5:24px; --always-space-6:32px; --always-space-7:48px; --always-space-8:64px;

  /* Semantic colours, dark by default */
  --bg:var(--always-cellar-black);
  --surface:#171B11;
  --fg:var(--always-ivory);
  --muted:var(--always-brut-gold);
  --accent:var(--always-champagne);
  --on-accent:var(--always-cellar-black);
  --olive:var(--always-olive-light);
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --bg:var(--always-ivory); --surface:#fff; --fg:var(--always-cellar-black); --muted:var(--always-muted);
    --accent:var(--always-cellar-black); --on-accent:var(--always-ivory); --olive:var(--always-olive);
  }
}
:root[data-theme="light"]{--bg:var(--always-ivory);--surface:#fff;--fg:var(--always-cellar-black);--muted:var(--always-muted);--accent:var(--always-cellar-black);--on-accent:var(--always-ivory);--olive:var(--always-olive)}
:root[data-theme="dark"]{--bg:var(--always-cellar-black);--surface:#171B11;--fg:var(--always-ivory);--muted:var(--always-brut-gold);--accent:var(--always-champagne);--on-accent:var(--always-cellar-black);--olive:var(--always-olive-light)}

/* Base */
.always{background:var(--bg);color:var(--fg);font-family:var(--always-font-body);font-size:16px;line-height:1.5}
.always-h1,.always-h2,.always-h3{font-family:var(--always-font-display);font-weight:700;line-height:1;letter-spacing:-.02em;margin:0}
.always-h1{font-size:clamp(46px,8vw,92px)} .always-h2{font-size:clamp(32px,5vw,56px)} .always-h3{font-size:28px;line-height:1.1}
.always-h1 em,.always-h2 em{font-weight:500;font-style:italic;color:var(--muted)}
.always-lead{font-size:19px;max-width:560px}
.always-label{font-family:var(--always-font-mono);font-weight:500;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.always-code{font-family:var(--always-font-mono);font-weight:500;letter-spacing:.12em}   /* PNR, IATA, seat, gate */

/* Buttons */
.always-btn{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 32px;border:0;border-radius:var(--always-radius-sm);background:var(--accent);color:var(--on-accent);font:500 17px var(--always-font-body);cursor:pointer;text-decoration:none}
.always-btn:hover{opacity:.88}
.always-btn--outline{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 2px var(--accent)}
.always-btn--pill{height:44px;padding:0 18px;border-radius:22px;font-size:15px}

/* Experience tags (stopover, lounge, chauffeur...) */
.always-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--always-radius-xs);background:var(--always-sand);color:var(--always-cellar-black);font:500 12px var(--always-font-mono);letter-spacing:.16em;text-transform:uppercase}
.always-chip--stopover{background:var(--always-champagne)}
.always-chip .always-icon{width:20px;height:20px;flex:none}
.always-icon{width:48px;height:48px;display:inline-block}

/* Cards */
.always-card{background:var(--surface);border-radius:var(--always-radius-lg);padding:var(--always-space-5)}
.always-card--olive{background:var(--always-deep-olive);color:var(--always-ivory)}

/* Boarding-pass language */
.always-ticket{background:#F8F4E8;color:var(--always-cellar-black);border-radius:8px;overflow:hidden}
.always-ticket__head{background:var(--always-cellar-black);color:var(--always-ivory);border-bottom:4px solid var(--always-champagne);padding:0 24px;height:64px;display:flex;align-items:center;justify-content:space-between}
.always-cell{padding:12px 16px;border-top:1px solid var(--always-line);border-left:1px solid var(--always-line)}
.always-cell__label{font:500 11px var(--always-font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--always-muted)}
.always-cell__value{margin-top:4px;font:700 38px/1 var(--always-font-display);font-variant-numeric:lining-nums;white-space:nowrap}
.always-barcode{background:repeating-linear-gradient(0deg,var(--always-cellar-black) 0 3px,transparent 3px 5px,var(--always-cellar-black) 5px 6px,transparent 6px 9px,var(--always-cellar-black) 9px 13px,transparent 13px 15px)}
.always-perforation{border-left:2px dashed var(--always-line)}
.always-strip{background:var(--always-sand);display:flex;align-items:center;gap:28px;padding:0 24px;height:56px;font:500 13px var(--always-font-mono);letter-spacing:.16em}

/* Logo usage: keep clear space of 2x the olive's width on all sides.
   Minimum full lockup: 120px wide (30mm in print). Below that use the flute-and-olive icon, down to 16px. */