/* ═══════════════════════════════════════════════════════════
   SGT Design System — Core Components (DOM-agnostic)
   ===========================================================
   Works in any HTML context: web pages, emails, Reveal slides,
   PDF templates. Depends only on tokens.css.

   Usage:
     <link rel="stylesheet" href="tokens.css">
     <link rel="stylesheet" href="sgt-ds-core.css">
     <!-- DM Sans via @import in tokens.css? No — load Google Font separately. -->

   All classes are prefixed `sgt-` to avoid collisions.
   No element selectors are styled globally — opt-in via class.
   ═══════════════════════════════════════════════════════════ */


/* ── Google Fonts ───────────────────────────────────────────
   If tokens.css is loaded first, the font family token is set.
   Load DM Sans here so any consumer of sgt-ds-core.css gets it.
   ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,400&display=swap');


/* ═══════════════════════════════════════════════════════════
   Base — opt-in via .sgt-body wrapper
   =══════════════════════════════════════════════════════════ */

.sgt-body {
  font-family: var(--sgt-font);
  font-weight: 400;
  color: var(--sgt-black);
  letter-spacing: var(--tracking-default);
  background: var(--sgt-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.sgt-body.dark {
  color: var(--sgt-white);
  background: var(--sgt-black);
}


/* ═══════════════════════════════════════════════════════════
   Typography Classes (semantic, web-context)
   ═══════════════════════════════════════════════════════════ */

.sgt-h1 {
  font-family: var(--sgt-font);
  font-size: var(--text-5xl);
  line-height: var(--lh-5xl);
  font-weight: 400;
  letter-spacing: var(--tracking-default);
  margin: 0;
}

.sgt-h2 {
  font-family: var(--sgt-font);
  font-size: var(--text-3xl);
  line-height: var(--lh-3xl);
  font-weight: 400;
  letter-spacing: var(--tracking-default);
  margin: 0;
}

.sgt-h3 {
  font-family: var(--sgt-font);
  font-size: var(--text-4xl);
  line-height: var(--lh-4xl);
  font-weight: 400;
  letter-spacing: var(--tracking-default);
  margin: 0;
}

.sgt-h4 {
  font-family: var(--sgt-font);
  font-size: var(--text-3xl);
  line-height: var(--lh-3xl);
  font-weight: 400;
  letter-spacing: var(--tracking-default);
  margin: 0;
}

.sgt-lead {                            /* H5 in Lauras Figma */
  font-size: var(--text-2xl);
  line-height: var(--lh-2xl);
  font-weight: 400;
  letter-spacing: var(--tracking-default);
}

.sgt-subtitle {                        /* H6 in Lauras Figma */
  font-size: var(--text-xl);
  line-height: var(--lh-xl);
  font-weight: 400;
  letter-spacing: var(--tracking-default);
  color: var(--sgt-grey);
}

.sgt-copy {                            /* Body */
  font-size: var(--text-lg);
  line-height: var(--lh-lg);
  font-weight: 400;
  letter-spacing: var(--tracking-default);
}

.sgt-quote {
  font-size: var(--text-4xl);
  line-height: var(--lh-4xl);
  font-style: italic;
  font-weight: 400;
  letter-spacing: var(--tracking-default);
}

.sgt-caption {
  font-size: var(--text-md);
  line-height: var(--lh-md);
  font-weight: 400;
  color: var(--sgt-grey);
}

.sgt-label {
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-loose);
  text-transform: uppercase;
  color: var(--sgt-grey);
}

.sgt-highlight {
  background: linear-gradient(180deg, transparent 60%, var(--sgt-purple-light) 60%);
  padding: 0 0.1em;
}

.sgt-text-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid var(--sgt-black);
  padding-bottom: var(--sp-1);
  transition: border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

.sgt-text-link:hover {
  color: var(--sgt-purple);
  border-bottom-color: var(--sgt-purple);
}


/* ═══════════════════════════════════════════════════════════
   Buttons
   ═══════════════════════════════════════════════════════════ */

.sgt-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  font-family: var(--sgt-font);
  font-size: var(--text-md);
  line-height: var(--lh-md);
  font-weight: 500;
  letter-spacing: var(--tracking-default);
  text-decoration: none;
  border-radius: var(--radius-full);
  border: 1.5px solid transparent;
  background: var(--sgt-black);
  color: var(--sgt-white);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.sgt-btn:hover  { background: var(--sgt-purple); }
.sgt-btn:active { transform: scale(0.98); }
.sgt-btn:focus-visible {
  outline: 3px solid var(--sgt-purple-light);
  outline-offset: 2px;
}

.sgt-btn.outline {
  background: transparent;
  color: var(--sgt-black);
  border-color: var(--sgt-black);
}
.sgt-btn.outline:hover {
  background: var(--sgt-black);
  color: var(--sgt-white);
}

.sgt-btn.purple        { background: var(--sgt-purple);     color: var(--sgt-white); }
.sgt-btn.purple:hover  { background: var(--sgt-black); }
.sgt-btn.strategy      { background: var(--sgt-strategy);   color: var(--sgt-black); }
.sgt-btn.creativity    { background: var(--sgt-creativity); color: var(--sgt-black); }
.sgt-btn.technology    { background: var(--sgt-technology); color: var(--sgt-white); }

.sgt-btn.ghost {
  background: transparent;
  color: var(--sgt-black);
  border-color: transparent;
  padding-inline: var(--sp-3);
}
.sgt-btn.ghost:hover { background: var(--sgt-grey-light); }

.sgt-btn.sm { padding: var(--sp-2) var(--sp-4); font-size: var(--text-sm); }
.sgt-btn.lg { padding: var(--sp-4) var(--sp-6); font-size: var(--text-lg); }


/* ═══════════════════════════════════════════════════════════
   Cards
   ═══════════════════════════════════════════════════════════ */

.sgt-card {
  background: var(--sgt-white);
  border: 1px solid var(--sgt-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  color: var(--sgt-black);
}

.sgt-card.flat {
  border-color: transparent;
  background: var(--sgt-grey-light);
}

.sgt-card.dark {
  background: var(--sgt-black);
  color: var(--sgt-white);
  border-color: rgba(255, 255, 255, 0.1);
}

.sgt-card.elevated {
  border-color: transparent;
  box-shadow: var(--shadow-md);
}

.sgt-card.accent-purple     { border-left: 4px solid var(--sgt-purple); }
.sgt-card.accent-strategy   { border-left: 4px solid var(--sgt-strategy); }
.sgt-card.accent-creativity { border-left: 4px solid var(--sgt-creativity); }
.sgt-card.accent-technology { border-left: 4px solid var(--sgt-technology); }
.sgt-card.accent-green      { border-left: 4px solid var(--sgt-green); }
.sgt-card.accent-red        { border-left: 4px solid var(--sgt-red); }


/* ═══════════════════════════════════════════════════════════
   Tags (square) and Pills (rounded)
   ═══════════════════════════════════════════════════════════ */

.sgt-tag, .sgt-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  font-family: var(--sgt-font);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-default);
  background: var(--sgt-grey-light);
  color: var(--sgt-black);
  border: 1px solid var(--sgt-border);
}
.sgt-tag  { border-radius: var(--radius-sm); }
.sgt-pill { border-radius: var(--radius-full); }

.sgt-tag.purple,     .sgt-pill.purple     { background: var(--sgt-purple);          color: var(--sgt-white); border-color: transparent; }
.sgt-tag.purple-light, .sgt-pill.purple-light { background: var(--sgt-purple-light); color: var(--sgt-black); border-color: transparent; }
.sgt-tag.strategy,   .sgt-pill.strategy   { background: var(--sgt-strategy);        color: var(--sgt-black); border-color: transparent; }
.sgt-tag.creativity, .sgt-pill.creativity { background: var(--sgt-creativity);      color: var(--sgt-black); border-color: transparent; }
.sgt-tag.technology, .sgt-pill.technology { background: var(--sgt-technology);      color: var(--sgt-white); border-color: transparent; }
.sgt-tag.green,      .sgt-pill.green      { background: var(--sgt-green);           color: var(--sgt-white); border-color: transparent; }
.sgt-tag.red,        .sgt-pill.red        { background: var(--sgt-red);             color: var(--sgt-white); border-color: transparent; }
.sgt-tag.dark,       .sgt-pill.dark       { background: var(--sgt-black);           color: var(--sgt-white); border-color: transparent; }


/* ═══════════════════════════════════════════════════════════
   Tables
   ═══════════════════════════════════════════════════════════ */

.sgt-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sgt-font);
  font-size: var(--text-md);
  line-height: var(--lh-md);
}

.sgt-table th,
.sgt-table td {
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--sgt-border);
}

.sgt-table th {
  font-weight: 500;
  letter-spacing: var(--tracking-loose);
  text-transform: uppercase;
  font-size: var(--text-sm);
  color: var(--sgt-grey);
  border-bottom: 1.5px solid var(--sgt-black);
}

.sgt-table tbody tr:hover { background: var(--sgt-grey-light); }
.sgt-table.zebra tbody tr:nth-child(even) { background: var(--sgt-grey-light); }


/* ═══════════════════════════════════════════════════════════
   Dividers
   ═══════════════════════════════════════════════════════════ */

.sgt-divider {
  height: 1px;
  background: var(--sgt-border);
  border: 0;
  margin: var(--sp-6) 0;
}

.sgt-divider.thick  { height: 2px; background: var(--sgt-black); }
.sgt-divider.center { margin-inline: auto; width: 80px; }
.sgt-divider.wide   { width: 100%; }

.sgt-divider-brand {
  height: 2px;
  border: 0;
  background: linear-gradient(90deg, var(--sgt-purple) 0%, var(--sgt-technology) 100%);
  margin: var(--sp-6) 0;
}
.sgt-divider-brand.tri {
  background: linear-gradient(90deg,
    var(--sgt-strategy)   0%,
    var(--sgt-strategy)   33%,
    var(--sgt-creativity) 33%,
    var(--sgt-creativity) 66%,
    var(--sgt-purple)     66%,
    var(--sgt-purple)     100%);
}
.sgt-divider-brand.center { margin-inline: auto; width: 240px; }
.sgt-divider-brand.wide   { width: 100%; }


/* ═══════════════════════════════════════════════════════════
   Pull Quote
   ═══════════════════════════════════════════════════════════ */

.sgt-pullquote {
  position: relative;
  padding: var(--sp-8) var(--sp-10);
  border-left: 4px solid var(--sgt-purple);
}
.sgt-pullquote::before {
  content: "\201C";                    /* curly opening quote */
  position: absolute;
  left: var(--sp-4);
  top: calc(-1 * var(--sp-2));
  font-size: 120px;
  line-height: 1;
  font-weight: 300;
  font-style: italic;
  color: var(--sgt-purple-light);
  pointer-events: none;
  user-select: none;
}
.sgt-pullquote p {
  font-size: var(--text-2xl);
  line-height: var(--lh-2xl);
  font-style: italic;
  font-weight: 300;
  margin: 0;
}
.sgt-pullquote .author {
  display: block;
  margin-top: var(--sp-4);
  font-size: var(--text-md);
  font-style: normal;
  color: var(--sgt-grey);
}


/* ═══════════════════════════════════════════════════════════
   Inputs & Form (minimal — for ds.html demos)
   ═══════════════════════════════════════════════════════════ */

.sgt-input,
.sgt-textarea,
.sgt-select {
  font-family: var(--sgt-font);
  font-size: var(--text-md);
  line-height: var(--lh-md);
  padding: var(--sp-3) var(--sp-4);
  background: var(--sgt-white);
  color: var(--sgt-black);
  border: 1.5px solid var(--sgt-border);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-base) var(--ease-out);
  width: 100%;
  box-sizing: border-box;
}
.sgt-input:focus,
.sgt-textarea:focus,
.sgt-select:focus {
  outline: none;
  border-color: var(--sgt-black);
}


/* ═══════════════════════════════════════════════════════════
   Layout Helpers
   ═══════════════════════════════════════════════════════════ */

.sgt-container {
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: var(--sp-6);
}

.sgt-stack { display: flex; flex-direction: column; gap: var(--sp-6); }
.sgt-stack.sp-2  { gap: var(--sp-2); }
.sgt-stack.sp-4  { gap: var(--sp-4); }
.sgt-stack.sp-8  { gap: var(--sp-8); }
.sgt-stack.sp-12 { gap: var(--sp-12); }

.sgt-row { display: flex; gap: var(--sp-4); align-items: center; flex-wrap: wrap; }
.sgt-row.sp-2 { gap: var(--sp-2); }
.sgt-row.sp-6 { gap: var(--sp-6); }

.sgt-grid { display: grid; gap: var(--sp-6); }
.sgt-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.sgt-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.sgt-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 768px) {
  .sgt-grid.cols-2,
  .sgt-grid.cols-3,
  .sgt-grid.cols-4 { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════
   Department Color Blocks (Figma Slides v4 style)
   ═══════════════════════════════════════════════════════════ */

.sgt-block-strategy   { background: var(--sgt-strategy);   color: var(--sgt-black); }
.sgt-block-creativity { background: var(--sgt-creativity); color: var(--sgt-black); }
.sgt-block-technology { background: var(--sgt-technology); color: var(--sgt-white); }
.sgt-block-purple     { background: var(--sgt-purple);     color: var(--sgt-white); }
.sgt-block-dark       { background: var(--sgt-black);      color: var(--sgt-white); }