/* Masagana Gas — Spacing & layout tokens
   16:9 canvas, 64px side margins, 12-column grid, 24px gutter. */
:root {
  /* Fibonacci spacing rhythm — the canonical layout scale. Successive ratios
     approach φ (1.618), so every gap relates to its neighbours by the golden
     ratio. Use these for padding, gaps, and stacks throughout. */
  --fib-1: 8px;
  --fib-2: 13px;
  --fib-3: 21px;
  --fib-4: 34px;
  --fib-5: 55px;
  --fib-6: 89px;
  --fib-7: 144px;

  /* Base spacing scale (8px rhythm, with fine steps) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
  --space-10: 64px;
  --space-12: 96px;

  /* Layout grid */
  --slide-w: 1280px;
  --slide-h: 720px;
  --margin-side: 64px;      /* left/right slide margins */
  --margin-top: 56px;
  --grid-cols: 12; /* @kind other */
  --grid-gutter: 24px;
  --content-w: 1152px;      /* 1280 − 2×64 — the live 12-col content box */

  /* Golden ratio — the single proportion the whole system is tuned to.
     φ governs the type scale AND every major layout split. */
  --phi: 1.618;             /* @kind other */
  --phi-major: 61.8%;       /* larger field of a two-part golden split */
  --phi-minor: 38.2%;       /* smaller field */
  /* As integer column spans on the 12-col grid, 7:5 is the nearest φ split
     (12 ÷ φ ≈ 7.4). Use span-7 + span-5 for a golden two-column layout. */
  --golden-major-cols: 7; /* @kind other */
  --golden-minor-cols: 5; /* @kind other */

  /* Nested golden divisions — the content box (1152px) divided by φ, then that
     result by φ, and so on. Every panel width, image field, and column should
     land on one of these. The chain resolves back to the 64px side margin. */
  --gold-0: 1152px;   /* full content box */
  --gold-1: 712px;    /* 1152 ÷ φ  — the major field */
  --gold-2: 440px;    /* 712 ÷ φ   — the minor field */
  --gold-3: 272px;    /* 440 ÷ φ */
  --gold-4: 168px;    /* 272 ÷ φ */
  --gold-5: 104px;    /* 168 ÷ φ */
  --gold-6: 64px;     /* 104 ÷ φ  — ties back to the side margin */

  /* Placement — where the focal element goes. The golden-section intersections
     (the "power points") sit at 38.2% / 61.8% on each axis. Anchor the single
     most important element (hero number, CTA, logo) to one of these, or to the
     spiral eye. This is the layout counterpart to the proportion tokens above. */
  --focal-near: 38.2%;      /* the near golden line on either axis */
  --focal-far: 61.8%;       /* the far golden line */
  /* Spiral eye — the natural terminus of the golden spiral, upper-right power
     point. The strongest single spot on the canvas. */
  --eye-x: 61.8%;
  --eye-y: 38.2%;

  /* Fibonacci column ratios for asymmetric multi-column layouts (13:8:5…). */
  --fib-cols-2: 8fr 5fr;        /* @kind other */
  --fib-cols-3: 13fr 8fr 5fr;   /* @kind other */

  /* Lines & radii — the system is flat and squared.
     Bars/dots are the only rounded shapes; cards & rules are crisp. */
  --hairline: 1px;
  --rule-emphasis: 3px;     /* the single red emphasis rule */
  --radius-none: 0px;
  --radius-card: 8px;       /* dashboard bento cards */
  --radius-pill: 999px;     /* percentage bars, status pills */
}