/* ============================================================
   Tobié Pharma — Colors & Type
   Import into any artifact:  <link rel="stylesheet" href="colors_and_type.css">
   Fonts are SUBSTITUTIONS (Archivo / Source Sans 3) — see README Caveats.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,600;1,700;1,800;1,900&family=Source+Sans+3:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&display=swap');

:root {
  /* ---- Brand core ---- */
  --tp-orange:        #F15A23;  /* primary brand */
  --tp-orange-600:    #D94A18;  /* hover/darker */
  --tp-orange-700:    #B83C11;  /* press */
  --tp-orange-tint:   #FDEDE6;  /* soft fill / wash */
  --tp-ink:           #242021;  /* brand black */
  --tp-ink-900:       #14100F;  /* deepest text */

  /* ---- Dark header gradient (teal-black) ---- */
  --tp-night-1:       #081D28;
  --tp-night-2:       #0A1012;
  --tp-night-grad:    linear-gradient(100deg, #0A1012 0%, #081D28 60%, #0C2A38 100%); /* @kind color */

  /* ---- Category accents (from content deck) ---- */
  --tp-green:         #176B22;  /* health / natural */
  --tp-blue:          #1C9ED5;  /* clarity / info */
  --tp-magenta:       #9F2891;  /* specialty */
  --tp-accent-orange: #E87131;  /* deck orange marker */

  /* ---- Promo / product spot (use only inside product art) ---- */
  --tp-promo-green:   #649D22;
  --tp-promo-red:     #D61B15;

  /* ---- Neutrals (warm grey ramp) ---- */
  --tp-white:         #FFFFFF;
  --tp-paper:         #FBF9F7;  /* off-white page */
  --tp-grey-50:       #F6F3F0;
  --tp-grey-100:      #ECE7E3;  /* hairline / border */
  --tp-grey-200:      #DCD6D1;
  --tp-grey-400:      #A8A09A;  /* muted text */
  --tp-grey-600:      #6E6661;  /* secondary text */
  --tp-grey-800:      #3A3431;

  /* ---- Semantic foreground ---- */
  --fg1: var(--tp-ink-900);     /* primary text */
  --fg2: var(--tp-grey-600);    /* secondary text */
  --fg3: var(--tp-grey-400);    /* tertiary / hints */
  --fg-brand: var(--tp-orange);
  --fg-on-dark: #F4F1EE;

  /* ---- Semantic background ---- */
  --bg1: var(--tp-white);
  --bg2: var(--tp-paper);
  --bg3: var(--tp-grey-50);
  --border: var(--tp-grey-100);
  --border-strong: var(--tp-grey-200);

  /* ---- Type families ---- */
  --font-display: 'Archivo', system-ui, sans-serif;   /* headings / wordmark feel */
  --font-body:    'Source Sans 3', system-ui, sans-serif;

  /* ---- Type scale ---- */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-5xl:  62px;

  /* ---- Spacing (4px base) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* ---- Radii ---- */
  --r-sm: 6px;  --r-md: 10px; --r-lg: 16px; --r-pill: 999px;

  /* ---- Shadows (soft, warm) ---- */
  --shadow-card:  0 4px 16px rgba(20,16,16,.08);
  --shadow-raise: 0 10px 28px rgba(20,16,16,.14);
  --shadow-sticky: 0 2px 12px rgba(20,16,16,.06);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.2,.7,.3,1); /* @kind other */
  --dur: 200ms; /* @kind other */
}

/* ============================================================
   Base semantic element styles
   ============================================================ */
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--fg1);
  background: var(--bg1);
  -webkit-font-smoothing: antialiased;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-4xl);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--fg1);
  text-wrap: balance;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-3xl);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--fg1);
  text-wrap: balance;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--fg1);
}
h4, .h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-md);
  line-height: 1.3;
  color: var(--fg1);
}

/* Heavy oblique "wordmark" treatment — echoes the logo */
.tp-wordmark {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.02em;
}

/* Eyebrow / kicker */
.tp-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-brand);
}

p, .p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--fg1);
  text-wrap: pretty;
}
.text-secondary { color: var(--fg2); }
.lead { font-size: var(--text-lg); line-height: 1.55; color: var(--fg2); }
.small { font-size: var(--text-sm); }

a { color: var(--fg-brand); text-decoration: none; }
a:hover { color: var(--tp-orange-600); }

code, .code, pre {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: 0.9em;
  background: var(--tp-grey-50);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 0.1em 0.4em;
  color: var(--tp-ink);
}