/* Adraba design tokens.
   ----------------------------------------------------------------
   Palette, type, spacing, radii, elevation and motion, plus the shared
   component and page-chrome layers this workspace renders from.

   Maintainers: see the "The design" section of apps/marketing/README.md for
   where these values come from, how the copy is guarded, and the three ways
   pages here get hold of them.
   ---------------------------------------------------------------- */

:root {
  /* ── Base: backgrounds ───────────────────────────────── */
  --pp-bg-solid:     #0D0F14;
  --pp-bg-surface1:  #131620;
  --pp-bg-surface2:  #191D28;
  --pp-bg-surface3:  #222633;
  --pp-bg-nav:       #0A0C11;

  /* ── Base: foreground hierarchy ──────────────────────── */
  --pp-fg-primary:   #E6E8EC;
  --pp-fg-secondary: #A9B1C2;
  --pp-fg-tertiary:  #7E8798;
  --pp-fg-quat:      #444C5E;
  --pp-fg-inverse:   #0A0C11;

  /* ── Base: lines ─────────────────────────────────────── */
  --pp-line-hairline: #20242F;
  --pp-line-strong:   #2B3040;

  /* ── Base: status ────────────────────────────────────── */
  --pp-success:     #35CB82;
  --pp-success-dim: rgba(53, 203, 130, 0.16);
  --pp-danger:      #F45066;
  --pp-danger-dim:  rgba(244, 80, 102, 0.16);
  --pp-warning:     #FFB84D;
  --pp-live:        #35CB82;

  /* ── Base: accent palette ────────────────────────────── */
  --pp-lime-base:  #B6F24A; --pp-lime-dim:  rgba(182,242,74,0.18); --pp-lime-muted:  rgba(182,242,74,0.08);
  --pp-amber-base: #FFB84D; --pp-amber-dim: rgba(255,184,77,0.18); --pp-amber-muted: rgba(255,184,77,0.08);
  --pp-cyan-base:  #34C5E0; --pp-cyan-dim:  rgba(52,197,224,0.18); --pp-cyan-muted:  rgba(52,197,224,0.08);
  --pp-magenta-base: #E766A6; --pp-magenta-dim: rgba(231,102,166,0.18); --pp-magenta-muted: rgba(231,102,166,0.08);
  --pp-emerald-base: #35CB82; --pp-emerald-dim: rgba(53,203,130,0.18); --pp-emerald-muted: rgba(53,203,130,0.08);
  --pp-accent-on: #0A0C11;

  --pp-on-art: #FFFFFF;

  /* ── Semantic aliases — use THESE, not the raw palette ─ */
  --surface-app:     var(--pp-bg-solid);
  --surface-card:    var(--pp-bg-surface1);
  --surface-raised:  var(--pp-bg-surface2);
  --surface-well:    var(--pp-bg-surface3);
  --surface-nav:     var(--pp-bg-nav);

  --text-primary:    var(--pp-fg-primary);
  --text-secondary:  var(--pp-fg-secondary);
  --text-tertiary:   var(--pp-fg-tertiary);
  --text-muted:      var(--pp-fg-quat);
  --text-inverse:    var(--pp-fg-inverse);

  --border-hairline: var(--pp-line-hairline);
  --border-strong:   var(--pp-line-strong);

  --status-success:     var(--pp-success);
  --status-success-dim: var(--pp-success-dim);
  --status-danger:      var(--pp-danger);
  --status-danger-dim:  var(--pp-danger-dim);
  --status-warning:     var(--pp-warning);
  --status-live:        var(--pp-live);

  --accent:       var(--pp-lime-base);
  --accent-dim:   var(--pp-lime-dim);
  --accent-muted: var(--pp-lime-muted);
  --accent-on:    var(--pp-accent-on);

  /* ── Type ────────────────────────────────────────────── */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', Menlo, monospace;

  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-black:    800;

  --text-display-size: 32px; --text-display-lh: 40px; --text-display-tracking: -0.01em;  --text-display-weight: 700;
  --text-h1-size:      24px; --text-h1-lh:      32px; --text-h1-tracking:      -0.01em;   --text-h1-weight:      700;
  --text-h2-size:      18px; --text-h2-lh:      24px; --text-h2-tracking:      -0.005em;  --text-h2-weight:      600;
  --text-body-size:    14px; --text-body-lh:    20px; --text-body-tracking:    0;         --text-body-weight:    500;
  --text-caption-size: 12px; --text-caption-lh: 16px; --text-caption-tracking: 0.02em;    --text-caption-weight: 500;
  --text-micro-size:   10px; --text-micro-lh:   12px; --text-micro-tracking:   0.08em;    --text-micro-weight:   600;

  /* Mono numerics, from the platform typography scale. */
  --num-lg-size: 20px; --num-lg-lh: 24px; --num-lg-weight: 600;
  --num-size:    14px; --num-lh:    20px; --num-weight:    500;
  --num-sm-size: 12px; --num-sm-lh: 16px; --num-sm-weight: 500;


  /* Marketing-only display steps. The platform scale stops at 32px because
     it is sized for a phone-first product surface; a document workspace on a
     laptop needs a page title that reads as one. Deliberately additive — the
     platform steps above keep their values. */
  --mk-hero-size: 46px; --mk-hero-lh: 52px;
  --mk-sec-size:  30px; --mk-sec-lh:  38px;

  /* ── Spacing & radii ─────────────────────────────────── */
  --space-1:  2px;  --space-2:  4px;  --space-3:  8px;  --space-4: 12px; --space-5: 16px;
  --space-6: 20px;  --space-7: 24px;  --space-8: 32px; --space-9: 40px;
  --space-10: 56px; --space-11: 72px;

  --radius-sm:  2px;
  --radius-md:  6px;
  --radius-lg:  10px;
  --radius-xl:  14px;
  --radius-xxl: 20px;
  --radius-pill: 999px;

  --control-h:    44px;
  --control-h-sm: 36px;
  --app-max-content: 1200px;

  /* ── Elevation & motion ──────────────────────────────── */
  /* The lift is the hairline, not a drop shadow. No glow in chrome. */
  --shadow-card:  0 1px 0 rgba(0,0,0,0.3), inset 0 0 0 1px var(--border-hairline);
  --shadow-modal: 0 16px 48px rgba(0,0,0,0.5);
  --motion-fast:   160ms;
  --motion-base:   240ms;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ── Light theme ─────────────────────────────────────────
   Carried in full from the platform, which re-points the same base
   swatches under `:root[data-theme="light"]` so every semantic alias
   cascades with no per-component branching. Nothing here sets it — the
   marketing workspace ships dark, matching the player app's default —
   but keeping the block means a later `data-theme="light"` on <html>
   is a one-attribute change rather than a redesign, and it keeps this
   copy a faithful one (theme.test.mjs checks both scopes).
   ---------------------------------------------------------------- */
:root[data-theme="light"] {
  --pp-bg-solid:     #F4F5F7;
  --pp-bg-surface1:  #FFFFFF;
  --pp-bg-surface2:  #FAFBFC;
  --pp-bg-surface3:  #EDEFF3;
  --pp-bg-nav:       #FFFFFF;

  --pp-fg-primary:   #11151C;
  --pp-fg-secondary: #4A5260;
  --pp-fg-tertiary:  #6B7382;
  --pp-fg-quat:      #A2A9B5;
  --pp-fg-inverse:   #FFFFFF;

  --pp-line-hairline: #E3E6EB;
  --pp-line-strong:   #CDD2DA;

  --pp-success:     #1F9D5E;
  --pp-success-dim: rgba(31, 157, 94, 0.12);
  --pp-danger:      #D83A50;
  --pp-danger-dim:  rgba(216, 58, 80, 0.12);
  --pp-warning:     #C77B12;
  --pp-live:        #1F9D5E;

  --pp-lime-base:  #5C8A12; --pp-lime-dim:  rgba(92,138,18,0.14);  --pp-lime-muted:  rgba(92,138,18,0.07);
  --pp-amber-base: #C77B12; --pp-amber-dim: rgba(199,123,18,0.14); --pp-amber-muted: rgba(199,123,18,0.07);
  --pp-cyan-base:  #1389A6; --pp-cyan-dim:  rgba(19,137,166,0.14); --pp-cyan-muted:  rgba(19,137,166,0.07);
  --pp-magenta-base: #C03B85; --pp-magenta-dim: rgba(192,59,133,0.14); --pp-magenta-muted: rgba(192,59,133,0.07);
  --pp-emerald-base: #1F9D5E; --pp-emerald-dim: rgba(31,157,94,0.14); --pp-emerald-muted: rgba(31,157,94,0.07);
  --pp-accent-on: #FFFFFF;

  --shadow-card:  0 1px 2px rgba(17, 21, 28, 0.06), inset 0 0 0 1px var(--border-hairline);
  --shadow-modal: 0 16px 48px rgba(17, 21, 28, 0.18);
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 0ms; --motion-base: 0ms; }
}

/* ================================================================
   Shared component layer
   Only what the marketing pages actually use. Everything here is a
   thin wrapper over the tokens above — no new colours, no new sizes.
   ================================================================ */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--surface-app);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  font-weight: var(--font-weight-medium);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--pp-lime-base); text-decoration: underline; }

/* Every number on screen is mono + tabular. Platform hard rule. */
.pp-num, .num, td.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight-medium);
}

/* The logo, in place of a text wordmark. The asset is a transparent lockup
   trimmed to its artwork, so height alone sizes it and the aspect follows. */
.mk-logo { height: 26px; width: auto; display: block; }
/* Inline copies on the two pages that cannot load a gated asset path. */
.wordmark svg { height: 26px; width: auto; display: block; }

@media (max-width: 760px) {
  :root { --mk-hero-size: 32px; --mk-hero-lh: 38px; --mk-sec-size: 24px; --mk-sec-lh: 30px; }
}

@media print {
  html, body { background: #fff; color: #000; }
}

/* ================================================================
   Marketing chrome
   The page furniture the three internal pages share — masthead, hero,
   section rhythm, the feature/document tables, and the phone rule that
   turns those tables into labelled stacked rows. Lives here rather than
   in each page so a change lands once.
   ================================================================ */
.wrap{max-width:var(--app-max-content);margin:0 auto;padding:0 var(--space-8)}
/* Narrower gutter on a phone. Must sit AFTER the rule above: same specificity, so
   source order decides, and a copy up in the token section silently lost. */
@media (max-width:760px){.wrap{padding:0 var(--space-5)}}

header.top{display:flex;justify-content:space-between;align-items:center;gap:var(--space-7);padding:var(--space-6) 0;border-bottom:1px solid var(--border-hairline)}
header.top .brand{display:flex;align-items:center;gap:var(--space-4)}
header.top img{height:28px;width:auto;display:block}
.who{display:flex;align-items:center;gap:var(--space-5);font-size:var(--text-caption-size);color:var(--text-tertiary);white-space:nowrap}
.who a{color:var(--text-secondary)}
.who a:hover{color:var(--accent);text-decoration:none}
.who b{color:var(--text-primary);font-weight:var(--font-weight-semibold);font-size:var(--text-body-size)}
.who .sep{width:1px;height:16px;background:var(--border-hairline)}
button.out{height:var(--control-h-sm);padding:0 var(--space-4);border-radius:var(--radius-lg);border:1px solid var(--border-strong);background:transparent;color:var(--text-secondary);font-family:inherit;font-size:var(--text-caption-size);font-weight:var(--font-weight-semibold);cursor:pointer;transition:background var(--motion-fast) var(--ease-standard),color var(--motion-fast) var(--ease-standard)}
button.out:hover{background:var(--surface-well);color:var(--text-primary)}

.kick{display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-micro-size);line-height:var(--text-micro-lh);letter-spacing:var(--text-micro-tracking);font-weight:var(--font-weight-semibold);text-transform:uppercase;color:var(--accent)}
.hero{padding:var(--space-10) 0 var(--space-9)}
h1{margin:var(--space-5) 0 0;font-size:var(--mk-hero-size);line-height:var(--mk-hero-lh);letter-spacing:var(--text-display-tracking);font-weight:var(--font-weight-black);text-wrap:pretty}
.hero p{margin:var(--space-5) 0 0;max-width:68ch;font-size:17px;line-height:1.5;color:var(--text-secondary);text-wrap:pretty}
.hi-b{color:var(--text-tertiary)}

section.blk{padding:var(--space-9) 0;border-top:1px solid var(--border-hairline)}
h2.sec{margin:var(--space-4) 0 0;font-size:var(--mk-sec-size);line-height:var(--mk-sec-lh);letter-spacing:var(--text-display-tracking);font-weight:var(--font-weight-bold);text-wrap:pretty}
.note{margin:var(--space-4) 0 0;font-size:var(--text-body-size);line-height:1.5;color:var(--text-tertiary);max-width:68ch}
.note code{font-family:var(--font-mono);font-size:var(--text-caption-size);background:var(--surface-well);border-radius:var(--radius-sm);padding:1px 5px;color:var(--text-secondary)}

/* Tables. The card surface is the table itself: rows separated by hairlines,
   no zebra, the way the admin console reads. */
table.fb{width:100%;border-collapse:collapse;margin-top:var(--space-7)}
table.fb th{text-align:left;padding:0 var(--space-4) var(--space-4) 0;border-bottom:1px solid var(--border-strong);font-size:var(--text-micro-size);line-height:var(--text-micro-lh);letter-spacing:var(--text-micro-tracking);font-weight:var(--font-weight-semibold);text-transform:uppercase;color:var(--text-tertiary);white-space:nowrap}
table.fb td{padding:var(--space-5) var(--space-4) var(--space-5) 0;border-bottom:1px solid var(--border-hairline);vertical-align:top;font-size:var(--text-body-size);line-height:var(--text-body-lh);color:var(--text-secondary)}
table.fb tr:hover td{background:rgba(255,255,255,.02)}
table.fb td.n{font-size:var(--text-h2-size);line-height:var(--text-h2-lh);font-weight:var(--font-weight-semibold);color:var(--text-primary);letter-spacing:var(--text-h2-tracking)}
table.fb td.n .d{margin-top:var(--space-2);font-size:var(--text-body-size);font-weight:var(--font-weight-medium);line-height:var(--text-body-lh);color:var(--text-tertiary);letter-spacing:0}

.pill{display:inline-block;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);font-size:var(--text-micro-size);line-height:var(--text-micro-lh);letter-spacing:var(--text-micro-tracking);font-weight:var(--font-weight-semibold);text-transform:uppercase;white-space:nowrap;background:var(--surface-well);color:var(--text-secondary)}
.pill.shipped{background:var(--status-success-dim);color:var(--status-success)}
.pill.building{background:var(--pp-amber-muted);color:var(--status-warning)}
.pill.blocked{background:var(--status-danger-dim);color:var(--status-danger)}
.pill.planned{background:transparent;color:var(--text-tertiary);border:1px solid var(--border-hairline)}
td.links a{font-size:var(--text-caption-size);font-weight:var(--font-weight-medium);display:block}