/*
Theme Name: Tropicon Digital
Theme URI: https://tropicon.digital
Author: Marom Anaky
Author URI: https://www.linkedin.com/in/marom-anaky-b1600b175/
Description: Custom theme for Tropicon Digital, a GEO and SEO agency. Answer-first, citation-focused marketing site. Built for simplicity and easy maintenance with Claude.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tropicon
*/

/* =====================================================================
   ABOUT THIS FILE
   ---------------------------------------------------------------------
   The comment block ABOVE this line is what makes WordPress recognize
   this folder as a theme. WordPress reads "Theme Name", "Version", etc.
   from it and lists the theme under Appearance > Themes. Without that
   block, the theme will not appear in the admin at all.

   We deliberately keep the heavy CSS (components, layout, sections) in
   separate files under /assets/css/, loaded via functions.php. This
   file holds only:
     1. The required theme header (above).
     2. The design tokens (CSS custom properties) below.
     3. A few global base rules that everything depends on.

   Why split it this way:
   - style.css stays short and readable.
   - The design system (tokens) lives in one obvious place that you and
     Claude reference constantly when making changes.
   - Component CSS can grow in its own files without bloating this one.
   ===================================================================== */


/* =====================================================================
   DESIGN TOKENS
   ---------------------------------------------------------------------
   These are the single source of truth for the brand's colors. Every
   component references these variables (e.g. color: var(--teal)) instead
   of hardcoding hex values. Change a color here and it updates site-wide.
   Copied verbatim from the existing static site so the look is identical.
   ===================================================================== */
:root {
  --teal: #34B79A;        /* primary brand color */
  --teal-dark: #2A9580;   /* hover / emphasis */
  --teal-soft: #E8F6F1;   /* tinted backgrounds */
  --coral: #F28B82;       /* secondary accent */
  --ink: #141414;         /* primary text / dark surfaces */
  --ink-soft: #1E1E1E;    /* slightly lighter dark */
  --paper: #FBFBF9;       /* page background */
  --white: #fff;
  --line: #E7E7E2;        /* light borders / dividers */
  --line-dark: #2E2E2E;   /* borders on dark surfaces */
  --gray: #6B6B66;        /* body / secondary text */
  --gray-light: #9A9A95;  /* muted text / captions */
}


/* =====================================================================
   GLOBAL BASE
   ---------------------------------------------------------------------
   Resets and global defaults that every page relies on. These are kept
   here (not in a component file) because they are foundational: fonts,
   the box model, the page background, heading family. Copied verbatim
   from the existing site.

   NOTE: The web fonts (Sora, DM Sans, JetBrains Mono) are loaded
   separately via functions.php (enqueue), not here. This file only sets
   which font-family to USE; it does not load the font files.
   ===================================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

h1, h2, h3, h4 {
  font-family: 'Sora', sans-serif;
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* The standard content container width used across the whole site.
   Many sections wrap their inner content in <div class="wrap"> to get
   this max-width and horizontal padding. */
.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 40px;
}

.mono {
  font-family: 'JetBrains Mono', monospace;
}