/* Fro Quantum Organics design tokens.
 * Single source of truth for the brand. Every component style and Elementor widget
 * should reference these custom properties, never raw values.
 *
 * Colors are expressed as hex for Elementor color pickers and the block editor.
 * The original Lovable build authored them in oklch; the oklch source is noted in
 * a comment beside each value for future reference. The four core brand colors are
 * exact to spec: primary #1F5C38, leaf #8DA63F, gold #D4A017, text #1A2A1E.
 */

:root {
  /* Brand */
  --fq-primary: #1F5C38;            /* deep forest green  oklch(0.42 0.09 152) */
  --fq-primary-foreground: #FFFFFF; /* text on green      oklch(0.99 0.01 140) */
  --fq-primary-soft: #EDF4EE;       /* pale green tint    oklch(0.96 0.02 145) */
  --fq-leaf: #8DA63F;               /* leaf green         oklch(0.68 0.13 120) */
  --fq-leaf-foreground: #1A2A1E;    /*                    oklch(0.22 0.03 150) */
  --fq-gold: #D4A017;               /* gold accent        oklch(0.76 0.14 82)  */
  --fq-gold-foreground: #2B2614;    /* text on gold       oklch(0.22 0.03 80)  */
  --fq-gold-soft: #F8F0DA;          /* pale gold tint     oklch(0.96 0.05 88)  */

  /* Surfaces and text */
  --fq-background: #FFFFFF;         /*                    oklch(1 0 0)         */
  --fq-foreground: #1A2A1E;         /* body and headings  oklch(0.22 0.03 150) */
  --fq-surface: #FCFEFC;            /* soft off-white     oklch(0.99 0.005 140) */
  --fq-surface-tint: #F7FBF7;       /* stronger tint      oklch(0.985 0.012 140) */
  --fq-card: #FFFFFF;
  --fq-card-foreground: #1A2A1E;

  /* Support */
  --fq-secondary: #EEF3EF;          /* oklch(0.96 0.012 145)  */
  --fq-secondary-foreground: #244430;
  --fq-muted: #F0F3F1;              /* oklch(0.965 0.008 145) */
  --fq-muted-foreground: #5F6C63;   /* captions, meta         */
  --fq-accent: #F8F0DA;
  --fq-accent-foreground: #3E3414;
  --fq-destructive: #D23B2C;        /* save badge, made-without dot */
  --fq-destructive-foreground: #FFFFFF;
  --fq-border: #E4EAE5;             /* hairlines, inputs      */
  --fq-input: #E4EAE5;
  --fq-ring: #1F5C38;               /* focus ring             */
  --fq-whatsapp: #25D366;           /* fixed brand green      */

  /* Typography */
  --fq-font-display: "Outfit", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fq-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Type scale */
  --fq-text-xs: 0.75rem;    /* 12 */
  --fq-text-sm: 0.875rem;   /* 14 */
  --fq-text-base: 1rem;     /* 16 */
  --fq-text-lg: 1.125rem;   /* 18 */
  --fq-text-xl: 1.25rem;    /* 20 */
  --fq-text-2xl: 1.5rem;    /* 24 */
  --fq-text-3xl: 1.875rem;  /* 30 */
  --fq-text-4xl: 2.25rem;   /* 36 */
  --fq-text-5xl: 3rem;      /* 48 */
  --fq-text-6xl: 3.75rem;   /* 60 */

  /* Radii (mirrors the Lovable scale; rounded-2xl = 2rem, rounded-3xl = 1.5rem) */
  --fq-radius-sm: 0.375rem;
  --fq-radius-md: 0.625rem;
  --fq-radius-lg: 1rem;
  --fq-radius-xl: 1.5rem;
  --fq-radius-2xl: 2rem;
  --fq-radius-3xl: 1.5rem;
  --fq-radius-pill: 9999px;
  --fq-radius: 0.75rem;

  /* Shadows */
  --fq-shadow-soft: 0 1px 2px rgba(20, 50, 30, 0.04), 0 6px 24px -8px rgba(20, 50, 30, 0.08);
  --fq-shadow-lift: 0 10px 40px -12px rgba(20, 50, 30, 0.18);
  --fq-shadow-premium: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 2px 4px rgba(20, 50, 30, 0.04), 0 24px 60px -20px rgba(20, 50, 30, 0.22);

  /* Layout */
  --fq-container: 80rem;       /* 1280px */
  --fq-gutter: 1rem;           /* inline padding, mobile  */
  --fq-gutter-lg: 2rem;        /* inline padding, >=768px */
  --fq-section-y: 4rem;        /* 64px  mobile  */
  --fq-section-y-lg: 6rem;     /* 96px  >=768px */

  /* Motion */
  --fq-transition: 0.3s ease;
}