/*
Theme Name: Dovetail Developments
Theme URI: https://example.com/
Description: Child theme for Hello Elementor.
Author: Ahsan Iqbal
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/


:root {
  --font-title: "Cal Sans", sans-serif;
  --font-heading: "Old Standard TT", serif;
  --font-body: "Roboto", sans-serif;

  /* ═══════════════════════════════════════════════
     DOVETAIL BRAND COLORS (HEX)
     Four layers:
       1. Palette   — the 7 source brand colors
       2. Scales    — full ramps derived from the palette
       3. Core      — official brand color names
       4. Semantic  — what to actually USE in components
     Rule of thumb: components reference SEMANTIC tokens.
     Only reach into scales for special cases.
  ═══════════════════════════════════════════════ */

  /* ── 1. Palette (source colors) ── */
  --green:        #22574A;
  --green-soft:   #1f3328;
  --cream:        #f4efe4;
  --cream-deep:   #EDE8D0;
  --bronze:       #C29A4D;
  --bronze-light: #b89668;
  --ink:          #23271f;
  --error:        #A5483A;
  --warning:      #B98A3F;
  --white:        #FCFAF5;



  /* ── 2. Green scale (tints of the brand greens) ── */
  --dovetail-green-950: var(--green);
  --dovetail-green-800: var(--green-soft);
  --dovetail-green-600: #476252;
  --dovetail-green-400: #7a8e82;
  --dovetail-green-200: #c6cec9;
  --dovetail-green-100: #ebeeec;

  /* ── 2. Dark / neutral scale (tints of ink) ── */
  --dovetail-dark-900:  var(--ink);
  --dovetail-dark-700:  #42453e;
  --dovetail-dark-500:  #696c67;
  --dovetail-dark-300:  #a3a4a1;
  --dovetail-dark-100:  #e0e1e0;

  /* ── 2. Taupe scale (warm neutrals: bronze ↔ cream) ── */
  --dovetail-taupe-900: #453724;
  --dovetail-taupe-700: #745c3b;
  --dovetail-taupe-500: var(--bronze-light);
  --dovetail-taupe-300: #d5c8af;
  --dovetail-taupe-100: var(--cream-deep);

  /* ── 3. Core brand colors ── */
  --dovetail-dark:         var(--ink);
  --dovetail-off-white:    var(--cream);
  --dovetail-taupe:        var(--bronze-light);
  --dovetail-forest-green: var(--green-soft);
  --dovetail-white:        #FCFAF5;

  /* ── 4. Semantic tokens (use these in components) ── */
  --dovetail-text:           var(--ink);                 /* headings, primary text */
  --dovetail-text-soft:      var(--dovetail-dark-700);   /* body copy */
  --dovetail-text-muted:     var(--dovetail-taupe-700);  /* labels, captions, hints */
  --dovetail-bg:             var(--cream);               /* page background */
  --dovetail-surface:        var(--dovetail-white);      /* cards, panels */
  --dovetail-surface-soft:   var(--cream-deep);          /* subtle tinted blocks */
  --dovetail-border:         var(--dovetail-taupe-300);  /* card borders, dividers */
  --dovetail-accent:         var(--bronze);              /* links, hovers, highlights */
  --dovetail-accent-strong:  #7e6541;                    /* accent on hover / on light bg */
  --dovetail-accent-soft:    #e2d8c6;                    /* accent-tinted backgrounds */
  --dovetail-on-dark:        var(--dovetail-white);      /* text on dark surfaces */
  --dovetail-on-dark-muted:  var(--dovetail-dark-300);   /* secondary text on dark */
  --dovetail-on-accent:      var(--dovetail-white);      /* text on accent buttons */
}

body {
  font-family: var(--font-body);
  font-weight: 400;
}

h1,
.site-title,
.hero-title {
  font-family: var(--font-title);
  font-weight: 600;
}

h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading) !important;
  font-weight: 500;
}

p,
li,
a,
button,
input,
textarea,
select {
  font-family: var(--font-body);
}


.elementor .heading-primary-Old-Standard .elementor-heading-title,
.elementor .heading-primary-Old-Standard.elementor-widget-heading .elementor-heading-title {
  font-family: "Old Standard TT", serif !important;
  font-style: italic !important;
}