/* ===================================
   Greenfields of Cambridge
   Design Tokens

   Brand colors from Figma design.
   Structural tokens from Open Props.
   =================================== */

/* Open Props structural tokens (imported via CDN or npm) */
/* @import "https://unpkg.com/open-props/sizes.min.css"; */
/* @import "https://unpkg.com/open-props/fonts.min.css"; */
/* @import "https://unpkg.com/open-props/shadows.min.css"; */
/* @import "https://unpkg.com/open-props/borders.min.css"; */

:root {
  /* =====================
     Brand Colors (Figma)
     ===================== */

  /* Greens - primary brand palette */
  --brand-green-900: #0a1209;
  /* near-black green */
  --brand-green-800: #162411;
  /* very dark green */
  --brand-green-700: #294b22;
  /* hero banner fill */
  --brand-green-600: #406e35;
  /* dark green */
  --brand-green-550: #5EA64D;
  /* mid green */
  --brand-green-500: #67b957;
  /* medium green (accent) */
  --brand-green-400: #afbeab;
  /* sage / muted green */

  /* Neutrals - warm tones */
  --brand-cream-100: #f8f6f3;
  /* background / off-white */
  --brand-cream-200: #ece6dd;
  /* warm beige */
  --brand-gray-400: #d5d5d5;
  /* light gray / borders */
  --brand-gray-600: #6a6a6a;
  /* medium gray / body text */

  /* Semantic aliases */
  --color-text-primary: var(--brand-green-900);
  --color-text-secondary: var(--brand-gray-600);
  --color-text-on-dark: var(--brand-cream-100);
  --color-text-on-dark-muted: var(--brand-cream-200);

  --color-surface-1: var(--brand-cream-100);
  --color-surface-2: var(--brand-cream-200);
  --color-surface-card: #ffffff;

  --color-border: var(--brand-gray-400);
  --color-border-light: color-mix(in srgb,
      var(--brand-gray-400) 50%,
      transparent);

  --color-primary: var(--brand-green-600);
  --color-primary-light: var(--brand-green-500);
  --color-primary-dark: var(--brand-green-800);
  --color-accent: var(--brand-green-400);

  --color-success: #2e7d32;
  --color-success-bg: #e8f5e9;
  --color-success-border: #c8e6c9;
  --color-error: #c62828;
  --color-error-bg: #fce4ec;
  --color-error-border: #f8bbd0;
  --color-linkedin: #0a66c2;
  --color-linkedin-hover: #004182;

  /* =====================
     Open Props: Spacing
     =====================
     --size-1: .25rem  (4px)
     --size-2: .5rem   (8px)
     --size-3: 1rem    (16px)
     --size-4: 1.25rem (20px)
     --size-5: 1.5rem  (24px)
     --size-6: 1.75rem (28px)
     --size-7: 2rem    (32px)
     --size-8: 3rem    (48px)
     --size-9: 4rem    (64px)
     --size-10: 5rem   (80px)
     ===================== */
  --space-xs: var(--size-1, 0.25rem);
  --space-sm: var(--size-2, 0.5rem);
  --space-md: var(--size-3, 1rem);
  --space-lg: var(--size-5, 1.5rem);
  --space-xl: var(--size-7, 2rem);
  --space-2xl: var(--size-8, 3rem);
  --space-3xl: var(--size-9, 4rem);
  --space-4xl: var(--size-10, 5rem);
  --space-5xl: 8rem;
  --space-6xl: 8.5rem;

  /* =====================
     Open Props: Typography
     ===================== */

  /* Font families - design uses serif headings + clean body */
  --font-heading:
    "Playfair Display", var(--font-didone, "Didot, Bodoni MT, serif");
  --font-display:
    "Bodoni Moda", "Didot", "Bodoni MT", serif;
  --font-body:
    "Inter",
    var(--font-neo-grotesque,
      "Inter, Roboto, Helvetica Neue, Arial, sans-serif"
    );

  /* Font sizes (Open Props fluid) */
  --text-xs: var(--font-size-00, 0.5rem);
  --text-sm: var(--font-size-0, 0.75rem);
  --text-body-sm: 0.875rem;
  --text-base: var(--font-size-1, 1rem);
  --text-md: var(--font-size-2, 1.1rem);
  --text-lg: var(--font-size-3, 1.25rem);
  --text-xl: var(--font-size-4, 1.5rem);
  --text-2xl: var(--font-size-5, 2rem);
  --text-3xl: var(--font-size-6, 2.5rem);
  --text-4xl: var(--font-size-7, 3rem);
  --text-5xl: var(--font-size-8, 3.5rem);
  --text-6xl: 4.5rem;

  /* Fluid font sizes */
  --text-fluid-sm: var(--font-size-fluid-0, clamp(0.75rem, 2vw, 1rem));
  --text-fluid-base: var(--font-size-fluid-1, clamp(1rem, 4vw, 1.5rem));
  --text-fluid-lg: var(--font-size-fluid-2, clamp(1.5rem, 6vw, 2.5rem));
  --text-fluid-xl: var(--font-size-fluid-3, clamp(2rem, 9vw, 3.5rem));

  /* Font weights */
  --weight-normal: var(--font-weight-4, 400);
  --weight-book: 450;
  --weight-medium: var(--font-weight-5, 500);
  --weight-semibold: var(--font-weight-6, 600);
  --weight-bold: var(--font-weight-7, 700);

  /* Letter spacing */
  --tracking-tight: -0.02em;

  /* Line heights */
  --leading-tight: var(--font-lineheight-1, 1.1);
  --leading-normal: var(--font-lineheight-3, 1.375);
  --leading-snug: 1.4;
  --leading-relaxed: var(--font-lineheight-4, 1.5);
  --leading-loose: var(--font-lineheight-5, 2);

  /* =====================
     Open Props: Borders & Radii
     ===================== */
  --radius-1: 2px;
  --radius-2: 5px;
  --radius-3: 1rem;
  --radius-4: 2rem;
  --radius-5: 4rem;
  --radius-6: 8rem;
  --radius-round: 1e5px;

  --radius-sm: var(--radius-1);
  --radius-md: var(--radius-2);
  --radius-lg: var(--radius-3);
  --radius-xl: var(--radius-4);
  --radius-full: var(--radius-round);

  --border-thin: var(--border-size-1, 1px);
  --border-medium: var(--border-size-2, 2px);

  /* =====================
     Open Props: Shadows
     ===================== */
  --shadow-color: 120 30% 10%;
  /* green-tinted shadows to match brand */
  --shadow-strength: 2%;

  /* =====================
     Overlays
     ===================== */
  --overlay-dark: rgba(10, 18, 9, 0.5);
  --overlay-dark-subtle: rgba(0, 0, 0, 0.3);
  --overlay-dark-heavy: rgba(10, 18, 9, 0.7);
  --overlay-light: rgba(248, 246, 243, 0.1);
  --overlay-light-medium: rgba(248, 246, 243, 0.2);
  --overlay-brand: rgba(64, 110, 53, 0.1);

  /* =====================
     Layout
     ===================== */
  --max-width: 1440px;
  --content-width: 1200px;
  --content-padding: var(--space-lg);

  /* =====================
     Component Dimensions
     ===================== */
  --nav-top-padding: var(--space-4xl);
  --heading-edge-padding: 3.75rem;
  --card-min-height: 28rem;
  --content-measure: 56rem;
  --divider-height: 25rem;
  --textarea-min-height: 6.25rem;
  --welcome-text-max-width: 32rem;
  --welcome-signature-width: 7.5rem;
  --welcome-photo-max-width: 20rem;
  --quote-icon-width: 2rem;
  --connect-image-max-width: 18rem;
}