/* =========================================================
   ESL Global Theme Tokens
   ---------------------------------------------------------
   Layer 1: Palette slots (raw colors)
   Layer 2: Semantic tokens (meaningful names)

   Later, your "Theme manage" page will just update the
   layer 1 values (palette-*). Everything else uses the
   semantic tokens, so the whole site updates at once.
   ========================================================= */

:root {
  /* -------------------------
   * PALETTE 1 (screenshot)
   * These approximate the row of circles you sent:
   * [white, off-white, dark greens, teals]
   *
   * When you build a theme-manage UI, you will expose
   * ONLY these 8 values (plus fonts) in a form.
   * ------------------------- */

  --palette-1-bg:        #ffffff;  /* main background */
  --palette-2-bg-alt:    #f5f7f9;  /* alt background / cards */

  --palette-3-deep:      #004633;  /* very dark green */
  --palette-4-deep-alt:  #005b3c;  /* dark green */
  --palette-5-main:      #007347;  /* main ESL green */
  --palette-6-main-alt:  #008b55;  /* lighter main green */

  --palette-7-accent:    #18b57a;  /* teal accent */
  --palette-8-accent-alt:#38d69a;  /* brighter teal accent */


  /* -------------------------
   * FONT PALETTE
   * You can later expose these as "Primary font",
   * "Secondary font" in your theme-manage page.
   * ------------------------- */
  --danger: #dc3545;
  --font-family-base: system-ui, -apple-system, BlinkMacSystemFont,
                      "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-heading: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont,
                         "Helvetica Neue", Arial, sans-serif;

  /* Layout spacing (horizontal page gutters) */
  --page-gutter-x-desktop: 2.5rem; 
  --page-gutter-x-mobile:  1rem;

  /* ======================================================
   * LAYER 2: SEMANTIC TOKENS
   * These are what the rest of the site should use.
   * Try to NEVER hardcode colors outside theme.css.
   * ====================================================== */

  /* Surfaces / backgrounds */
  --surface:           var(--palette-1-bg);       /* page background, large sections */
  --surface-2:         var(--palette-2-bg-alt);   /* cards on top of surface */
  --surface-dark:      var(--palette-3-deep);     /* dark footer / info bar */

  /* Text colors */
  --text:              #111827;                  /* primary text on light bg */
  --text-muted:        #6b7280;                  /* labels / hints on light bg */
  --text-on-dark:      #f9fafb;                  /* text on dark surfaces */
  --text-muted-on-dark:#9ca3af;                  /* subtle labels on dark */

  /* Brand / accent colors
     Brand = ESL green, Accent = teal.
  */
  --brand:             var(--palette-5-main);
  --brand-strong:      var(--palette-3-deep);
  --brand-soft:        var(--palette-6-main-alt);

  --accent:            var(--palette-7-accent);
  --accent-soft:       var(--palette-8-accent-alt);

  /* Buttons text on brand background */
  --brand-contrast:    #ffffff;
  --accent-contrast:   #ffffff;

  /* Borders / outlines */
  --border-subtle:     #e5e7eb;
  --border-strong:     #cbd5e1;

  /* Shadows / elevation */
  --shadow-soft:       0 10px 30px rgba(15, 23, 42, 0.07);
  --shadow-strong:     0 22px 45px rgba(15, 23, 42, 0.14);

  /* Shared radii */
  --radius-card-lg:    1.1rem;
  --radius-chip:       999px;
  
  /* Navigation height (used by Studio shell & layouts) */
  --nav-height: 72px;
}

/* =========================================================
   Global base styles that apply this theme everywhere
   ========================================================= */

html,
body {
  background-color: var(--surface);
  color: var(--text);
  font-family: var(--font-family-base);
}

/* Headings use heading font */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
  color: var(--brand-strong);
}

/* Links on light background */
a {
  color: var(--brand);
  text-decoration-color: rgba(0, 115, 71, 0.25);
}
a:hover {
  color: var(--accent);
  text-decoration-color: rgba(24, 181, 122, 0.6);
}

/* ===============================
   Common layout components
   =============================== */

/* Main section wrapper used across the site */
.section-pad {
  padding-top: 1rem;
  padding-bottom: 3rem;
  background-color: var(--surface);
}

/* Public content card (service detail, career detail, etc.) */
.content-card {
  background-color: var(--surface-2);
  border-radius: var(--radius-card-lg);
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(15, 23, 42, 0.03);
}

/* Manage cards in studio area */
.manage-card {
  background-color: var(--surface-2);
  border-radius: var(--radius-card-lg);
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(15, 23, 42, 0.06);
}

/* Dark footer / info bars */
.footer,
.info-bar,
.contact-info-bar {
  background-color: var(--surface-dark);
  color: var(--text-on-dark);
}

/* ===============================
   Buttons & action chips
   =============================== */

/* Primary brand button (used together with Bootstrap .btn) */
.btn-brand,
.btn-primary {
  background-color: var(--brand);
  border-color: var(--brand);
  color: var(--brand-contrast);
}

.btn-brand:hover,
.btn-primary:hover {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

/* Outline brand button */
.btn-outline-brand {
  background-color: transparent;
  color: var(--brand);
  border-color: var(--brand);
}
.btn-outline-brand:hover {
  background-color: var(--brand);
  color: var(--brand-contrast);
}

/* Generic "swap" behaviour:
   When you want an element to invert colors on hover
   (background ↔ alt, text ↔ text-alt), use:

   class="theme-swap"

   on any element.
*/
.theme-swap {
  background-color: var(--surface);
  color: var(--text);
  transition: background-color 140ms ease-out, color 140ms ease-out;
}
.theme-swap:hover {
  background-color: var(--surface-2);
  color: var(--text-muted);
}

/* For dark chips: start dark, swap to light on hover */
.theme-swap-dark {
  background-color: var(--surface-dark);
  color: var(--text-on-dark);
  transition: background-color 140ms ease-out, color 140ms ease-out;
}
.theme-swap-dark:hover {
  background-color: var(--accent);
  color: var(--accent-contrast);
}