/* ============================================================
   NATURE'S CALL LANDSCAPING — DESIGN TOKENS
   Kevin Kahn Web Development
   Last updated: April 2026
   
   USAGE WITH CLAUDE CODE:
   Paste this file into your project and reference it in 
   every prompt. Tell Claude: "Use the design tokens in 
   natures-call-tokens.css for all styling decisions."
   ============================================================ */


/* ------------------------------------------------------------
   COLORS
   ------------------------------------------------------------ */
:root {

  /* Core Darks — warm-toned, never pure black */
  --nc-deep-slate:     #1A1A16;   /* Primary dark bg, hero overlays */
  --nc-charcoal:       #2E2E28;   /* Nav bg (scrolled), footer bg */
  --nc-charcoal-mid:   #3D3D35;   /* Card bg on dark sections */
  --nc-charcoal-light: #52524A;   /* Borders on dark bg, dividers */

  /* Core Lights — warm-toned, never pure white */
  --nc-off-white:      #FAFAF7;   /* Page base background */
  --nc-warm-linen:     #F2EDE4;   /* Alternate section bg */
  --nc-linen-mid:      #E8E1D6;   /* Subtle borders on light bg */

  /* Brand Green — darkened from truck Kelly green for premium feel */
  --nc-green:          #2D7A3A;   /* Primary CTA buttons, active states */
  --nc-green-hover:    #3D9E4E;   /* Button hover state */
  --nc-green-muted:    #1F5428;   /* Green on dark bg (slightly lighter) */
  --nc-green-tint:     #EBF5EC;   /* Very light green bg for badges */

  /* Gold — premium accent, used sparingly */
  --nc-gold:           #C8A45A;   /* Eyebrow text, dividers, highlights */
  --nc-gold-light:     #D9BC82;   /* Gold on dark bg */
  --nc-gold-dark:      #9A7A3A;   /* Gold on light bg for contrast */

  /* Stone — warm grays for text and UI */
  --nc-stone:          #8A8278;   /* Body text, captions, muted labels */
  --nc-stone-light:    #B5AFA7;   /* Placeholder text, disabled states */
  --nc-stone-dark:     #5A5650;   /* Secondary text on light bg */

  /* Text — mapped roles */
  --nc-text-primary:   #1A1A16;   /* Headings on light bg */
  --nc-text-secondary: #5A5650;   /* Body text on light bg */
  --nc-text-muted:     #8A8278;   /* Captions, labels on light bg */
  --nc-text-inverse:   #FAFAF7;   /* Any text on dark bg */
  --nc-text-inverse-muted: #8A8278; /* Muted text on dark bg */
  --nc-text-gold:      #C8A45A;   /* Eyebrow labels, accent text */

  /* Semantic */
  --nc-success:        #2D7A3A;
  --nc-error:          #B84040;
  --nc-border-light:   rgba(26, 26, 22, 0.10);  /* Borders on light bg */
  --nc-border-dark:    rgba(250, 250, 247, 0.12); /* Borders on dark bg */
}


/* ------------------------------------------------------------
   TYPOGRAPHY
   
   GOOGLE FONTS TO IMPORT:
   @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Jost:wght@300;400;500&display=swap');
   
   Cormorant Garamond — Display headings, project titles, hero text
   Jost — Navigation, body copy, UI labels, buttons
   ------------------------------------------------------------ */
:root {

  --nc-font-display: 'Cormorant Garamond', Georgia, serif;
  --nc-font-body:    'Jost', system-ui, sans-serif;

  /* Scale */
  --nc-text-xs:   0.75rem;    /* 12px — legal, fine print */
  --nc-text-sm:   0.875rem;   /* 14px — captions, labels */
  --nc-text-base: 1rem;       /* 16px — body copy */
  --nc-text-lg:   1.125rem;   /* 18px — lead paragraphs */
  --nc-text-xl:   1.25rem;    /* 20px — card titles */
  --nc-text-2xl:  1.5rem;     /* 24px — section intros */
  --nc-text-3xl:  2rem;       /* 32px — section headings */
  --nc-text-4xl:  2.75rem;    /* 44px — page headings */
  --nc-text-5xl:  3.75rem;    /* 60px — hero subheading */
  --nc-text-hero: clamp(3.5rem, 7vw, 6rem); /* Fluid hero headline */

  /* Weight */
  --nc-weight-light:   300;
  --nc-weight-regular: 400;
  --nc-weight-medium:  500;
  --nc-weight-semi:    600;   /* Display font only */

  /* Leading */
  --nc-leading-tight:  1.15;  /* Large display headings */
  --nc-leading-snug:   1.3;   /* Section headings */
  --nc-leading-normal: 1.6;   /* Body copy */
  --nc-leading-loose:  1.8;   /* Long-form reading */

  /* Tracking */
  --nc-tracking-tight:  -0.02em;  /* Large headings */
  --nc-tracking-normal:  0;
  --nc-tracking-wide:    0.06em;  /* Eyebrow / labels */
  --nc-tracking-wider:   0.12em; /* All-caps UI labels */
}


/* ------------------------------------------------------------
   SPACING
   Base unit: 4px
   ------------------------------------------------------------ */
:root {
  --nc-space-1:   0.25rem;   /* 4px */
  --nc-space-2:   0.5rem;    /* 8px */
  --nc-space-3:   0.75rem;   /* 12px */
  --nc-space-4:   1rem;      /* 16px */
  --nc-space-5:   1.25rem;   /* 20px */
  --nc-space-6:   1.5rem;    /* 24px */
  --nc-space-8:   2rem;      /* 32px */
  --nc-space-10:  2.5rem;    /* 40px */
  --nc-space-12:  3rem;      /* 48px */
  --nc-space-16:  4rem;      /* 64px */
  --nc-space-20:  5rem;      /* 80px */
  --nc-space-24:  6rem;      /* 96px */
  --nc-space-32:  8rem;      /* 128px */

  /* Section vertical padding */
  --nc-section-pad-sm: 4rem 0;    /* Compact sections */
  --nc-section-pad:    6rem 0;    /* Standard sections */
  --nc-section-pad-lg: 9rem 0;    /* Hero / feature sections */

  /* Container */
  --nc-container-max:  1280px;
  --nc-container-pad:  clamp(1.5rem, 5vw, 4rem);
}


/* ------------------------------------------------------------
   BORDERS & RADII
   Philosophy: no rounded corners on single-sided borders.
   Containers are square or very slightly rounded.
   ------------------------------------------------------------ */
:root {
  --nc-radius-sm:   2px;
  --nc-radius-md:   4px;    /* Buttons, badges */
  --nc-radius-lg:   8px;    /* Cards */
  --nc-radius-full: 9999px; /* Pills only */

  --nc-border:      0.5px solid var(--nc-border-light);
  --nc-border-dark: 0.5px solid var(--nc-border-dark);
}


/* ------------------------------------------------------------
   SHADOWS
   Warm-toned, never cold gray drop shadows.
   ------------------------------------------------------------ */
:root {
  --nc-shadow-sm:  0 1px 3px rgba(26, 26, 22, 0.08);
  --nc-shadow-md:  0 4px 16px rgba(26, 26, 22, 0.10);
  --nc-shadow-lg:  0 12px 40px rgba(26, 26, 22, 0.14);
  --nc-shadow-xl:  0 24px 64px rgba(26, 26, 22, 0.18);
}


/* ------------------------------------------------------------
   TRANSITIONS
   ------------------------------------------------------------ */
:root {
  --nc-ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --nc-ease-out:   cubic-bezier(0, 0, 0.2, 1);
  --nc-ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --nc-duration-fast:   150ms;
  --nc-duration-base:   250ms;
  --nc-duration-slow:   400ms;
  --nc-duration-slower: 600ms;
}


/* ------------------------------------------------------------
   Z-INDEX
   ------------------------------------------------------------ */
:root {
  --nc-z-below:   -1;
  --nc-z-base:     0;
  --nc-z-raised:   10;
  --nc-z-dropdown: 100;
  --nc-z-sticky:   200;
  --nc-z-nav:      300;
  --nc-z-overlay:  400;
  --nc-z-modal:    500;
}


/* ============================================================
   COMPONENT PATTERNS
   Copy-paste starting points for Claude Code prompts.
   ============================================================ */

/* --- Eyebrow label (gold, all-caps, spaced) --- */
.nc-eyebrow {
  font-family: var(--nc-font-body);
  font-size: var(--nc-text-xs);
  font-weight: var(--nc-weight-medium);
  letter-spacing: var(--nc-tracking-wider);
  text-transform: uppercase;
  color: var(--nc-text-gold);
}

/* --- Display heading (Cormorant, large) --- */
.nc-heading-display {
  font-family: var(--nc-font-display);
  font-size: var(--nc-text-hero);
  font-weight: var(--nc-weight-light);
  line-height: var(--nc-leading-tight);
  letter-spacing: var(--nc-tracking-tight);
  color: var(--nc-text-inverse);  /* swap to --nc-text-primary on light bg */
}

/* --- Section heading --- */
.nc-heading-section {
  font-family: var(--nc-font-display);
  font-size: var(--nc-text-4xl);
  font-weight: var(--nc-weight-light);
  line-height: var(--nc-leading-snug);
  letter-spacing: var(--nc-tracking-tight);
  color: var(--nc-text-primary);
}

/* --- Body copy --- */
.nc-body {
  font-family: var(--nc-font-body);
  font-size: var(--nc-text-base);
  font-weight: var(--nc-weight-light);
  line-height: var(--nc-leading-normal);
  color: var(--nc-text-secondary);
}

/* --- Primary CTA button --- */
.nc-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--nc-space-2);
  font-family: var(--nc-font-body);
  font-size: var(--nc-text-sm);
  font-weight: var(--nc-weight-medium);
  letter-spacing: var(--nc-tracking-wide);
  text-transform: uppercase;
  color: #FAFAF7;
  background: var(--nc-green);
  border: none;
  border-radius: var(--nc-radius-md);
  padding: var(--nc-space-4) var(--nc-space-8);
  cursor: pointer;
  transition: background var(--nc-duration-base) var(--nc-ease);
}
.nc-btn-primary:hover {
  background: var(--nc-green-hover);
}

/* --- Ghost button (for dark bg) --- */
.nc-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--nc-space-2);
  font-family: var(--nc-font-body);
  font-size: var(--nc-text-sm);
  font-weight: var(--nc-weight-medium);
  letter-spacing: var(--nc-tracking-wide);
  text-transform: uppercase;
  color: var(--nc-text-inverse);
  background: transparent;
  border: 0.5px solid rgba(250, 250, 247, 0.4);
  border-radius: var(--nc-radius-md);
  padding: var(--nc-space-4) var(--nc-space-8);
  cursor: pointer;
  transition: border-color var(--nc-duration-base) var(--nc-ease),
              background  var(--nc-duration-base) var(--nc-ease);
}
.nc-btn-ghost:hover {
  border-color: rgba(250, 250, 247, 0.8);
  background: rgba(250, 250, 247, 0.06);
}

/* --- Gold divider line --- */
.nc-divider-gold {
  display: block;
  width: 40px;
  height: 1px;
  background: var(--nc-gold);
  margin: var(--nc-space-4) 0;
}

/* --- Trust badge (inline stat) --- */
.nc-trust-badge {
  display: flex;
  flex-direction: column;
  gap: var(--nc-space-1);
}
.nc-trust-badge__number {
  font-family: var(--nc-font-display);
  font-size: var(--nc-text-3xl);
  font-weight: var(--nc-weight-light);
  color: var(--nc-text-inverse);
  line-height: 1;
}
.nc-trust-badge__label {
  font-family: var(--nc-font-body);
  font-size: var(--nc-text-xs);
  font-weight: var(--nc-weight-medium);
  letter-spacing: var(--nc-tracking-wider);
  text-transform: uppercase;
  color: var(--nc-stone);
}

/* --- Container --- */
.nc-container {
  width: 100%;
  max-width: var(--nc-container-max);
  margin-inline: auto;
  padding-inline: var(--nc-container-pad);
}

/* --- Dark section wrapper --- */
.nc-section-dark {
  background: var(--nc-deep-slate);
  padding: var(--nc-section-pad);
}

/* --- Light section wrapper --- */
.nc-section-light {
  background: var(--nc-off-white);
  padding: var(--nc-section-pad);
}

/* --- Warm linen section --- */
.nc-section-linen {
  background: var(--nc-warm-linen);
  padding: var(--nc-section-pad);
}


/* ============================================================
   CLAUDE CODE PROMPT TEMPLATES
   
   Copy these into your prompts to get consistent output.
   Replace [SECTION] with what you're building.
   ============================================================

   --- STARTING A NEW SECTION ---
   "Build a [SECTION] section for Nature's Call Landscaping.
   Use the design tokens in natures-call-tokens.css for all
   colors, fonts, spacing, and border radius values. No inline
   hex values — reference CSS variables only. The section sits
   on a [dark / light / linen] background. Typography uses
   Cormorant Garamond for headings and Jost for body/UI.
   Eyebrow labels use --nc-text-gold, all-caps, letter-spacing
   0.12em. No pure black or pure white anywhere."

   --- HERO SECTION ---
   "Build a full-bleed hero section. Background is
   --nc-deep-slate with a video element behind it (placeholder
   div for now). Nav is transparent, single bar, logo left,
   nav links right, one CTA button using .nc-btn-primary.
   Headline uses --nc-font-display at --nc-text-hero size,
   --nc-weight-light, color --nc-text-inverse. Eyebrow above
   headline uses --nc-text-gold. Two buttons below headline:
   .nc-btn-primary and .nc-btn-ghost. Trust badges (22 Years /
   125+ Reviews / 4.8 Stars) sit at the bottom of the hero in
   a row, separated by --nc-border-dark dividers."

   --- PROJECT CARD ---
   "Build a project card component. Dark bg
   --nc-charcoal-mid, no border radius on image, image fills
   top half. Bottom half: eyebrow in --nc-text-gold showing
   project type, project name in --nc-font-display at
   --nc-text-xl, one-line description in --nc-font-body
   --nc-text-sm --nc-text-inverse-muted. Hover: image scales
   1.03 with overflow hidden, gold underline animates in under
   the project name. Transition uses --nc-duration-slow."

   --- PROCESS SECTION ---
   "Build an 'Our Process' section on --nc-warm-linen
   background. Four steps in a horizontal row on desktop,
   stacked on mobile. Each step: large step number in
   --nc-font-display at 5rem --nc-weight-light --nc-stone-light,
   step title in --nc-font-display --nc-text-2xl
   --nc-text-primary, body in --nc-font-body --nc-text-base
   --nc-text-secondary. Gold horizontal line connects steps
   on desktop using --nc-gold at 0.5px."

   ============================================================ */