/* =========================================================
   Rolo Robotics — Foundations
   Colors & Type tokens. Import this on every Rolo surface.
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=League+Spartan:wght@900&display=swap");

/* Neue Montreal — the brand sans. Local OTF, no CDN. */
@font-face { font-family: "Neue Montreal"; src: url("fonts/NeueMontreal-Light.otf") format("opentype");        font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Neue Montreal"; src: url("fonts/NeueMontreal-LightItalic.otf") format("opentype");  font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Neue Montreal"; src: url("fonts/NeueMontreal-Regular.otf") format("opentype");      font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Neue Montreal"; src: url("fonts/NeueMontreal-Italic.otf") format("opentype");       font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Neue Montreal"; src: url("fonts/NeueMontreal-Medium.otf") format("opentype");       font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Neue Montreal"; src: url("fonts/NeueMontreal-MediumItalic.otf") format("opentype"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Neue Montreal"; src: url("fonts/NeueMontreal-Bold.otf") format("opentype");         font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Neue Montreal"; src: url("fonts/NeueMontreal-BoldItalic.otf") format("opentype");   font-weight: 700; font-style: italic; font-display: swap; }

:root {
  /* ---------- Brand palette (the only four that appear on every surface) ---------- */
  --rr-black:         #000000;   /* brand black — see Brand Colors card                */
  --rr-white:         #FFFFFF;   /* brand white — page canvas, dominant background     */
  --rr-grey:          #F0F0F0;   /* brand grey  — neutral wells, secondary cards       */
  --rr-gold:          #C49A3C;   /* brand gold  — CTAs, highlight words, stat numbers  */

  /* ---------- Working surfaces (derived) ---------- */
  --rr-bg:            var(--rr-white);   /* page background — default */
  --rr-surface:       var(--rr-grey);    /* neutral surface — cards on light */
  --rr-ink:           #111110;            /* near-black for type — softer than pure 000 */
  --rr-muted:         #6B6860;            /* secondary text, captions */
  --rr-line:          #E6E4DE;            /* hairline borders on light */
  --rr-line-dark:     #2A2926;            /* hairline borders on ink   */

  /* ---------- Optional editorial cream (NOT in brand palette) ----------
     Reserved for warmer print/deck contexts only — never on the marketing site. */
  --rr-cream:         #FAF5E9;

  --rr-gold-dark:     #ECC766;            /* hover / pressed gold — brightens noticeably */
  --rr-gold-tint:     #EFD58A;            /* rich warm tint — on grey, on hover wells    */
  --rr-gold-ink:      #9E7A2A;            /* deeper gold — for type on gold backgrounds  */

  /* ---------- Module accents (strips / labels only, never fills) ---------- */
  --rr-microfry:      #FF3131;
  --rr-micropot:      #FFD21F;
  --rr-microgreen:    #56AB2F;
  --rr-microbev:      #38B6FF;

  /* ---------- Semantic ---------- */
  --rr-fg:            var(--rr-ink);
  --rr-fg-muted:      var(--rr-muted);
  --rr-fg-inverse:    #FAF5E9;     /* text on ink */
  --rr-fg-on-gold:    #111110;
  --rr-accent:        var(--rr-gold);
  --rr-accent-hover:  var(--rr-gold-dark);
  --rr-focus-ring:    color-mix(in oklab, var(--rr-gold) 60%, transparent);

  /* ---------- Type families ---------- */
  --rr-font-sans:     "Neue Montreal", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --rr-font-module:   "League Spartan", "Neue Montreal", sans-serif; /* ONLY for module names: MicroFRY, MicroPOT, etc */
  --rr-font-mono:     ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* ---------- Type scale ---------- */
  /* Desktop-first; let consumers scale down with clamp() at section level */
  --rr-text-display:  clamp(56px, 7vw, 104px);
  --rr-text-h1:       clamp(40px, 4.6vw, 72px);
  --rr-text-h2:       clamp(32px, 3.4vw, 52px);
  --rr-text-h3:       28px;
  --rr-text-h4:       22px;
  --rr-text-lead:     20px;
  --rr-text-body:     17px;
  --rr-text-small:    15px;
  --rr-text-caption:  13px;
  --rr-text-eyebrow:  12px;

  /* ---------- Tracking ---------- */
  --rr-track-tight:   -0.02em;
  --rr-track-normal:  0;
  --rr-track-wide:    0.06em;
  --rr-track-eyebrow: 0.18em;

  /* ---------- Weight ---------- */
  --rr-w-light: 300;
  --rr-w-regular: 400;
  --rr-w-medium: 500;
  --rr-w-semi: 600;
  --rr-w-bold: 700;
  --rr-w-extra: 800;
  --rr-w-black: 900;

  /* ---------- Leading ---------- */
  --rr-lh-display: 0.96;
  --rr-lh-tight:   1.05;
  --rr-lh-snug:    1.18;
  --rr-lh-body:    1.55;
  --rr-lh-loose:   1.7;

  /* ---------- Spacing scale (8pt-ish, editorial roomy) ---------- */
  --rr-s-1:  4px;
  --rr-s-2:  8px;
  --rr-s-3:  12px;
  --rr-s-4:  16px;
  --rr-s-5:  24px;
  --rr-s-6:  32px;
  --rr-s-7:  48px;
  --rr-s-8:  64px;
  --rr-s-9:  96px;
  --rr-s-10: 128px;
  --rr-s-11: 192px;

  /* ---------- Radii ---------- */
  --rr-r-xs: 4px;
  --rr-r-sm: 8px;
  --rr-r-md: 12px;
  --rr-r-lg: 20px;
  --rr-r-xl: 28px;
  --rr-r-pill: 999px;

  /* ---------- Hairline / borders ---------- */
  --rr-border:        1px solid var(--rr-line);
  --rr-border-strong: 1px solid #D9D5CB;
  --rr-border-gold:   1px solid var(--rr-gold);
  --rr-border-dark:   1px solid var(--rr-line-dark);

  /* ---------- Subtle elevation (warm gold tint — brand's lightest gold shade) ---------- */
  --rr-shadow-0: none;
  --rr-shadow-1: 0 1px 0 rgba(196,154,60,0.06), 0 1px 2px rgba(196,154,60,0.10);
  --rr-shadow-2: 0 6px 18px -8px rgba(196,154,60,0.32), 0 2px 4px -2px rgba(17,17,16,0.05);
  --rr-shadow-3: 0 22px 44px -20px rgba(196,154,60,0.42), 0 6px 12px -6px rgba(17,17,16,0.07);

  /* ---------- Motion ---------- */
  --rr-ease:        cubic-bezier(.2,.7,.2,1);
  --rr-ease-out:    cubic-bezier(.16,.84,.32,1);
  --rr-dur-fast:    140ms;
  --rr-dur-base:    220ms;
  --rr-dur-slow:    420ms;

  /* ---------- Layout ---------- */
  --rr-max:           1240px;  /* editorial column max */
  --rr-max-narrow:    760px;
  --rr-gutter:        clamp(20px, 4vw, 56px);

  color-scheme: light;
}

/* ---------- Dark contexts (Modules, Rolo OS sections, footer) ---------- */
.rr-dark, .rr-on-ink {
  --rr-bg:        var(--rr-ink);
  --rr-surface:   #1A1A18;
  --rr-fg:        #FAF5E9;
  --rr-fg-muted:  #9A958A;
  --rr-line:      var(--rr-line-dark);
  color: var(--rr-fg);
  background: var(--rr-bg);
  color-scheme: dark;
}

/* =========================================================
   Base element styles — drop into any page
   ========================================================= */

html, body {
  background: var(--rr-bg);
  color: var(--rr-fg);
  font-family: var(--rr-font-sans);
  font-size: var(--rr-text-body);
  line-height: var(--rr-lh-body);
  font-weight: var(--rr-w-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "ss02", "cv11";
}

/* ---------- Headings ---------- */
.rr-display, .rr-h1, .rr-h2, .rr-h3, .rr-h4 {
  font-family: var(--rr-font-sans);
  color: var(--rr-fg);
  letter-spacing: var(--rr-track-tight);
  text-wrap: balance;
  margin: 0;
}
/* Note: Neue Montreal is available at 300/400/500/700 only. Map heavier display weights to 700.
   Use weight 700 wherever this CSS specifies 800 or 900 in the body. */
.rr-display { font-size: var(--rr-text-display); font-weight: 700; line-height: var(--rr-lh-display); letter-spacing: -0.035em; }
.rr-h1      { font-size: var(--rr-text-h1);      font-weight: var(--rr-w-bold);  line-height: var(--rr-lh-tight); }
.rr-h2      { font-size: var(--rr-text-h2);      font-weight: var(--rr-w-bold);  line-height: var(--rr-lh-tight); }
.rr-h3      { font-size: var(--rr-text-h3);      font-weight: var(--rr-w-semi);  line-height: var(--rr-lh-snug); }
.rr-h4      { font-size: var(--rr-text-h4);      font-weight: var(--rr-w-semi);  line-height: var(--rr-lh-snug); letter-spacing: -0.01em; }

/* ---------- Module name (special: League Spartan 900 only) ----------
   Use .rr-module on the wrapper, then split the wordmark:
   <span class="rr-module"><span>Micro</span><span style="color: var(--rr-microfry)">FRY</span></span>
   On an accent-color FILL, omit the inline color — the whole word is white (or ink on yellow). */
.rr-module {
  font-family: var(--rr-font-module);
  font-weight: 900;
  letter-spacing: 0.005em;
  text-transform: none;
}

/* ---------- Body & utility text ---------- */
.rr-lead    { font-size: var(--rr-text-lead);  line-height: 1.45; color: var(--rr-fg); text-wrap: pretty; }
.rr-body    { font-size: var(--rr-text-body);  line-height: var(--rr-lh-body); }
.rr-small   { font-size: var(--rr-text-small); line-height: 1.5; color: var(--rr-fg-muted); }
.rr-caption { font-size: var(--rr-text-caption); line-height: 1.45; color: var(--rr-fg-muted); }

/* ---------- Eyebrow / section label ---------- */
.rr-eyebrow {
  font-size: var(--rr-text-eyebrow);
  font-weight: var(--rr-w-semi);
  letter-spacing: var(--rr-track-eyebrow);
  text-transform: uppercase;
  color: var(--rr-gold);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.rr-eyebrow::before {
  content: "";
  width: 22px; height: 1px; background: currentColor; opacity: .7;
}

/* ---------- Stat / display number ----------
   The brochure uses two stat treatments:
   • Inside a stat column, the number is BLACK (or white on ink) — gold lives on the left rule + label.
   • Inside spec-sheet rows, the number is gold for emphasis (200 meals / hour, 4 live modules).
   Default below is the column treatment; add .rr-stat--gold for the spec-row treatment. */
.rr-stat {
  font-family: var(--rr-font-sans);
  font-weight: var(--rr-w-bold);
  font-size: clamp(48px, 6vw, 88px);
  color: var(--rr-ink);
  letter-spacing: -0.035em;
  line-height: 1;
}
.rr-stat--gold { color: var(--rr-gold); }

/* ---------- Links ---------- */
.rr-link {
  color: var(--rr-fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--rr-gold);
  transition: color var(--rr-dur-fast) var(--rr-ease);
}
.rr-link:hover { color: var(--rr-gold-dark); }

/* ---------- Code ---------- */
.rr-code {
  font-family: var(--rr-font-mono);
  font-size: 0.92em;
  background: var(--rr-surface);
  padding: 2px 6px;
  border-radius: var(--rr-r-xs);
  border: var(--rr-border);
}

/* ---------- Manifesto line ---------- *
   The Rolo signature: short sentences stacked, period after each, last line in gold.
   <p class="rr-manifesto">Robotics. Software. Food preparation. <em>Working as one.</em></p> */
.rr-manifesto {
  font-family: var(--rr-font-sans);
  font-weight: var(--rr-w-bold);
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--rr-ink);
  margin: 0;
  text-transform: uppercase;
  font-style: normal;
}
.rr-manifesto em { color: var(--rr-gold); font-style: normal; }
.rr-on-ink .rr-manifesto { color: var(--rr-fg-inverse); }

/* ---------- Highlight word (gold word inside a black headline) ---------- */
.rr-hi { color: var(--rr-gold); }


/* ---------- Focus ---------- */
:where(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--rr-focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection { background: var(--rr-gold-tint); color: var(--rr-ink); }