/* ===========================================================================
   LaunchEasy — Aperture v2.0 design tokens
   Source of truth: brand/README.md and the Aperture v2.0 brand style guide.
   Values here are transcribed from the guide; change the guide first.
   =========================================================================== */

:root {
  /* --- Brand colour (Table 2) ------------------------------------------- */
  --le-ink: #16191d;         /* Frames, body text, dark surfaces. Never tinted. */
  --le-red: #c81e28;         /* Ignition Red — the released corner. LaunchEasy only. */
  --le-red-dark: #ff5a5f;    /* Ignition Red substitute on ink backgrounds.    */
  --le-amber: #c1720a;       /* Gantry Amber — Gantry surfaces only.           */
  --le-blue: #2b5f8f;        /* Orbit Blue — Orbit surfaces only.              */
  --le-ground: #f2f2f3;      /* Default page and surface ground.               */

  /* Supporting neutrals */
  --le-neutral-800: #2e3339;
  --le-neutral-600: #5f6873;
  --le-neutral-400: #8a929c;
  --le-neutral-200: #d5d9de;

  /* --- Semantic roles ---------------------------------------------------
     Each brand owns exactly one accent, used once per view on the element
     that moves. Accents never cross brands: re-map --accent per surface. */
  --bg: var(--le-ground);
  --surface: #ffffff;
  --text: var(--le-ink);
  --text-muted: var(--le-neutral-600);
  --divider: var(--le-neutral-200);
  --accent: var(--le-red);

  /* --- Type (section 05) ------------------------------------------------
     Barlow Condensed 600 all caps sets the wordmark and every heading —
     the same condensed vertical as the mark's strokes. Barlow 400 carries
     body copy, UI and data, with tabular figures on all metrics. */
  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-body: "Barlow", system-ui, sans-serif;
  --weight-heading: 600;
  --weight-body: 400;

  --tracking-wordmark: 0.01em;   /* +1%  */
  --tracking-eyebrow: 0.18em;    /* +18% */
  --leading-body: 1.6;

  /* --- Geometry (sections 03 + 06) -------------------------------------
     Tiles are square. The mark's own released corner is the only
     rounding-adjacent gesture the brand makes, and a rounded tile fights
     it. There is no radius scale by design. */
  --radius: 0;
  --stroke: 1.5;                 /* service icons, on a 24u grid */
  --mark-clearspace: 0.171875;   /* 22u / 128u — hold on all four sides */
  --mark-tile-ratio: 0.56;       /* mark occupies 56% of an application tile */

  /* Size floors */
  --mark-min: 20px;              /* below 24px switch to the one-colour mark */
  --lockup-min: 140px;

  /* --- Space ------------------------------------------------------------ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
}

/* --- Sub-brand surfaces --------------------------------------------------
   Scope, don't override globally. A Gantry or Orbit surface swaps the one
   accent and nothing else — the frame and the ink are shared. */
[data-brand="gantry"] { --accent: var(--le-amber); }
[data-brand="orbit"]  { --accent: var(--le-blue); }

/* --- Ink surfaces --------------------------------------------------------
   On ink, Ignition Red is substituted for its dark-background value and the
   mark switches to its dark-bg rendering. */
[data-surface="ink"] {
  --bg: var(--le-ink);
  --surface: var(--le-neutral-800);
  --text: #ffffff;
  --text-muted: var(--le-neutral-400);
  --divider: color-mix(in srgb, #ffffff 16%, transparent);
  --accent: var(--le-red-dark);
}

/* --- Base ---------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  font-variant-numeric: tabular-nums;   /* tabular figures on all metrics */
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: var(--tracking-wordmark);
}

.eyebrow {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-size: 12px;
}

/* The wordmark: LAUNCH in ink, EASY in Ignition Red. */
.wordmark { font-family: var(--font-heading); font-weight: var(--weight-heading);
            text-transform: uppercase; letter-spacing: var(--tracking-wordmark); }
.wordmark em { font-style: normal; color: var(--accent); }

/* Square by default — see --radius. */
.btn, .card, .input, .tile { border-radius: var(--radius); }