/* ==========================================================================
   THE SEVENTH CENTER CSS DESIGN TOKENS
   Source: Figma Design System
   Do not modify these values directly.
   ========================================================================== */

:root {

  /* =====================
     FONT FAMILIES
     ===================== */
  --font-heading: 'Lora', serif;
  --font-body: 'Public Sans', sans-serif;

  /* =====================
     CONTAINER
     ===================== */
  --container-max-width: 1280px;

  /* =====================
     BRAND / PRIMARY COLORS
     ===================== */
  --primary-color: #07545A;
  --primary-color-one: #04776F;
  --primary-color-two: #339A79;
  --primary-color-three: #6BBD78;
  --primary-color-hover: #085D56;

  /* =====================
     BUTTON COLORS
     ===================== */
  --primary-btn-color: #FEC22E;
  --secondary-btn-color: #FFFFFF;
  --third-btn-color: #04776F;
  --btn-success: #28A745;
  --highlight-yellow: #F9FB71;

  /* =====================
     BACKGROUND COLORS
     ===================== */
  --primary-background-color: #DDCFBB;
  --secondary-background-color: #F8FAFC;
  --third-background-color: #FFFFFF;
  --fourth-background-color: #FFB33E;
  --fifth-background-color: #CFF0D7;
  --sixth-background-color: #F6EDDF;
  --card-section: #F6EDDF;
  --card-background: #FBF9F5;
  --card-warm: #F4E5C8;
  --bg-footer: #1A2028;
  --bg-body-alt: #F3F3F3;
  --bg-input: rgb(243 245 248 / 97%);
  --special-text: #fd702d;

  /* =====================
     TEXT COLORS
     ===================== */
  --text-heading-color: #1E1C1B;
  --text-color: #101010;
  --text-color-two: #222325;
  --text-color-three: #B5B6BA;
  --text-color-four: #89898B;
  --text-color-five: #FFB33E;
  --text-color-six: #21713B;
  --text-black: #000000;
  --text-white: #FFFFFF;
  --text-pera-color: #283618;
  --text-muted: #595959; /* Darkened from #6C757D for WCAG 2.2 AA contrast on small text */
  --text-grey: #817D7D;
  --text-dark-grey: #555555;
  --text-placeholder: #515F6F;
  --text-placeholder-light: #B3B3B3;
  --text-color-link: #918787;

  /* =====================
     FOOTER COLORS
     ===================== */
  --footer-text: #D9D9D9;
  --footer-number: #FFFFFF;
  --social-icons: #94A3B8;

  /* =====================
     COMPONENT COLORS
     ===================== */
  --pricing-pera-text: #64748B;
  --grey-heart-color: #B5B6BA;
  --light-red: #FD661F;
  --blue-color: #1D2254;
  --light-blue-color: #718EBF;
  --light-text: #A3A3A3;
  --session-text: #343C6A;
  --pera-text: #B4B4B4;
  --rating-color: #F8B84E;
  --yoga-trainer-text: #6B6B6B;
  --service-circle-color: #0b8c83;

  /* =====================
     BORDER COLORS
     ===================== */
  --border-bottom: #F4F5F7;
  --border-card: #E4E5E7;
  --border-input: #DFEAF2;
  --border-focus: #B0C4DE;
  --border-light: rgba(229, 229, 229, 0.46);
  --border-separator: rgba(204, 195, 195, 0.77);
  --border-social: #CCCCCC;

  /* =====================
     STATE COLORS
     ===================== */
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-error: #EF4444;
  --color-info: #3B82F6;

  /* =====================
     BORDER RADIUS SCALE
     Figma standard 40px for cards, buttons, sections
     ===================== */
  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-md: 7px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-2xl: 15px;
  --radius-3xl: 20px;
  --radius-4xl: 40px;
  --radius-pill: 9999px;
  --radius-circle: 100px;

  /* =====================
     SHADOWS
     ===================== */
  --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.14);
  --shadow-arrow: 0px 1px 5px 0px rgba(0, 0, 0, 0.5);

  /* =====================
     TRANSITIONS
     ===================== */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* =====================
     SPACING SCALE
     ===================== */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 0.75rem;
  --spacing-lg: 1rem;
  --spacing-xl: 1.25rem;
  --spacing-2xl: 1.5rem;
  --spacing-3xl: 2rem;
  --spacing-4xl: 2.5rem;
  --spacing-5xl: 3rem;
  --section-gap: 3.5rem;
  --content-padding-x: 1.5rem;
  --content-padding-y: 1.25rem;

  /* =====================
     FONT SIZES
     ===================== */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --font-size-6xl: 4.45rem;
  --font-size-heading: 0.9375rem;
  --font-size-subheading: 1.8125rem;
  --font-size-training: 2.625rem;
  --font-size-cta: 2.375rem;
  --font-size-pera: 1.75rem;
}