/* ============================================================
   Design tokens — colors, type, per-ratio scale
   Palette sampled from the source slides (BTG1-A/C/D).
   ============================================================ */

:root {
  /* Brand greens */
  --ink:           #0c1c14;   /* near-black headline on white */
  --deep-2:        #05291a;   /* darkest panel / gradient end */
  --deep-1:        #0a3c27;   /* deep forest — panel base */
  --green:         #128a4b;   /* primary brand green (logo, fills) */
  --green-bright:  #1fb15f;   /* CTA / accent highlight */
  --green-glow:    #4ccc83;   /* chart highlight / glow */
  --green-soft:    #e7f3ec;   /* light green wash */

  /* Neutrals */
  --paper:         #f5f6f7;   /* light page behind app/sheet */
  --white:         #ffffff;
  --line:          #e3e6ea;   /* hairline borders */
  --line-strong:   #cfd4da;
  --muted:         #6b7682;   /* secondary text */
  --muted-2:       #97a1ab;

  /* Excel conditional-format swatches (classic) */
  --xl-grid:       #d6dbe0;
  --xl-head:       #f2f3f5;
  --xl-bad-bg:     #ffc7ce;  --xl-bad-tx:  #9c0006;
  --xl-good-bg:    #c6efce;  --xl-good-tx: #006100;
  --xl-warn-bg:    #ffeb9c;  --xl-warn-tx: #9c6500;
  --xl-orange-bg:  #fcd9b6;  --xl-orange-tx:#9c4a00;
  --xl-note-bg:    #fff3cd;
  --xl-blue:       #2f6df6;
  --xl-red-tx:     #c0271a;

  /* Status pills (clean app) */
  --st-progress:   #2563eb;  --st-progress-bg:#e7efff;
  --st-done:       #15924f;  --st-done-bg:   #e3f5ea;
  --st-blocked:    #d8442f;  --st-blocked-bg:#fde7e3;
  --st-wait:       #b7791f;  --st-wait-bg:   #fdf2dc;

  --sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --shadow-win: 0 30px 70px -30px rgba(6, 30, 20, .45),
                0 8px 22px -12px rgba(6, 30, 20, .30);
  --radius-win: 18px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: var(--sans);
  background: #11161c;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }

/* ------------------------------------------------------------
   Per-ratio scale. Everything inside the stage references these
   so each format keeps its own rhythm. Values are export pixels.
   Defaults below = 4:5 master (1080×1350).
   ------------------------------------------------------------ */
.stage {
  --pad: 56px;          /* outer padding of the canvas            */
  --gap: 28px;          /* main vertical rhythm                   */
  --h1: 62px;           /* hero headline size (width is 1080 for   */
  --h1-lh: 1.1;         /* every ratio, so this is capped by line  */
  --h2: 48px;           /* length, not by canvas height)          */
  --band-sub: 29px;     /* band paragraph                         */
  --radius-win: 18px;
  --win-shadow: var(--shadow-win);
  --safe-top: 0px;      /* reserved UI zone (9:16 only)           */
  --safe-bottom: 0px;
}

.stage.r-1-1 {          /* 1080×1080 — vertical is tight          */
  --pad: 50px;
  --gap: 20px;
  --h1: 56px;
  --h2: 44px;
  --band-sub: 26px;
}

.stage.r-9-16 {         /* 1080×1920 — lots of room, big & airy   */
  --pad: 64px;
  --gap: 40px;
  --h1: 66px;
  --h2: 54px;
  --band-sub: 33px;
  --safe-top: 240px;
  --safe-bottom: 320px;
}