/* ================================================================
   ELEVATE MASTERMIND — Design Tokens
   Colors, typography, spacing, radii, shadows, semantic styles.
   Import into any page: <link rel="stylesheet" href="colors_and_type.css">
   ================================================================ */

/* ---------- FONTS ---------- */
/* Display: Rajdhani — geometric, technical, sharp (matches ELEVATE wordmark)
   Serif:   Cormorant Garamond — classical serif (matches MASTERMIND wordmark)
   Body:    Inter — clean neutral sans for UI/body copy           */

@font-face { font-family: "Rajdhani"; src: url("fonts/rajdhani-300-normal.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Rajdhani"; src: url("fonts/rajdhani-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Rajdhani"; src: url("fonts/rajdhani-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Rajdhani"; src: url("fonts/rajdhani-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Rajdhani"; src: url("fonts/rajdhani-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-garamond-300-normal.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-garamond-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-garamond-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-garamond-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  /* ---------- BRAND COLORS ---------- */
  --em-cyan:         #03B6F3;  /* primary brand accent (triangle) */
  --em-cyan-bright:  #2EC6FB;  /* hover */
  --em-cyan-deep:    #0091C7;  /* pressed / deep */
  --em-cyan-glow:    #7BDCFC;  /* glow/tint */

  /* ---------- NEUTRALS (DARK CORE) ---------- */
  --em-ink:          #0A0E14;  /* primary dark (logo bg) */
  --em-ink-2:        #121821;  /* elevated surface */
  --em-ink-3:        #1C2430;  /* card on dark */
  --em-ink-4:        #2A3442;  /* border on dark */
  --em-ink-5:        #3E4A5C;  /* muted stroke */

  /* ---------- NEUTRALS (LIGHT) ---------- */
  --em-paper:        #F5F3EE;  /* warm off-white (editorial feel) */
  --em-paper-2:      #EAE6DD;  /* tint */
  --em-bone:         #FFFFFF;  /* pure white */
  --em-smoke:        #C8C2B4;  /* muted warm grey */
  --em-graphite:     #4A5260;

  /* ---------- FOREGROUND TOKENS (on dark) ---------- */
  --fg-1: #FFFFFF;             /* headlines */
  --fg-2: #D8DEE8;             /* body */
  --fg-3: #8B94A3;             /* muted */
  --fg-4: #5B6473;             /* disabled / hint */
  --fg-accent: var(--em-cyan);

  /* ---------- BACKGROUND TOKENS (on dark) ---------- */
  --bg-1: var(--em-ink);       /* page */
  --bg-2: var(--em-ink-2);     /* section */
  --bg-3: var(--em-ink-3);     /* card */
  --border-1: var(--em-ink-4);
  --border-2: var(--em-ink-5);

  /* ---------- LIGHT MODE TOKENS ---------- */
  --fg-1-light: #0A0E14;
  --fg-2-light: #2A3442;
  --fg-3-light: #5B6473;
  --bg-1-light: var(--em-paper);
  --bg-2-light: var(--em-bone);
  --border-1-light: #D9D3C4;

  /* ---------- SEMANTIC ---------- */
  --success: #45D0A6;
  --warning: #F3B03C;
  --danger:  #E85A5A;
  --info:    var(--em-cyan);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: "Rajdhani", "Oxanium", "Eurostile", system-ui, sans-serif;
  --font-serif:   "Cormorant Garamond", "EB Garamond", "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* ---------- TYPE SCALE (px) ---------- */
  --fs-display:  96px;  /* hero */
  --fs-h1:       64px;
  --fs-h2:       48px;
  --fs-h3:       32px;
  --fs-h4:       24px;
  --fs-lg:       20px;
  --fs-body:     17px;
  --fs-sm:       14px;
  --fs-xs:       12px;
  --fs-eyebrow:  13px;  /* all-caps labels */

  /* ---------- TRACKING ---------- */
  --track-display: 0.08em;   /* ELEVATE wordmark is VERY wide */
  --track-eyebrow: 0.28em;
  --track-caps:    0.18em;
  --track-serif:   0.22em;   /* MASTERMIND-style */
  --track-body:    0;

  /* ---------- LINE HEIGHTS ---------- */
  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-body:   1.55;
  --lh-loose:  1.75;

  /* ---------- SPACING (8pt + 4pt half-steps) ---------- */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ---------- RADII ---------- */
  --r-none: 0;       /* Elevate leans sharp; default is 0 */
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   14px;
  --r-pill: 999px;

  /* ---------- BORDERS ---------- */
  --stroke-hair: 1px;
  --stroke-1:    1.5px;
  --stroke-2:    2px;

  /* ---------- SHADOWS ---------- */
  --shadow-sm:  0 1px 2px rgba(0,0,0,.25);
  --shadow-md:  0 6px 18px rgba(0,0,0,.35);
  --shadow-lg:  0 18px 48px rgba(0,0,0,.45);
  --shadow-glow: 0 0 0 1px rgba(3,182,243,.35), 0 10px 40px rgba(3,182,243,.18);
  --shadow-inner: inset 0 0 0 1px rgba(255,255,255,.04);

  /* ---------- MOTION ---------- */
  --ease-out:    cubic-bezier(.2, .7, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast:    150ms;
  --dur-base:    240ms;
  --dur-slow:    420ms;

  /* ---------- LAYOUT ---------- */
  --container: 1200px;
  --gutter:    24px;
}

/* ================================================================
   SEMANTIC ELEMENT STYLES
   ================================================================ */

html { font-family: var(--font-body); color: var(--fg-1); background: var(--bg-1); }
body { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-2); -webkit-font-smoothing: antialiased; }

/* Display headline — used for biggest moments. Evokes ELEVATE wordmark. */
.em-display, h1.display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  color: var(--fg-1);
  margin: 0;
}

h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  color: var(--fg-1);
  margin: 0 0 var(--s-5);
}

h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--fg-1);
  margin: 0 0 var(--s-4);
}

h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-1);
  margin: 0 0 var(--s-3);
}

h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  letter-spacing: 0;
  color: var(--fg-1);
  margin: 0 0 var(--s-2);
}

/* Serif blockquote — evokes MASTERMIND wordmark; use for pull-quotes, names */
.em-serif {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: var(--track-serif);
  text-transform: uppercase;
}
blockquote, .em-quote {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: var(--fs-h3);
  line-height: 1.3;
  color: var(--fg-1);
  margin: var(--s-6) 0;
  padding-left: var(--s-5);
  border-left: 2px solid var(--em-cyan);
}

/* Eyebrow / kicker — cyan all-caps above a headline */
.em-eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--em-cyan);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.em-eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--em-cyan);
}

p  { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-2); margin: 0 0 var(--s-4); text-wrap: pretty; }
small, .em-small { font-size: var(--fs-sm); color: var(--fg-3); }
code, pre { font-family: var(--font-mono); font-size: 0.92em; }
code { background: var(--em-ink-3); padding: 2px 6px; border-radius: var(--r-xs); color: var(--fg-1); }

a { color: var(--em-cyan); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--em-cyan-bright); }

hr { border: 0; height: 1px; background: var(--border-1); margin: var(--s-6) 0; }

/* Selection */
::selection { background: var(--em-cyan); color: var(--em-ink); }

/* ================================================================
   LIGHT MODE HELPER
   Apply .on-light to a container to flip the foreground/bg tokens.
   ================================================================ */
.on-light {
  --fg-1: var(--fg-1-light);
  --fg-2: var(--fg-2-light);
  --fg-3: var(--fg-3-light);
  --bg-1: var(--bg-1-light);
  --bg-2: var(--bg-2-light);
  --border-1: var(--border-1-light);
  color: var(--fg-2);
  background: var(--bg-1);
}