/* ============================================================
   Raidiam — Colors & Type
   Foundations for all Raidiam decks, prototypes, and UI mocks.
   ============================================================ */

:root {
  /* -------- Brand palette (canonical) -------- */
  --rd-teal-900:   #0C3F3A;   /* Primary Dark — signature colour */
  --rd-teal-700:   #1A5C54;   /* Mid Teal — secondary emphasis on dark */
  --rd-teal-050:   #E0FFF5;   /* Soft Teal Tint — callout / highlight bg */
  --rd-mint:       #3EFDB5;   /* Accent Mint — decorative only */
  --rd-ink:        #2D3436;   /* Near-Black — body text on light */
  --rd-paper:      #F5F7F7;   /* Off-White — content slide bg */
  --rd-gray:       #B2BEC3;   /* Muted Gray — secondary text */
  --rd-white:      #FFFFFF;   /* White */

  /* Pure-black warning sentinel — never use on Raidiam surfaces.
     Body always uses --rd-ink (#2D3436). */
  --rd-pure-black: #000000;

  /* Working derivative tones (used inside the deck system) */
  --rd-body-soft:  #5B6669;   /* Slightly lifted ink for card body */
  --rd-border:     #E6EAEA;   /* Default border on light surfaces */
  --rd-danger:     #9A2A2A;   /* Reserved for Don't/error labels */
  --rd-danger-bg:  #FBECEC;

  /* -------- Semantic colour tokens -------- */
  --fg-1:          var(--rd-ink);            /* Primary text on light */
  --fg-2:          var(--rd-body-soft);      /* Secondary text on light */
  --fg-3:          var(--rd-gray);           /* Tertiary / caption */
  --fg-on-dark:    var(--rd-white);          /* Primary text on dark */
  --fg-on-dark-2:  rgba(255,255,255,0.70);   /* Secondary on dark */
  --fg-on-dark-3:  rgba(255,255,255,0.55);   /* Footer / meta on dark */
  --fg-accent:     var(--rd-teal-900);       /* Brand text on light */
  --fg-accent-on-dark: var(--rd-mint);       /* Brand text on dark */

  --bg-page:       var(--rd-paper);          /* Default page bg */
  --bg-page-dark:  var(--rd-teal-900);       /* Dark bookend bg */
  --bg-card:       var(--rd-white);          /* Card bg on light */
  --bg-card-dark:  var(--rd-teal-900);       /* Dark card on light */
  --bg-callout:    var(--rd-teal-050);       /* Soft callout bg */

  --border-1:      var(--rd-border);
  --border-on-dark: rgba(255,255,255,0.18);

  /* -------- Typography -------- */
  --font-sans:     "Aptos", "Aptos Display", "Inter",
                   -apple-system, BlinkMacSystemFont,
                   "Segoe UI", system-ui, sans-serif;
  --font-mono:     "JetBrains Mono", "SF Mono", ui-monospace,
                   Menlo, Consolas, monospace;

  /* Slide type scale — designed for 1920×1080 stages */
  --type-display:   140px;
  --type-title:     64px;
  --type-subtitle:  44px;
  --type-section:   36px;
  --type-body:      28px;
  --type-small:     22px;
  --type-label:     24px;
  --type-mono:      24px;

  /* Document / UI type scale — for web pages, kits, prototypes */
  --doc-h1:         48px;
  --doc-h2:         32px;
  --doc-h3:         24px;
  --doc-h4:         18px;
  --doc-body:       16px;
  --doc-small:      14px;
  --doc-caption:    12px;

  /* Letter-spacing presets */
  --tracking-tight: -0.025em;   /* Display headings */
  --tracking-snug:  -0.015em;   /* Section heads */
  --tracking-normal: 0em;
  --tracking-label: 0.08em;     /* Context labels (uppercase) */
  --tracking-eyebrow: 0.16em;   /* Eyebrows on title slides */

  /* Line-heights */
  --lh-display: 1.02;
  --lh-title:   1.05;
  --lh-section: 1.18;
  --lh-body:    1.45;

  /* -------- Spacing scale -------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  36px;
  --space-9:  44px;
  --space-10: 56px;
  --space-11: 72px;
  --space-12: 96px;

  /* Slide chrome padding (1920×1080) */
  --pad-x:       100px;
  --pad-top:     90px;
  --pad-bottom:  90px;
  --gap-title:   48px;
  --gap-item:    28px;

  /* -------- Radii -------- */
  --radius-xs:  2px;
  --radius-sm:  4px;     /* Default for cards, swatches, chart cards */
  --radius-md:  8px;
  --radius-lg:  14px;    /* Icon squares, larger illustration tiles */
  --radius-pill: 999px;  /* Pills, number circles, avatars */

  /* -------- Borders -------- */
  --border-thin:    1px solid var(--border-1);
  --border-divider: 1px solid var(--border-1);
  --accent-bar:     6px solid var(--rd-mint); /* Card top bar */

  /* -------- Elevation
     Raidiam is a low-shadow brand. Lift is signalled by colour change
     (dark teal card on light slide) rather than blur. Reserve these for
     interactive UI surfaces only. */
  --shadow-0:  none;
  --shadow-1:  0 1px 2px rgba(12, 63, 58, 0.06);
  --shadow-2:  0 4px 12px rgba(12, 63, 58, 0.08);
  --shadow-3:  0 12px 32px rgba(12, 63, 58, 0.10);

  /* -------- Motion -------- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --ease-std:   cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   140ms;
  --dur-base:   240ms;
  --dur-slow:   400ms;
}

/* ============================================================
   Element defaults
   ============================================================ */

html, body {
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings — slide scale by default. UI kits override with .doc-* classes.
   Colour is intentionally inherited so the surrounding container (e.g.
   `section.slide` light vs `section.slide.dark`) controls foreground. */
h1, .h1 {
  font-family: var(--font-sans);
  font-size: var(--type-title);
  font-weight: 800;
  line-height: var(--lh-title);
  letter-spacing: var(--tracking-tight);
  color: inherit;
  margin: 0;
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-sans);
  font-size: var(--type-subtitle);
  font-weight: 500;
  line-height: var(--lh-section);
  color: inherit;
  margin: 0;
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--type-section);
  font-weight: 700;
  line-height: 1.2;
  color: inherit;
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  font-weight: 700;
  line-height: 1.25;
  color: inherit;
  margin: 0;
}

p, .p {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: var(--lh-body);
  color: inherit;
  margin: 0;
}

small, .small, .caption {
  font-family: var(--font-sans);
  font-size: var(--type-small);
  color: inherit;
  line-height: 1.4;
}

code, kbd, samp, pre, .mono {
  font-family: var(--font-mono);
  font-size: var(--type-mono);
}

/* Document/UI type — opt-in for web pages and UI kits */
.doc-h1 { font-size: var(--doc-h1); font-weight: 800; line-height: 1.1; letter-spacing: var(--tracking-tight); color: var(--fg-1); }
.doc-h2 { font-size: var(--doc-h2); font-weight: 700; line-height: 1.2; letter-spacing: var(--tracking-snug); color: var(--fg-1); }
.doc-h3 { font-size: var(--doc-h3); font-weight: 700; line-height: 1.3; color: var(--fg-1); }
.doc-h4 { font-size: var(--doc-h4); font-weight: 700; line-height: 1.35; color: var(--fg-1); }
.doc-body  { font-size: var(--doc-body); line-height: 1.5; color: var(--fg-1); }
.doc-small { font-size: var(--doc-small); line-height: 1.45; color: var(--fg-2); }
.doc-caption { font-size: var(--doc-caption); line-height: 1.4; color: var(--fg-3); }

/* Context label — small bold dark-teal/mint uppercase tag.
   No background bar; just coloured text on the slide. */
.context-label {
  font-size: var(--type-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--rd-teal-900);
}
.on-dark .context-label,
.dark .context-label { color: var(--rd-mint); }

/* Eyebrow — bigger spaced uppercase. Used on title slides. */
.eyebrow {
  font-size: var(--type-label);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--rd-mint);
}