/* ============================================================
   AIM DESIGN SYSTEM v2  —  Layer 1 (the system)  —  GRADIENT-FIRST
   Canonical brand tokens + components. Define once, reuse everywhere.
   Steven's house style: FULL-GRADIENT cover pages + gradient accents throughout.
   Grounded in ABOUT ME/aim-brand.md (v3). AIM = orange; AIM-ECO = green.
   Switch brand: add class="aim-eco" for the green variant.
   ============================================================ */

:root {
  /* —— AIM brand (default) —— */
  --aim-brand:        #FF8220;  /* the active mark — orange. Key figures, markers, ONE moment per page. Never body text. */
  --aim-brand-deep:   #E0701A;  /* darker orange — gradient end / hover */
  --aim-ink:          #000000;  /* ground — body text on white, borders, structure */
  --aim-identity:     #75716B;  /* identity grey — SECOND brand colour (the wordmark). NOT "faded". */
  --aim-paper:        #FFFFFF;
  --aim-muted:        #9A958D;  /* TRUE metadata grey (footers, captions) — use this for recessive text */
  --aim-row-alt:      #EEEEEC;
  --aim-line:         #000000;
  --aim-line-soft:    #75716B;
  --aim-hero-text:    #C9C4BD;  /* body text on the dark gradient hero */

  /* —— GRADIENTS (the house style) —— */
  /* Full-gradient cover: dark base warming into the brand colour, with a brand glow top-right */
  --aim-grad-hero:    radial-gradient(120% 130% at 85% 8%, rgba(255,130,32,.55) 0%, rgba(255,130,32,0) 48%),
                      linear-gradient(135deg, #000000 0%, #181410 50%, #3d2a12 100%); /* mirrors pricing output-branding-standard §3 */
  /* Accent gradient: used on rules, totals, buttons, markers, card bars — orange → deep orange */
  --aim-grad-accent:  linear-gradient(90deg, #FF8220 0%, #E0701A 100%);
  --aim-grad-accent-diag: linear-gradient(135deg, #FF8220 0%, #E0701A 100%);

  /* —— Type —— */
  --aim-font:  'Ubuntu', Inter, 'Helvetica Neue', Arial, system-ui, sans-serif;
  --aim-fs-base: 15px; --aim-fs-h1: 30px; --aim-fs-h2: 20px;
  --aim-fs-marker: 11px; --aim-fs-total: 26px;
  --aim-lh: 1.5; --aim-w-bold: 700; --aim-w-body: 400;

  /* —— Geometry —— */
  --aim-radius: 3px;          /* structural elements (cards, table cells) — keep geometric */
  --aim-radius-round: 999px;  /* buttons + price highlights — full pill / rounded ends (Steven's preference) */
  --aim-gap: 20px; --aim-shadow: 0 1px 0 rgba(0,0,0,.06); --aim-rule: 3px;
}

/* —— AIM-ECO variant (renewables — green). Apply class="aim-eco" —— */
.aim-eco {
  --aim-brand:      #16A34A; --aim-brand-deep: #0A3D1F; --aim-bright: #22C55E;
  --aim-hero-text:  #BFD8C7; --aim-row-alt: #F0F9F4;
  --aim-grad-hero:  radial-gradient(120% 130% at 85% 8%, rgba(34,197,94,.5) 0%, rgba(34,197,94,0) 48%),
                    linear-gradient(135deg, #04190e 0%, #0A3D1F 52%, #14532d 100%);
  --aim-grad-accent:      linear-gradient(90deg, #22C55E 0%, #16A34A 100%);
  --aim-grad-accent-diag: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
}

/* ============================================================ BASE ============================================================ */
.aim, .aim-page, .aim-cover { font-family: var(--aim-font); font-size: var(--aim-fs-base); line-height: var(--aim-lh); color: var(--aim-ink); -webkit-font-smoothing: antialiased; }
.aim *, .aim-page *, .aim-cover * { box-sizing: border-box; }

/* gradient-text helper (markers, accents) */
.aim-grad-text { background: var(--aim-grad-accent); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

/* ============================================================ COVER / HERO — FULL GRADIENT ============================================================ */
.aim-cover {
  background: var(--aim-grad-hero);
  color: var(--aim-hero-text);
  padding: 60px 48px; position: relative; overflow: hidden;
}
.aim-cover .aim-logo { height: 40px; margin-bottom: 28px; position: relative; }
.aim-cover .aim-cover-title { color: #FFFFFF; font-weight: var(--aim-w-bold); font-size: 42px; line-height: 1.08; margin: 0 0 10px; }
.aim-cover .aim-cover-sub { color: var(--aim-hero-text); font-size: 16px; max-width: 62ch; }
.aim-cover .aim-cover-accent { background: var(--aim-grad-accent); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: var(--aim-w-bold); }
/* thin gradient band at the foot of the cover, ties hero to content */
.aim-cover::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--aim-rule); background: var(--aim-grad-accent); }

/* ============================================================ PAGE ============================================================ */
.aim-page { background: var(--aim-paper); padding: 40px 48px; }

/* ============================================================ HEADINGS ============================================================ */
.aim-h1 { font-size: var(--aim-fs-h1); font-weight: var(--aim-w-bold); color: var(--aim-ink); margin: 0 0 6px; }
/* gradient underline rule */
.aim-h1.rule { display: inline-block; padding-bottom: 7px; background-image: var(--aim-grad-accent); background-size: 100% var(--aim-rule); background-position: 0 100%; background-repeat: no-repeat; }
.aim-h2 { font-size: var(--aim-fs-h2); font-weight: var(--aim-w-bold); color: var(--aim-ink); margin: 22px 0 8px; }

/* section marker — gradient brand-colour all-caps label */
.aim-marker { display: block; font-size: var(--aim-fs-marker); font-weight: var(--aim-w-bold); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; background: var(--aim-grad-accent); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

/* accent rules — gradient */
.aim-hr { border: 0; height: var(--aim-rule); background: var(--aim-grad-accent); margin: 24px 0; }
.aim-hr-soft { border: 0; border-top: 1px solid var(--aim-line-soft); margin: 18px 0; }

/* ============================================================ TABLES ============================================================ */
.aim-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.aim-table thead th { background: var(--aim-ink); color: #FFFFFF; font-weight: var(--aim-w-bold); text-align: left; padding: 9px 11px; border: 1px solid var(--aim-ink); }
.aim-table td { padding: 8px 11px; border: 1px solid #CCCCCC; vertical-align: top; }
.aim-table tbody tr:nth-child(even) td { background: var(--aim-row-alt); }
.aim-table tr.subtotal td { font-weight: var(--aim-w-bold); }
.aim-table tr.total td { background: var(--aim-ink); color: #FFFFFF; font-weight: var(--aim-w-bold); }
.aim-table tr.total td.figure { color: var(--aim-brand); font-size: 1.15em; }  /* solid for legibility on black */

/* ============================================================ THE TOTAL — gradient brand moment ============================================================ */
.aim-total { display: inline-block; background: var(--aim-grad-accent-diag); color: var(--aim-ink); font-weight: var(--aim-w-bold); font-size: var(--aim-fs-total); padding: 10px 20px; border-radius: var(--aim-radius-round); letter-spacing: .3px; }

/* ============================================================ CARDS — gradient left bar ============================================================ */
.aim-card { position: relative; border: 1px solid #DDDDDD; border-radius: var(--aim-radius); padding: 14px 16px 14px 18px; box-shadow: var(--aim-shadow); }
.aim-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--aim-grad-accent-diag); border-radius: var(--aim-radius) 0 0 var(--aim-radius); }
.aim-kv { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; }
.aim-kv b { font-weight: 600; }

/* ============================================================ BUTTONS — gradient ============================================================ */
.aim-btn { display: inline-block; background: var(--aim-grad-accent-diag); color: var(--aim-ink); font-weight: var(--aim-w-bold); text-decoration: none; padding: 11px 22px; border-radius: var(--aim-radius-round); border: 0; cursor: pointer; }
.aim-btn:hover { filter: brightness(.94); }
.aim-btn.ghost { background: transparent; color: var(--aim-ink); border: 2px solid var(--aim-ink); }

/* ============================================================ FOOTER ============================================================ */
.aim-footer { border-top: 1px solid var(--aim-line-soft); margin-top: 26px; padding-top: 8px; color: var(--aim-muted); font-size: 11px; display: flex; justify-content: space-between; }

/* ============================================================ PRINT ============================================================ */
@page { size: A4; margin: 14mm; }
@media print { .aim-btn, .no-print { display: none !important; } .aim-cover, .aim-total, .aim-card::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }