/* ==========================================================================
   variables.css — design tokens
   Fonseca Maintenance Services
   Colors sampled from the business card artwork (see CLAUDE.md §4).
   ========================================================================== */

:root {
  /* ---------- Color: neutrals ---------- */
  --color-black: #000000;
  --color-black-800: #0b0d08;
  --color-black-700: #161a12;
  --color-black-600: #22281c;

  /* ---------- Color: greens ---------- */
  --color-green-300: #92c423;
  --color-green-400: #7cb518;
  --color-green-500: #5b8308;
  --color-green-700: #4c7d00;
  --color-green-900: #24430a;
  --color-green-950: #16290a; /* back layer of the grass band */

  /* ---------- Color: action (orange means "do something") ---------- */
  --color-orange-400: #ffb43f;
  --color-orange-500: #f5a623;

  /* ---------- Color: text ---------- */
  --color-cream: #f7f5ee;
  --color-gray-400: #a8afa0;

  /* ---------- Semantic aliases ---------- */
  --bg-page: var(--color-black);
  --bg-panel: var(--color-black-800);
  --bg-field: var(--color-black-700);
  --border-hairline: var(--color-black-700);
  --text-body: var(--color-cream);
  --text-muted: var(--color-gray-400);
  --text-accent: var(--color-green-400);
  --text-action: var(--color-orange-500);

  /* Overlay scrims used over photography */
  --scrim-soft: rgba(0, 0, 0, 0.45);
  --scrim-mid: rgba(0, 0, 0, 0.65);
  --scrim-hard: rgba(0, 0, 0, 0.82);
  --scrim-green: rgba(36, 67, 10, 0.55);

  /* ---------- Typography ---------- */
  /* Brand fonts are self-hosted in assets/fonts/ (see @font-face in base.css).
     The stacks degrade to a metric-similar system face when the woff2 files
     are not present, so the site never depends on a network font. */
  --font-display: "Cormorant Garamond", "EB Garamond", "Garamond", Georgia,
    "Times New Roman", serif;
  --font-body: "Barlow", "Source Sans 3", "Segoe UI", system-ui, -apple-system,
    "Helvetica Neue", Arial, sans-serif;

  --fs-100: 0.75rem;   /* 12px — eyebrows, legal */
  --fs-200: 0.8125rem; /* 13px — labels */
  --fs-300: 0.9375rem; /* 15px — small body */
  --fs-400: 1.0625rem; /* 17px — body */
  --fs-500: 1.25rem;   /* 20px — lead */
  --fs-600: 1.5rem;    /* 24px — h4 */
  --fs-700: 2rem;      /* 32px — h3 */
  --fs-800: 2.75rem;   /* 44px — h2 */
  /* Capped so the two-line hero headline never wraps into a four-line block
     with an orphan on the last line. */
  --fs-900: clamp(2.35rem, 4.4vw, 3.25rem); /* h1 / hero */

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-base: 1.65;

  --ls-display: 0.06em;  /* wide-letterspaced serif headings */
  --ls-wide: 0.18em;     /* eyebrows, nav, buttons */
  --ls-wider: 0.3em;     /* wordmark lockup */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---------- Spacing ---------- */
  --spacing-3xs: 0.25rem;
  --spacing-2xs: 0.5rem;
  --spacing-xs: 0.75rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2.5rem;
  --spacing-xl: 4rem;
  --spacing-2xl: 6rem;
  --spacing-3xl: 8.5rem;

  --section-pad-block: clamp(4rem, 9vw, 8.5rem);
  --gutter: clamp(1.25rem, 5vw, 2.5rem);
  --container-max: 78rem;   /* 1248px */
  --container-narrow: 46rem;

  /* ---------- Radii & lines ---------- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;
  --hairline: 1px;

  /* ---------- Elevation ---------- */
  --shadow-card: 0 18px 44px rgba(0, 0, 0, 0.55);
  --shadow-lift: 0 28px 60px rgba(0, 0, 0, 0.7);
  --glow-green: 0 0 28px rgba(124, 181, 24, 0.35);
  --glow-orange: 0 0 24px rgba(245, 166, 35, 0.4);

  /* ---------- Motion ---------- */
  --duration-fast: 200ms;
  --duration-base: 400ms;
  --duration-slow: 800ms;
  --duration-slower: 1200ms;
  --duration-slide: 1400ms;   /* hero crossfade */

  --ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-soft: cubic-bezier(0.45, 0.05, 0.55, 0.95);

  --stagger-step: 80ms;       /* grid-child reveal offset */
  --loop-sway: 9s;            /* grass blade ambient loop */
  --loop-kenburns: 14s;       /* hero slow zoom */

  /* ---------- Geometry ---------- */
  --diagonal-angle: -11deg;   /* the hero wedge cut */
  --cut-height: clamp(3rem, 7vw, 7rem); /* angled section edges */

  /* ---------- Layers ---------- */
  --z-base: 1;
  --z-media: 2;
  --z-scrim: 3;
  --z-wedge: 4;
  --z-content: 5;
  --z-divider: 6;
  --z-header: 100;
  --z-mobile-nav: 110;
  --z-callbar: 120;
  --z-lightbox: 200;
}