/* ==========================================================================
   Lumos Design Studio — design tokens
   Geometry (scale, spacing, radii, breakpoints) is the licensed template's,
   measured from the source build and left untouched.
   Colour and type are Lumos brand-bible values and override the template:
   the brand identity takes priority over the template's own decisions.
   ========================================================================== */

:root {
  /* Colour — brand bible palette, weighted 70 / 25 / 5 */
  --c-white:      #ffffff;
  --c-ink:        #0A0A0A;   /* 70% — primary text + dark surfaces */
  --c-charcoal:   #1F1F1F;   /* secondary ink, deep surfaces */
  --c-off:        #F5F5F5;   /* 25% — light page ground. Bible says #FAFAFA;
                                #F5F5F5 set by Sahil 2026-09-09. */
  --c-grey:       #E5E5E5;   /* rules and dividers */
  --c-red:        #FF2D2D;   /* 5% — punctuation only. Never two in one view. */
  --c-muted:      #8A8A8A;
  --c-ink-90:     #1F1F1F;   /* nav / deep surfaces */
  --c-hairline:   #E5E5E5;
  --c-border:     #EDEDED;

  /* Type */
  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-ui:      'Inter', ui-sans-serif, system-ui, sans-serif;
  --tracking:     -0.02em;   /* site-wide letter-spacing. Inter carries negative
                                tracking better than Space Grotesk did, so this
                                opens back up from -0.01em — but not to the
                                template's -0.04em, which is too tight for body
                                copy at 16px. */
  --tracking-display: -0.005em;  /* Anton is condensed by design — bible value */
  --tracking-caps:     0.10em;
  --tracking-label:    0.22em;
  --leading:      1.2;       /* site-wide line-height — unitless so it scales per element.
                                A percentage here would compute once against body's 16px and
                                inherit as a fixed 19.2px, overlapping any larger text. */

  /* Type scale, as it appears on the live site (px) */
  --fs-display:   144px;
  --fs-h1:        99px;
  --fs-h2:        62px;
  --fs-h3:        50px;
  --fs-stat:      85px;      /* big counter numerals */
  --fs-rating:    56px;
  --fs-h4:        38px;
  --fs-xl:        30px;
  --fs-lg:        24px;
  --fs-md:        18px;
  --fs-base:      16px;
  --fs-sm:        14px;
  --fs-xs:        13px;
  --fs-2xs:       11px;

  /* Layout */
  --container:    1520px;
  --bp-tablet:    810px;
  --bp-desktop:   1200px;

  /* Radii */
  --r-sm:  16px;
  --r-md:  18px;
  --r-lg:  25px;
  --r-xl:  50px;
  --r-2xl: 62px;
  --r-full: 100%;

  /* Form fields (Framer input tokens) */
  --input-fs: 18px;
  --input-weight: 500;
  --input-padding: 12px 12px 12px 16px;
  --input-radius: var(--r-sm);
  --input-focus-border: 1px solid var(--c-hairline);
}

/* Breakpoints used by the source site:
     mobile   ≤ 809px
     tablet   810px – 1199px
     desktop  ≥ 1200px                                                       */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  /* The source is a LIGHT page (#f5f5f5) its full height; the dark blocks are
     inset rounded panels, not sections. Get this backwards and every section
     reads inverted. */
  background: var(--c-off);
  color: var(--c-ink);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  line-height: var(--leading);
  letter-spacing: var(--tracking);
  -webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }