/*
Theme Name:     Torth Marketing
Theme URI:      https://torthent.com
Description:    Child theme for the TORTH Marketing site. Built on Hello Elementor. Defines the Torth brand design tokens (colors, type, radii, spacing) so Elementor pages inherit them site-wide.
Author:         TORTH Enterprise LLC
Author URI:     https://torthent.com
Template:       hello-elementor
Version:        1.0.0
Text Domain:    torth-marketing
*/

/* =====================================================================
   HOW TO USE
   1. Zip THIS folder (must contain style.css + functions.php).
   2. WordPress ▸ Appearance ▸ Themes ▸ Add New ▸ Upload Theme ▸ pick the zip.
   3. Requires the free "Hello Elementor" theme installed as the parent.
   4. Activate "Torth Marketing".
   These tokens are then available to every Elementor widget's Custom CSS
   as var(--torth-...). Set the matching values once in Elementor under
   Site Settings ▸ Global Colors / Global Fonts so the editor UI matches.
   ===================================================================== */

/* ---- Design tokens (single source of truth) ---- */
:root{
  /* Brand colors */
  --torth-blue:        #2B4DFF;   /* Accent Blue  */
  --torth-blue-soft:   #7E92FF;   /* Accent on dark backgrounds */
  --torth-ink:         #101114;   /* Near-black / dark bands & text */
  --torth-paper:       #FBFAF7;   /* Warm off-white page background */
  --torth-white:       #FFFFFF;   /* Cards */
  --torth-green:       #5EE6A8;   /* Positive metric highlight */

  /* Text colors */
  --torth-text:        #101114;
  --torth-text-muted:  #54565D;
  --torth-text-soft:   #62646B;
  --torth-text-faint:  #7A7C83;
  --torth-text-on-dark:#9A9CA3;

  /* Lines & borders */
  --torth-hairline:    #ECEBE6;   /* card / divider hairline on paper */
  --torth-border:      #E7E6E0;   /* header & chip border */
  --torth-border-dark: #26272D;   /* divider on dark bands */

  /* Radii */
  --torth-radius-card:   18px;
  --torth-radius-tile:   13px;
  --torth-radius-btn:    11px;
  --torth-radius-pill:   100px;

  /* Spacing rhythm */
  --torth-section-y:     96px;    /* standard section top/bottom padding */
  --torth-section-y-sm:  70px;    /* tighter sections */
  --torth-content-width: 1240px;
  --torth-gutter:        32px;

  /* Type families */
  --torth-font-display: 'Space Grotesk', sans-serif;   /* headings, stats, logo mark */
  --torth-font-body:    'Hanken Grotesk', system-ui, sans-serif;

  /* Shadows */
  --torth-shadow-card:  0 18px 40px -18px rgba(16,17,20,.3);
  --torth-shadow-hero:  0 30px 60px -25px rgba(16,17,20,.5);
}

/* ---- Base ---- */
body{
  font-family: var(--torth-font-body);
  background: var(--torth-paper);
  color: var(--torth-text);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5{ font-family: var(--torth-font-display); letter-spacing:-1px; text-wrap:balance; }
::selection{ background: var(--torth-blue); color:#fff; }

/* ---- Optional helper classes (add to a widget's "CSS Classes" field) ---- */
.torth-eyebrow{
  font-family: var(--torth-font-display);
  font-size:13px; font-weight:700; letter-spacing:2px;
  text-transform:uppercase; color: var(--torth-blue);
}
.torth-card{
  background: var(--torth-white);
  border:1px solid var(--torth-hairline);
  border-radius: var(--torth-radius-card);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.torth-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--torth-shadow-card);
  border-color: #DDD;
}
.torth-btn-primary{
  background: var(--torth-blue); color:#fff; font-weight:600;
  border-radius: var(--torth-radius-btn); padding:15px 26px;
}
.torth-btn-secondary{
  background: var(--torth-white); color: var(--torth-ink);
  border:1px solid #E2E1DB; font-weight:600;
  border-radius: var(--torth-radius-btn); padding:15px 26px;
}
.torth-band-dark{ background: var(--torth-ink); color:#fff; }