/* ===========================================================
   EasilyVirtual Design System
   colors_and_type.css
   Candace Decker · EasilyVirtual.com
   Updated: May 2026 — Complete Brand Guidelines EasilyVirtual
   =========================================================== */

/* Fonts:
   - Red Hat Display variable font (brand-supplied TTF) — display + body
   - Cormorant Garamond italic — "AI" wordmark serif accent
   - Satisfy — script/handwriting accent (ad use: "anymore", "Candace") */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@1,400;1,600&family=Satisfy&display=swap');

@font-face {
  font-family: 'Red Hat Display';
  src: url('fonts/RedHatDisplay-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Core palette ---------- */
  --orange:        #D97757;   /* primary — EasilyAI logo orange */
  --orange-dark:   #C4623C;   /* hover / pressed */
  --orange-light:  #F2B18A;   /* tint */
  --orange-glow:   rgba(217, 119, 87, 0.25);
  --orange-tint:   #FDF0E9;   /* very light wash */

  --green:         #3A211F;   /* accent action — bold emphasis, CTA, ad headlines */
  --green-dark:    #2A1715;   /* hover / pressed */
  --green-glow:    rgba(58, 33, 31, 0.28);

  --cream:         #EDE9DF;   /* primary background — the textured paper */
  --cream-100:     #F5F2EC;   /* lighter cream */
  --cream-200:     #E3DDD3;   /* slightly deeper */

  --warm-black:    #3A211F;   /* primary text — warm near-black */
  --warm-900:      #2A201B;
  --warm-800:      #3D3028;
  --warm-700:      #5A4D46;
  --warm-600:      #7A6D66;
  --warm-400:      #A89D97;
  --warm-200:      #D6CFC9;

  --white:         #FFFFFF;

  /* ---------- Semantic foreground ---------- */
  --fg-1:          var(--warm-700);         /* primary text — warm medium gray */
  --fg-2:          var(--warm-800);         /* secondary */
  --fg-3:          var(--warm-700);         /* tertiary / meta */
  --fg-inverse:    var(--white);

  --fg-on-orange:  var(--white);            /* text on orange background */
  --fg-on-green:   var(--white);            /* text on green background */
  --fg-on-cream:   var(--warm-black);       /* text on cream background */

  /* ---------- Semantic background ---------- */
  --bg-1:          var(--white);
  --bg-2:          var(--cream-100);
  --bg-3:          var(--cream);
  --bg-accent:     var(--orange);
  --bg-action:     var(--green);

  /* ---------- Borders ---------- */
  --border-1:      rgba(28, 23, 20, 0.08);
  --border-2:      rgba(28, 23, 20, 0.16);
  --border-orange: var(--orange);
  --border-green:  var(--green);

  /* ---------- Type families ---------- */
  --font-display:  'Red Hat Display', system-ui, -apple-system, sans-serif;
  --font-body:     'Red Hat Display', system-ui, -apple-system, sans-serif;
  --font-serif:    'Cormorant Garamond', 'Georgia', serif;  /* italic only — "AI" in logo */
  --font-script:   'Satisfy', cursive;                      /* handwriting accent — "anymore", name treatments */

  /* ---------- Type scale ---------- */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  48px;
  --text-4xl:  64px;
  --text-5xl:  88px;
  --text-6xl:  120px;

  /* ---------- Line heights ---------- */
  --lh-tight:  1.02;
  --lh-snug:   1.15;
  --lh-normal: 1.4;
  --lh-loose:  1.6;

  /* ---------- Letter spacing ---------- */
  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;
  --tracking-caps:   0.08em;

  /* ---------- Spacing scale (4pt base) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---------- Radii ---------- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-xs:   0 1px 3px rgba(28, 23, 20, 0.06);
  --shadow-sm:   0 2px 8px rgba(28, 23, 20, 0.08);
  --shadow-md:   0 8px 28px rgba(28, 23, 20, 0.10);
  --shadow-lg:   0 20px 56px rgba(28, 23, 20, 0.12);
  --shadow-orange-glow: 0 0 0 6px var(--orange-glow);
  --shadow-green-glow:  0 0 0 6px var(--green-glow);

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    420ms;
}

/* ===========================================================
   Base element styles
   =========================================================== */

html, body {
  font-family: var(--font-body);
  color: var(--fg-1);
  background: var(--bg-1);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display — the wordmark style: sans bold + serif italic accent.
   Use .display--accent around the word that should be italic serif.
   Mirrors the EasilyAI logo: "Easily" in bold sans, "AI" in italic serif. */
.display, h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(var(--text-3xl), 6vw, var(--text-5xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}

.display--accent, .serif-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Script accent — handwriting font for soft emotional words.
   Use for one word per headline max. Examples: "anymore", "Candace".
   Always green or orange. Never body copy. */
.script-accent {
  font-family: var(--font-script);
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.01em;
  line-height: 1;
}

h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl));
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  margin: 0;
}

h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  margin: 0;
}

h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
  margin: 0;
}

p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--lh-loose);
  color: var(--fg-2);
  margin: 0;
  text-wrap: pretty;
}

.lead {
  font-size: var(--text-md);
  line-height: var(--lh-loose);
  color: var(--fg-2);
}

.eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--orange);
}

.meta, small {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--fg-3);
  line-height: var(--lh-normal);
}

/* Orange underline — the brand's signature text accent.
   A warm orange underline beneath a key phrase. */
.orange-line {
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-underline-offset: 4px;
  text-decoration-thickness: 3px;
}

/* Green bold — used for emphasis in ad-style layouts. */
.green-bold {
  color: var(--green);
  font-weight: 800;
}

/* Green underline — used beneath script accent words in ad layouts. */
.green-line {
  text-decoration: underline;
  text-decoration-color: var(--green);
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}

/* ===========================================================
   Utility text helpers
   =========================================================== */
.text-center  { text-align: center; }
.text-inverse { color: var(--fg-inverse); }
.text-orange  { color: var(--orange); }
.text-green   { color: var(--green); }
.text-muted   { color: var(--fg-3); }
.uppercase    { text-transform: uppercase; letter-spacing: var(--tracking-caps); }

/* ===========================================================
   Focus ring — accessible, brand-consistent
   =========================================================== */
:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}