/* ─────────────────────────────────────────────────────────────────
   Frequent Flyer Pro — Design Tokens v2.1
   Aligned with marketing/landing.html and extension/side-panel.

   Branding shift (v2 → v2.1):
   The earlier rule "purple = lockup only, never product chrome"
   has been retired. The shipping side-panel uses purple (#7C3AED)
   as the primary action colour, and the marketing site leans on
   the same purple gradient for every CTA. v2.1 codifies that:

     • --ffp-purple is the brand AND primary action colour.
     • Tier accents still own status / progress / tier-themed surfaces.
     • CTAs in product chrome may use either the brand purple OR the
       active tier accent; pick by context (assistant + global = purple,
       status + tier-themed = tier accent).
   ───────────────────────────────────────────────────────────────── */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,300..700,0..1,-50..200");

:root {
  /* ── Brand purple — used on the logo coin AND as primary product action ── */
  --ffp-purple:        #7D3CFF;   /* primary brand + CTA fill */
  --ffp-purple-deep:   #640CE6;   /* CTA gradient end, hover */
  --ffp-purple-ink:    #5D2BC0;   /* iconography on tinted bg */
  --ffp-purple-tint:   #EDE5FF;   /* eyebrow / chip background */
  --ffp-purple-soft:   #F3EBFF;   /* hover wash, tag bg */
  --ffp-purple-glow:   rgba(125, 60, 255, 0.30);  /* CTA shadow */

  /* Side-panel-aligned mirror of brand purple
     (extension uses --qr; expose the same value here so the panel
     can share a single source of truth.) */
  --qr:                #7C3AED;
  --qr-dark:           #5B21B6;

  /* Hero / brand gradient — used on the logo coin, primary pill CTAs,
     and any "active brand" surface. */
  --grad-brand:        linear-gradient(135deg, #7D3CFF 0%, #640CE6 100%);
  --grad-brand-soft:   linear-gradient(135deg, #8B4DFF 0%, #4A0FA8 100%);
  --grad-night:        linear-gradient(180deg, #1A1A1A 0%, #2A2A30 100%);
  --grad-watcher:      linear-gradient(135deg, #1A1A1A 0%, #2D2D3A 100%);

  /* ── Surfaces ── */
  --bg:           #FAFAFC;     /* marketing page background */
  --bg-panel:     #F5F5F7;     /* side-panel app background */
  --bg-card:      #FFFFFF;
  --bg-inset:     #EDEEF1;     /* progress track, dividers */
  --bg-night:     #1A1A1A;     /* dark hero / band background */
  --bg-night-2:   #2A2A30;     /* dark gradient end */

  /* ── Text ── */
  --fg:           #1A1A1A;
  --fg-2:         #3D3D45;     /* body copy on light surfaces */
  --fg-3:         #5F6368;     /* meta, secondary labels */
  --fg-4:         #9AA0A6;     /* tertiary / placeholder */
  --fg-ticket:    #191C1D;
  --fg-label:     #4A4456;     /* uppercase tiny labels */
  --fg-on-dark:   rgba(255,255,255,0.86);
  --fg-on-dark-2: rgba(255,255,255,0.55);
  --fg-on-dark-3: rgba(255,255,255,0.40);

  /* ── Borders ── */
  --line:         #EDEEF1;
  --line-strong:  #E0E0E0;
  --line-soft:    rgba(0,0,0,0.06);
  --line-on-dark: rgba(255,255,255,0.08);
  --perforation:  #CBC3D9;     /* dotted ticket divider */

  /* ── Semantic ── */
  --ok:           #0A611A;
  --ok-bg:        #E6F3EA;
  --ok-bright:    #4ADE80;     /* dark-mode pulse dot, watcher feed */
  --warn:         #92400E;
  --warn-bg:      #FEF3C7;
  --warn-bright:  #FBBF24;
  --err:          #991B1B;
  --err-bg:       #FEE2E2;
  --err-bright:   #FF6B6B;
  --info:         #1565C0;
  --info-bg:      #E3F2FD;

  /* ── Radii (collapsed from 8 steps to 4 + hero) ── */
  --r-sm:    4px;       /* chips, code badges */
  --r-md:    8px;       /* buttons, inputs, sections */
  --r-lg:    12px;      /* cards, ticket cards, modals */
  --r-xl:    18px;      /* feature cards, watcher feed, chat mock */
  --r-hero:  22px;      /* hero ticket stage */
  --r-pill:  999px;     /* hero CTAs, status pills, capsules */

  /* ── Spacing (4-grid) ── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;  --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-14: 56px; --s-16: 64px;

  /* ── Type ── */
  --font-display: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, ui-monospace, monospace;

  /* Display — letterspaced tight, Manrope 800 */
  --type-h1-size:  clamp(40px, 6vw, 68px);
  --type-h1-lead:  1.04;
  --type-h1-track: -0.035em;
  --type-h2-size:  clamp(28px, 4vw, 40px);
  --type-h2-lead:  1.10;
  --type-h2-track: -0.02em;
  --type-h3-size:  20px;

  /* Body */
  --type-lede-size: 18px;
  --type-body-size: 14.5px;
  --type-meta-size: 11px;

  /* Eyebrow — uppercase tracked label */
  --type-eyebrow-size:  11px;
  --type-eyebrow-track: 0.06em;

  /* ── Motion ── */
  --ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:   cubic-bezier(0.2, 0, 0.2, 1);
  --dur-fast:   0.15s;
  --dur:        0.20s;
  --dur-slow:   0.40s;

  /* ── Shadows ── */
  --shadow-card:    0 1px 3px rgba(0,0,0,0.06);
  --shadow-rise:    0 16px 40px rgba(0,0,0,0.08);
  --shadow-hero:    0 24px 60px rgba(0,0,0,0.20);
  --shadow-modal:   0 8px 32px rgba(0,0,0,0.18);
  --shadow-toast:   0 4px 16px rgba(0,0,0,0.18);
  --shadow-cta:     0 2px 12px var(--ffp-purple-glow);
  --shadow-cta-hi:  0 6px 22px rgba(125, 60, 255, 0.40);

  /* ── Tier surfaces ── */
  /* Bronze */
  --tier-bronze-surface-a: #7A4332;
  --tier-bronze-surface-b: #3F1E10;
  --tier-bronze-hairline:  #C68B5A;
  --tier-bronze-coin:      #6B3A2A;
  --tier-bronze-accent:    #C8632A;
  --tier-bronze-accent-deep: #9A4517;
  --tier-bronze-accent-soft: #F7E6D5;

  /* Silver */
  --tier-silver-surface-a: #8FA0AC;
  --tier-silver-surface-b: #3D4D58;
  --tier-silver-hairline:  #C9D2D9;
  --tier-silver-coin:      #78909C;
  --tier-silver-accent:    #2C7CC4;
  --tier-silver-accent-deep: #1B5A95;
  --tier-silver-accent-soft: #E5EEF8;

  /* Gold */
  --tier-gold-surface-a:   #F0AD3D;
  --tier-gold-surface-b:   #A36818;
  --tier-gold-hairline:    #FFD994;
  --tier-gold-coin:        #E69C24;
  --tier-gold-accent:      #A36818;
  --tier-gold-accent-deep: #7A4D0F;
  --tier-gold-accent-soft: #FBEFD8;

  /* Platinum (graphite + Qantas-red chromatic spark) */
  --tier-platinum-surface-a: #3D3D3D;
  --tier-platinum-surface-b: #0E0E0E;
  --tier-platinum-hairline:  #C0C7CE;
  --tier-platinum-coin:      #2C2C2C;
  --tier-platinum-accent:    #D11F1F;
  --tier-platinum-accent-deep: #991616;
  --tier-platinum-accent-soft: #FBE7E7;

  /* Platinum One (navy + gold thread) */
  --tier-platinum1-surface-a: #2D3A5C;
  --tier-platinum1-surface-b: #0F1224;
  --tier-platinum1-hairline:  #E69C24;
  --tier-platinum1-coin:      #0F1224;
  --tier-platinum1-accent:    #B07614;
  --tier-platinum1-accent-deep: #7A4D0F;
  --tier-platinum1-accent-soft: #FBEFD8;

  /* OneWorld pill colours (lifted from side-panel) */
  --ow-ruby:     #C4103E;
  --ow-sapphire: #2D6DB5;
  --ow-emerald:  #2E8B57;

  /* Default tier on a surface that needs one (login, marketing) */
  --tier-accent:      var(--tier-platinum-accent);
  --tier-accent-deep: var(--tier-platinum-accent-deep);
}

/* ── Tier scopes — set [data-tier="bronze"] on any subtree ── */
[data-tier="bronze"]    { --tier-accent: var(--tier-bronze-accent);    --tier-accent-deep: var(--tier-bronze-accent-deep);    --tier-accent-soft: var(--tier-bronze-accent-soft);    --tier-surface-a: var(--tier-bronze-surface-a);    --tier-surface-b: var(--tier-bronze-surface-b);    --tier-hairline: var(--tier-bronze-hairline);    --tier-coin: var(--tier-bronze-coin); }
[data-tier="silver"]    { --tier-accent: var(--tier-silver-accent);    --tier-accent-deep: var(--tier-silver-accent-deep);    --tier-accent-soft: var(--tier-silver-accent-soft);    --tier-surface-a: var(--tier-silver-surface-a);    --tier-surface-b: var(--tier-silver-surface-b);    --tier-hairline: var(--tier-silver-hairline);    --tier-coin: var(--tier-silver-coin); }
[data-tier="gold"]      { --tier-accent: var(--tier-gold-accent);      --tier-accent-deep: var(--tier-gold-accent-deep);      --tier-accent-soft: var(--tier-gold-accent-soft);      --tier-surface-a: var(--tier-gold-surface-a);      --tier-surface-b: var(--tier-gold-surface-b);      --tier-hairline: var(--tier-gold-hairline);      --tier-coin: var(--tier-gold-coin); }
[data-tier="platinum"]  { --tier-accent: var(--tier-platinum-accent);  --tier-accent-deep: var(--tier-platinum-accent-deep);  --tier-accent-soft: var(--tier-platinum-accent-soft);  --tier-surface-a: var(--tier-platinum-surface-a);  --tier-surface-b: var(--tier-platinum-surface-b);  --tier-hairline: var(--tier-platinum-hairline);  --tier-coin: var(--tier-platinum-coin); }
[data-tier="platinum1"] { --tier-accent: var(--tier-platinum1-accent); --tier-accent-deep: var(--tier-platinum1-accent-deep); --tier-accent-soft: var(--tier-platinum1-accent-soft); --tier-surface-a: var(--tier-platinum1-surface-a); --tier-surface-b: var(--tier-platinum1-surface-b); --tier-hairline: var(--tier-platinum1-hairline); --tier-coin: var(--tier-platinum1-coin); }

/* ── Base ── */
html, body {
  font-family: var(--font-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  margin: 0;
  line-height: 1.5;
}

* { box-sizing: border-box; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; margin: 0; }
h1 { font-size: var(--type-h1-size); line-height: var(--type-h1-lead); letter-spacing: var(--type-h1-track); }
h2 { font-size: var(--type-h2-size); line-height: var(--type-h2-lead); letter-spacing: var(--type-h2-track); }
h3 { font-size: var(--type-h3-size); line-height: 1.2; }

.material-symbols-outlined,
.material-symbols-rounded {
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  display: inline-block;
  vertical-align: middle;
  font-feature-settings: 'liga' 1 !important;
  -webkit-font-feature-settings: 'liga' 1 !important;
  -webkit-font-smoothing: antialiased;
}
.material-symbols-outlined { font-family: 'Material Symbols Outlined'; }
.material-symbols-rounded  { font-family: 'Material Symbols Rounded'; }

/* ── Brand mark utility — drop-in <span class="ffp-coin"> ──
   Reusable form of the rotated-flight glyph in a purple coin.
   Size via font-size; the inner glyph derives from currentColor. */
.ffp-coin {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1em; height: 1em; border-radius: 50%;
  background: var(--grad-brand);
  box-shadow: 0 2px 8px var(--ffp-purple-glow);
  flex-shrink: 0;
  font-size: 34px;
}
.ffp-coin > .material-symbols-rounded,
.ffp-coin > .material-symbols-outlined {
  color: #fff;
  font-size: 0.55em;
  transform: rotate(45deg);
  font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24;
}
.ffp-coin.flat { box-shadow: none; background: var(--ffp-purple); }
.ffp-coin.tier { background: var(--tier-coin, var(--tier-platinum-coin)); box-shadow: none; }

/* ── Pill CTA — primary action, brand purple ── */
.ffp-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: var(--r-pill);
  background: var(--grad-brand);
  color: #fff; border: 1px solid transparent;
  font-family: var(--font-body); font-weight: 700; font-size: 14px;
  text-decoration: none; cursor: pointer;
  box-shadow: var(--shadow-cta);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.ffp-cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-cta-hi); }
.ffp-cta.ghost {
  background: transparent; color: var(--fg);
  border-color: rgba(0,0,0,0.14); box-shadow: none;
}
.ffp-cta.ghost:hover { background: rgba(0,0,0,0.04); transform: none; }

/* ── Eyebrow — uppercase tracked pill, purple-tinted ── */
.ffp-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--ffp-purple-tint);
  color: var(--ffp-purple-ink);
  font-size: var(--type-eyebrow-size); font-weight: 700;
  letter-spacing: var(--type-eyebrow-track); text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}