/* ============================================================
   ROTONDA — Colors & Type
   Brand foundations. Import this once at the top of any artifact.
   ============================================================ */

/* ---------- Fonts ----------
   Primary:   Neue Montreal (Pangram Pangram) — Regular only on disk.
              Medium/Bold roll up to Regular until those weights are uploaded.
   Secondary: GT America Standard (Grilli Type) — Light, Regular, Bold +
              matching italics. Proportional grotesque used for body,
              captions, eyebrows. (Mono cuts also bundled in fonts/ for
              spec/code use, registered separately below.)
   ---------------------------------------------------------- */

@font-face {
  font-family: "Neue Montreal";
  src: url("fonts/NeueMontreal-Regular.otf") format("opentype");
  font-weight: 400 700;   /* covers Regular through Bold from one file for now */
  font-style: normal;
  font-display: swap;
}

/* ----- GT America Standard (proportional) ----- */
@font-face {
  font-family: "GT America";
  src: url("fonts/GT-America-Standard-Light.otf") format("opentype"),
       url("fonts/GT-America-Standard-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GT America";
  src: url("fonts/GT-America-Standard-Light-Italic.otf") format("opentype"),
       url("fonts/GT-America-Standard-Light-Italic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "GT America";
  src: url("fonts/GT-America-Standard-Regular.otf") format("opentype"),
       url("fonts/GT-America-Standard-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GT America";
  src: url("fonts/GT-America-Standard-Regular-Italic.otf") format("opentype"),
       url("fonts/GT-America-Standard-Regular-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "GT America";
  src: url("fonts/GT-America-Standard-Bold.otf") format("opentype"),
       url("fonts/GT-America-Standard-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GT America";
  src: url("fonts/GT-America-Standard-Bold-Italic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ----- GT America Mono (for specs / numeric tables) ----- */
@font-face {
  font-family: "GT America Mono";
  src: url("fonts/GT-America-Mono-Light.otf") format("opentype"),
       url("fonts/GT-America-Mono-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GT America Mono";
  src: url("fonts/GT-America-Mono-Medium.otf") format("opentype"),
       url("fonts/GT-America-Mono-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Color tokens (from brand_board.txt) ---------- */
  --rt-black:            #000000;  /* P Black C       */
  --rt-emerso:           #BF3C33;  /* Emerso, 180 C   */
  --rt-marble:           #D0CAC8;  /* Ancient Marble  */
  --rt-white:            #EEECED;  /* Christmas White */
  --rt-pure-white:       #FFFFFF;

  /* Tonal extensions (derived, use sparingly) */
  --rt-marble-soft:      #E2DEDC;
  --rt-emerso-deep:      #8E2A23;
  --rt-ink-2:            #1A1A1A;
  --rt-ink-3:            #3A3A3A;
  --rt-line:             rgba(0,0,0,0.12);
  --rt-line-on-dark:     rgba(238,236,237,0.16);

  /* ---------- Semantic surface roles ---------- */
  --bg:                  var(--rt-white);
  --bg-dark:             var(--rt-black);
  --bg-neutral:          var(--rt-marble);
  --fg:                  var(--rt-black);
  --fg-on-dark:          var(--rt-white);
  --fg-muted:            var(--rt-ink-3);
  --accent:              var(--rt-emerso);
  --accent-fg:           var(--rt-white);
  --rule:                var(--rt-line);

  /* ---------- Type stacks ---------- */
  --font-display: "Neue Montreal", "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-text:    "GT America", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "GT America Mono", ui-monospace, "JetBrains Mono", monospace;

  /* ---------- Type scale (1920×1080 reference, scales down) ---------- */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    20px;
  --fs-lg:    28px;
  --fs-xl:    40px;
  --fs-2xl:   64px;
  --fs-3xl:   96px;
  --fs-4xl:   144px;
  --fs-5xl:   200px;

  /* Tracking + leading per brand book (Neue Montreal: tracking -10, leading 0) */
  --tracking-display: -0.02em;   /*  ≈ -10 in Figma units  */
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-eyebrow: 0.12em;

  --lh-display: 0.95;
  --lh-tight:   1.05;
  --lh-snug:    1.15;
  --lh-body:    1.4;

  /* ---------- Spacing / grid (Swiss, 4 → 12 col) ---------- */
  --margin-digital: 10px;        /* outer margin per brand book   */
  --margin-print:   42.5px;      /* 1.5cm @ ~72dpi reference      */
  --gutter:         16px;
  --col-min:        4;
  --col-max:        12;

  /* Radii — only used on the monogram-tile lockup */
  --r-tile: 22%;                 /* of width — square w/ rounded corners */
  --r-none: 0;                   /* default: hard corners everywhere     */

  /* Motion — minimal, no bounces */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;
}

/* ---------- Base ---------- */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-text);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Semantic type ---------- */
.rt-display,
h1.rt {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(48px, 8vw, var(--fs-4xl));
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  text-wrap: balance;
}

.rt-h1, h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

.rt-h2, h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

.rt-h3, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

.rt-eyebrow {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.rt-body, p {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-normal);
}

.rt-caption {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--fg-muted);
}

/* ---------- Utility classes ---------- */
.rt-uppercase { text-transform: uppercase; letter-spacing: var(--tracking-display); }
.rt-on-dark   { color: var(--fg-on-dark); }
.rt-accent    { color: var(--accent); }
.rt-bg-black  { background: var(--rt-black); color: var(--rt-white); }
.rt-bg-marble { background: var(--rt-marble); color: var(--rt-black); }
.rt-bg-emerso { background: var(--rt-emerso); color: var(--rt-white); }
.rt-bg-white  { background: var(--rt-white); color: var(--rt-black); }