/* ReelFold brand tokens. Source of truth: BRAND.md in the project root.
   Share of the brand: ink 45%, cream 35%, ultramarine 15%, soft ultramarine 5%.
   No gradients, glows or neon. Never pure white or pure black. */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/bricolage-grotesque-latin-opsz-normal.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Red Hat Text';
  src: url('../fonts/red-hat-text-latin-wght-normal.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Red Hat Mono';
  src: url('../fonts/red-hat-mono-latin-wght-normal.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colours */
  --rf-ink: #0B0D1A;               /* dark covers, headlines on cream */
  --rf-cream: #F5F0E6;             /* light sections and slides. Use instead of pure white */
  --rf-ultramarine: #2B3FD9;       /* the brand colour: buttons, step labels, highlighted word on cream, closing sections */
  --rf-ultramarine-soft: #8C9BFF;  /* highlighted word on ink ONLY */
  --rf-grey: #6B6A7A;              /* secondary text */
  --rf-line: #E2DCCF;              /* borders and dividers on cream */

  /* Tints of the palette (from the Ultramarine brand book), not new colours */
  --rf-ink-card: #12152A;          /* raised surface on ink */
  --rf-ink-rule: #23263A;          /* borders on ink */
  --rf-ink-muted: #9C9BAC;         /* secondary text on ink */
  --rf-cream-card: #FBF8F2;        /* raised surface on cream */
  --rf-cream-muted: #5F5E6E;       /* secondary text on cream, readable size */
  --rf-ultramarine-deep: #1F2FA8;  /* logo fold facets, pressed states */

  /* Fonts */
  --rf-font-headline: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;  /* ExtraBold 800 */
  --rf-font-body: 'Red Hat Text', 'Helvetica Neue', Arial, sans-serif;             /* Regular 400, Bold 700 for emphasis */
  --rf-font-mono: 'Red Hat Mono', ui-monospace, 'SF Mono', Consolas, monospace;    /* Medium 500, labels and numbers */

  /* Type sizes on the 1080 px social canvas. The website scales these. */
  --rf-canvas-cover: 100px;   /* covers 100 to 120 px */
  --rf-canvas-headline: 80px; /* inside slides */
  --rf-canvas-body: 40px;     /* 38 to 42 px */
  --rf-canvas-label: 27px;    /* 26 to 28 px */
}

.rf-headline {
  font-family: var(--rf-font-headline);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.0;
}

.rf-body {
  font-family: var(--rf-font-body);
  font-weight: 400;
  line-height: 1.45;
}
.rf-body strong, .rf-body b { font-weight: 700; }

.rf-label {
  font-family: var(--rf-font-mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}