/* =============================================================
   TruPhysics — Colors & Type
   Design tokens + base element styles
   ============================================================= */

/* ---------- Webfonts ---------- */
/* Open Sans — Apache 2.0 — used for web body & UI */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');
/* Carlito — SIL OFL — metric-compatible substitute for Calibri Light, used for presentations */
@import url('https://fonts.googleapis.com/css2?family=Carlito:wght@400;700&display=swap');

:root {

  /* =========================================================
     COLOR SYSTEM
     One bold accent (teal), neutrals for everything else.
     ========================================================= */

  /* Brand */
  --tp-teal:           #40A39C;   /* primary accent — logo, CTAs, full-bleed bands */
  --tp-teal-600:       #368D87;   /* hover */
  --tp-teal-700:       #2E7C77;   /* press / deep accents */
  --tp-teal-100:       #DDEEEC;   /* tint surface */
  --tp-teal-050:       #F0F8F7;   /* lightest tint */

  /* Neutrals */
  --tp-ink:            #1A1A1A;   /* primary text on light */
  --tp-ink-2:          #2E3636;   /* secondary heading text */
  --tp-fg-muted:       #5C6666;   /* body secondary */
  --tp-fg-subtle:      #9AA3A3;   /* captions, disabled labels */
  --tp-line:           #E8ECEC;   /* hairlines, card borders */
  --tp-line-strong:    #C8D0D0;   /* hairlines on tinted bg */
  --tp-surface:        #FFFFFF;   /* default page bg */
  --tp-surface-2:      #F5F7F7;   /* alt surface */
  --tp-surface-3:      #ECEFEF;   /* deeper alt */

  /* On-teal */
  --tp-on-teal:        #FFFFFF;
  --tp-on-teal-muted:  rgba(255, 255, 255, 0.78);
  --tp-on-teal-line:   rgba(255, 255, 255, 0.25);

  /* Semantic */
  --tp-fg:             var(--tp-ink);
  --tp-fg-2:           var(--tp-fg-muted);
  --tp-bg:             var(--tp-surface);
  --tp-bg-accent:      var(--tp-teal);
  --tp-border:         var(--tp-line);
  --tp-link:           var(--tp-teal);
  --tp-link-hover:     var(--tp-teal-700);
  --tp-focus-ring:     0 0 0 2px rgba(64, 163, 156, 0.55);

  /* Status (used sparingly — brand has no real semantic color set) */
  --tp-success:        #40A39C;          /* same as primary */
  --tp-warn:           #C2872E;
  --tp-danger:         #C24B3A;

  /* =========================================================
     TYPE SYSTEM
     ========================================================= */

  /* Families */
  --tp-font-sans:      "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --tp-font-presentation: "Carlito", "Calibri", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --tp-font-mono:      ui-monospace, "SF Mono", "Roboto Mono", "Courier New", monospace;

  /* Sizes — web ramp */
  --tp-text-xs:        12px;
  --tp-text-sm:        14px;
  --tp-text-base:      16px;
  --tp-text-md:        18px;
  --tp-text-lg:        20px;
  --tp-text-xl:        24px;
  --tp-text-2xl:       30px;
  --tp-text-3xl:       38px;
  --tp-text-4xl:       48px;
  --tp-text-5xl:       64px;

  /* Line heights */
  --tp-lh-tight:       1.15;
  --tp-lh-snug:        1.3;
  --tp-lh-normal:      1.55;
  --tp-lh-loose:       1.7;

  /* Weights */
  --tp-fw-regular:     400;
  --tp-fw-medium:      500;
  --tp-fw-semibold:    600;
  --tp-fw-bold:        700;

  /* Letter spacing */
  --tp-tracking-tight: -0.01em;
  --tp-tracking-normal: 0;
  --tp-tracking-wide:  0.04em;
  --tp-tracking-eyebrow: 0.12em;

  /* =========================================================
     SPACING — 4 px base
     ========================================================= */
  --tp-space-1:    4px;
  --tp-space-2:    8px;
  --tp-space-3:    12px;
  --tp-space-4:    16px;
  --tp-space-5:    24px;
  --tp-space-6:    32px;
  --tp-space-7:    48px;
  --tp-space-8:    64px;
  --tp-space-9:    96px;
  --tp-space-10:  128px;

  /* =========================================================
     RADII
     ========================================================= */
  --tp-radius-none:  0;
  --tp-radius-sm:    4px;
  --tp-radius:       6px;       /* buttons, inputs */
  --tp-radius-md:    8px;
  --tp-radius-lg:   12px;       /* cards */
  --tp-radius-xl:   16px;
  --tp-radius-pill: 999px;

  /* =========================================================
     SHADOWS — extremely restrained
     ========================================================= */
  --tp-shadow-none:  none;
  --tp-shadow-sm:    0 1px 2px rgba(20, 38, 36, 0.04);
  --tp-shadow:       0 4px 24px rgba(20, 38, 36, 0.08);    /* default elevation */
  --tp-shadow-lg:    0 12px 40px rgba(20, 38, 36, 0.12);   /* modals */

  /* =========================================================
     MOTION
     ========================================================= */
  --tp-ease:        cubic-bezier(0.32, 0.72, 0.32, 1); /* ease-out */
  --tp-dur-fast:    120ms;
  --tp-dur:         220ms;
  --tp-dur-slow:    420ms;
}

/* =============================================================
   BASE ELEMENTS (semantic)
   Apply by importing this file and tagging body with .tp
   ============================================================= */

.tp,
.tp * { box-sizing: border-box; }

.tp {
  font-family: var(--tp-font-sans);
  font-size: var(--tp-text-base);
  line-height: var(--tp-lh-normal);
  color: var(--tp-fg);
  background: var(--tp-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.tp.tp-presentation { font-family: var(--tp-font-presentation); }

/* Headings */
.tp h1, .tp .tp-h1 {
  font-family: var(--tp-font-sans);
  font-weight: var(--tp-fw-semibold);
  font-size: var(--tp-text-5xl);
  line-height: var(--tp-lh-tight);
  letter-spacing: var(--tp-tracking-tight);
  color: var(--tp-ink);
  margin: 0 0 var(--tp-space-5);
}
.tp h2, .tp .tp-h2 {
  font-weight: var(--tp-fw-semibold);
  font-size: var(--tp-text-4xl);
  line-height: var(--tp-lh-tight);
  letter-spacing: var(--tp-tracking-tight);
  color: var(--tp-ink);
  margin: 0 0 var(--tp-space-5);
}
.tp h3, .tp .tp-h3 {
  font-weight: var(--tp-fw-semibold);
  font-size: var(--tp-text-3xl);
  line-height: var(--tp-lh-snug);
  color: var(--tp-ink);
  margin: 0 0 var(--tp-space-4);
}
.tp h4, .tp .tp-h4 {
  font-weight: var(--tp-fw-semibold);
  font-size: var(--tp-text-2xl);
  line-height: var(--tp-lh-snug);
  color: var(--tp-ink);
  margin: 0 0 var(--tp-space-4);
}
.tp h5, .tp .tp-h5 {
  font-weight: var(--tp-fw-semibold);
  font-size: var(--tp-text-xl);
  line-height: var(--tp-lh-snug);
  color: var(--tp-ink);
  margin: 0 0 var(--tp-space-3);
}
.tp h6, .tp .tp-h6 {
  font-weight: var(--tp-fw-semibold);
  font-size: var(--tp-text-lg);
  line-height: var(--tp-lh-snug);
  color: var(--tp-ink);
  margin: 0 0 var(--tp-space-3);
}

.tp-eyebrow {
  font-size: var(--tp-text-xs);
  font-weight: var(--tp-fw-semibold);
  letter-spacing: var(--tp-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--tp-teal);
}

/* Body text */
.tp p, .tp .tp-p {
  font-size: var(--tp-text-base);
  line-height: var(--tp-lh-normal);
  color: var(--tp-fg);
  margin: 0 0 var(--tp-space-4);
  text-wrap: pretty;
}
.tp .tp-lead {
  font-size: var(--tp-text-lg);
  line-height: var(--tp-lh-snug);
  color: var(--tp-fg-muted);
}
.tp small, .tp .tp-caption {
  font-size: var(--tp-text-sm);
  color: var(--tp-fg-muted);
}

/* Links */
.tp a {
  color: var(--tp-link);
  text-decoration: none;
  transition: color var(--tp-dur) var(--tp-ease);
}
.tp a:hover { color: var(--tp-link-hover); text-decoration: underline; }
.tp a.tp-btn,
.tp a.tp-btn:hover { text-decoration: none; }

/* Code */
.tp code, .tp pre, .tp kbd {
  font-family: var(--tp-font-mono);
  font-size: 0.92em;
}
.tp code {
  background: var(--tp-surface-2);
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-radius-sm);
  padding: 1px 6px;
}

/* Strong / em */
.tp strong, .tp b { font-weight: var(--tp-fw-semibold); color: var(--tp-ink); }

/* Selection */
.tp ::selection { background: var(--tp-teal); color: #fff; }

/* On-teal context (full-bleed teal sections) */
.tp-on-teal {
  background: var(--tp-teal);
  color: var(--tp-on-teal);
}
.tp-on-teal h1, .tp-on-teal h2, .tp-on-teal h3,
.tp-on-teal h4, .tp-on-teal h5, .tp-on-teal h6,
.tp-on-teal p, .tp-on-teal a { color: var(--tp-on-teal); }
.tp-on-teal a { text-decoration: underline; }