/* ──────────────────────────────────────────────────────────────────
   TMS CORE 2.0 — Design Tokens
   Base type + color styles, plus semantic CSS vars.
   Source: figma "TMS Core 2.0", page /Styles + /Page-Header.
   ────────────────────────────────────────────────────────────────── */

/* ── Fonts ──────────────────────────────────────────────────────── */

/* GTF Ekstra — proprietary display face, used at huge sizes on covers
   and section titles. Provided by the user. */
@font-face {
  font-family: "GTF Ekstra";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/GTF-Ekstra-Light.ttf") format("truetype");
}
@font-face {
  font-family: "GTF Ekstra";
  font-weight: 300;
  font-style: italic;
  font-display: swap;
  src: url("./fonts/GTF-Ekstra-Light-Italic.ttf") format("truetype");
}
@font-face {
  font-family: "GTF Ekstra";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/GTF-Ekstra-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "GTF Ekstra";
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url("./fonts/GTF-Ekstra-Regular-Italic.ttf") format("truetype");
}
@font-face {
  font-family: "GTF Ekstra";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/GTF-Ekstra-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "GTF Ekstra";
  font-weight: 500;
  font-style: italic;
  font-display: swap;
  src: url("./fonts/GTF-Ekstra-Medium-Italic.ttf") format("truetype");
}
@font-face {
  font-family: "GTF Ekstra";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/GTF-Ekstra-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "GTF Ekstra";
  font-weight: 600;
  font-style: italic;
  font-display: swap;
  src: url("./fonts/GTF-Ekstra-SemiBold-Italic.ttf") format("truetype");
}
@font-face {
  font-family: "GTF Ekstra";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/GTF-Ekstra-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "GTF Ekstra";
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  src: url("./fonts/GTF-Ekstra-Bold-Italic.ttf") format("truetype");
}

:root {
  /* ── Type families ──────────────────────────────────────────── */

  /* Body / UI face — Helvetica Neue Medium is used at every size.
     If unavailable, fall back through the system Helvetica stack to
     a generic sans. We do NOT substitute Inter or Arial because their
     metrics are visibly different. */
  --font-sans: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif;

  /* Display face — used ONLY on covers, end-cards and oversize
     numerals. Pairs with Helvetica Neue for body. */
  --font-display: "GTF Ekstra", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --font-weight-medium: 500;
  --font-weight-display: 700; /* GTF Ekstra Bold */

  /* ── Base color palette ─────────────────────────────────────── */

  /* Neutrals — only two true base colors. Everything else is built
     from these two by opacity. Black is dominant. */
  --color-black: #000000;
  --color-white: #ffffff;

  /* Gray scale — from /Styles/colors. Gray1 reads as black in the
     source, so the documented usable scale starts at Gray2.
     CCCDD1 (Gray4) is the canonical neutral — used 73× across the
     file as borders, dividers and section bands. */
  --color-gray-1: #000000;     /* implicit; same as black */
  --color-gray-2: #868a91;     /* mid */
  --color-gray-3: #b2b4b9;
  --color-gray-4: #cccdd1;     /* canonical neutral */
  --color-gray-5: #d5d5d5;
  --color-gray-6: #e1e1e1;
  --color-gray-7: #dfe2ea;     /* coolest gray, used on light bg bands */

  /* Theme background bands — the deck cycles through these three
     full-bleed backgrounds. Treat them as the *only* slide
     backgrounds. */
  --bg-default: var(--color-white);
  --bg-gray:    var(--color-gray-4);   /* #CCCDD1 */
  --bg-dark:    var(--color-black);

  /* ── Foreground opacity ladder ──────────────────────────────── */

  /* The whole system uses three foreground tones on top of each
     theme background: full, half, and quarter. Never invent
     intermediate tones. */
  --fg-on-light:        rgba(0, 0, 0, 1);        /* fg/1 */
  --fg-on-light-2:      rgba(0, 0, 0, 0.5);      /* fg/2 */
  --fg-on-light-3:      rgba(0, 0, 0, 0.25);     /* fg/3 */

  --fg-on-dark:         rgba(255, 255, 255, 1);
  --fg-on-dark-2:       rgba(255, 255, 255, 0.5);
  --fg-on-dark-3:       rgba(255, 255, 255, 0.25);

  /* Hairline border used on dividers and the typography table. */
  --border-hairline:    rgba(0, 0, 0, 0.1);
  --border-hairline-on-dark: rgba(255, 255, 255, 0.1);

  /* ── Brand accent ──────────────────────────────────────────── */

  /* tropicOS green — the brand's signal color. Apply sparingly:
     the logo fill, a single CTA, or a key data highlight per slide.
     Never as a full slide background; never paired with another
     bright accent on the same surface. */
  --color-brand: #32ee66;

  /* ── Accent (semantic) colors ───────────────────────────────── */

  /* These read in the source as a *spot* palette — used sparingly
     for callouts, status, and the signature lifestyle gradient.
     Do NOT use them as background fills for whole slides. */
  --accent-red:     #fa5853;   /* warmest, signal */
  --accent-orange:  #f24e1e;
  --accent-coral:   #ff7262;
  --accent-amber:   #f3a562;
  --accent-yellow:  #ffc444;
  --accent-pink:    #f46692;
  --accent-green:   #0acf83;
  --accent-blue:    #60aef8;
  --accent-sky:     #1abcfe;
  --accent-purple:  #a259ff;
  --accent-violet:  #9747ff;   /* figma annotation purple */

  /* ── Signature gradients ────────────────────────────────────── */

  /* gradient/1 — the lifestyle gradient. Three stops, vertical.
     Use as a hero / cover background or large badge. */
  --gradient-1: linear-gradient(180deg, #fa5853 0%, #f46692 50%, #ffc444 100%);

  /* The neutral pill / badge gradients — Style1 is darker grays,
     Style2 is lighter grays. Both vertical. */
  --gradient-neutral-dark:  linear-gradient(180deg, #62656a 0%, #91969c 100%);
  --gradient-neutral-light: linear-gradient(180deg, #b1b3b9 0%, #d8dae2 100%);

  /* The "theme band" gradient — appears as a vertical strip on
     style sheets to demo the three themes at once. */
  --gradient-theme-stack: linear-gradient(
    180deg,
    var(--color-white) 0%, var(--color-white) 33%,
    var(--color-gray-4) 33%, var(--color-gray-4) 66%,
    var(--color-black) 66%, var(--color-black) 100%
  );

  /* ── Type scale — Heading (display) ─────────────────────────── */

  /* Sized for a 1920×1080 slide canvas. All headings use
     Helvetica Neue Medium with tight tracking. */
  --h1-size: 100px;  --h1-line: 112px;
  --h2-size: 60px;   --h2-line: 68px;
  --h3-size: 48px;   --h3-line: 56px;
  --h4-size: 34px;   --h4-line: 42px;
  --h5-size: 28px;   --h5-line: 32px;
  --h6-size: 24px;   --h6-line: 30px;

  --tracking-tight:    -0.03em; /* H1–H3, all huge type */
  --tracking-soft:     -0.01em; /* H4–H5 + 34px paragraphs */
  --tracking-normal:    0;

  /* ── Type scale — Body ──────────────────────────────────────── */
  --text-xl-size: 20px;  --text-xl-line: 26px;
  --text-lg-size: 18px;  --text-lg-line: 22px;
  --text-md-size: 16px;  --text-md-line: 20px;
  --text-sm-size: 14px;  --text-sm-line: 18px;
  --text-xs-size: 12px;  --text-xs-line: 16px;

  /* ── Spacing / radii ────────────────────────────────────────── */

  /* The slide grid is built on multiples of 4. The headline pads
     are 40 (vertical) and 44 (horizontal) inside the safe area. */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;     /* common gap between siblings */
  --space-7:  32px;
  --space-8:  40px;     /* slide vertical safe-area */
  --space-9:  44px;     /* slide horizontal safe-area */
  --space-10: 60px;     /* column gap on multi-col layouts */
  --space-11: 80px;     /* between style groups */
  --space-12: 120px;    /* outer page padding (style sheets) */

  --radius-frame:    5px;   /* outer slide frame */
  --radius-card:     15px;  /* cards, image boxes, inner panels */
  --radius-pill:     99px;  /* badges, status pills */
  --radius-circle:   9999px;

  /* No shadows — this system is built on flat color planes. */
  --shadow-none: none;
}

/* ──────────────────────────────────────────────────────────────────
   Semantic primitives — apply directly via class.
   Use these on slide content; reach for the variables above when
   composing a brand-new component.
   ────────────────────────────────────────────────────────────────── */

.tms-body {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-medium);
  color: var(--fg-on-light);
  background: var(--bg-default);
}

/* Display — covers, end-cards. */
.tms-display {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: 240px;
  line-height: 0.79;          /* 190/240 from figma */
  letter-spacing: var(--tracking-tight);
  text-transform: lowercase;
}

/* Headings — Helvetica Neue Medium. */
.tms-h1 {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-medium);
  font-size: var(--h1-size);
  line-height: var(--h1-line);
  letter-spacing: var(--tracking-tight);
}
.tms-h2 {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-medium);
  font-size: var(--h2-size);
  line-height: var(--h2-line);
  letter-spacing: var(--tracking-tight);
}
.tms-h3 {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-medium);
  font-size: var(--h3-size);
  line-height: var(--h3-line);
  letter-spacing: var(--tracking-tight);
}
.tms-h4 {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-medium);
  font-size: var(--h4-size);
  line-height: var(--h4-line);
  letter-spacing: var(--tracking-soft);
}
.tms-h5 {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-medium);
  font-size: var(--h5-size);
  line-height: var(--h5-line);
}
.tms-h6 {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-medium);
  font-size: var(--h6-size);
  line-height: var(--h6-line);
}

/* Body — five steps. */
.tms-text-xl { font: 500 var(--text-xl-size)/var(--text-xl-line) var(--font-sans); }
.tms-text-lg { font: 500 var(--text-lg-size)/var(--text-lg-line) var(--font-sans); }
.tms-text-md { font: 500 var(--text-md-size)/var(--text-md-line) var(--font-sans); }
.tms-text-sm { font: 500 var(--text-sm-size)/var(--text-sm-line) var(--font-sans); }
.tms-text-xs { font: 500 var(--text-xs-size)/var(--text-xs-line) var(--font-sans); }

/* Caption — small label set ABOVE a heading at 20/26 in 25% fg. */
.tms-caption {
  font: 500 var(--text-xl-size)/var(--text-xl-line) var(--font-sans);
  color: var(--fg-on-light-3);
}

/* Fg opacity tones. */
.tms-fg-1 { color: var(--fg-on-light); }
.tms-fg-2 { color: var(--fg-on-light-2); }
.tms-fg-3 { color: var(--fg-on-light-3); }

/* Theme containers — every slide root should use one of these.
   The dark theme flips ONLY foreground tokens; you can keep using
   .tms-fg-* and they will read correctly. */
.tms-theme-default { background: var(--bg-default); color: var(--fg-on-light); }
.tms-theme-gray    { background: var(--bg-gray);    color: var(--fg-on-light); }
.tms-theme-dark {
  background: var(--bg-dark);
  color: var(--fg-on-dark);
  --fg-on-light:    var(--fg-on-dark);
  --fg-on-light-2:  var(--fg-on-dark-2);
  --fg-on-light-3:  var(--fg-on-dark-3);
  --border-hairline: var(--border-hairline-on-dark);
}

/* Slide canvas — 1920×1080 with the 40/44 safe area. */
.tms-slide {
  position: relative;
  width: 1920px;
  height: 1080px;
  padding: 40px 44px;
  overflow: hidden;
  font-family: var(--font-sans);
  font-weight: var(--font-weight-medium);
}