/* ============================================
   DESIGN TOKENS
   Palette: White + Near-black + Burgundy (10% max)
   Extended: warm gray surface, soft burgundy tints
   Typography: Source Serif 4 + Inter
   ============================================ */

:root {

  /* ---- SURFACES ---- */
  /* White dominates (90%+). Alt surfaces add rhythm without color. */
  --color-bg:             #FFFFFF;     /* Primary canvas */
  --color-bg-alt:         #F9F8F8;     /* Alternate sections — cool off-white */
  --color-bg-warm:        #FAF8F8;     /* Warm off-white — testimonials, quotes */
  --color-bg-dark:        #1A1A1A;     /* Dark sections — footer, CTA bands */
  --color-bg-dark-alt:    #242424;     /* Slightly lighter dark — card on dark bg */

  /* ---- TEXT ---- */
  --color-text:           #1A1A1A;     /* Near-black — headings and body */
  --color-text-muted:     #525252;     /* Medium gray — secondary, captions */
  --color-text-subtle:    #A3A3A3;     /* Light gray — placeholders, disabled */
  --color-text-light:     #D4D4D4;     /* Very light — decorative numbers, watermarks */

  /* ---- ACCENT — BURGUNDY (10% max) ---- */
  /* Burgundy is the single accent color. Used on: primary CTA, eyebrow, */
  /* active nav, star icons, links on hover. Never as a large surface. */
  --color-accent:         #470101;     /* Burgundy — primary accent */
  --color-accent-hover:   #350100;     /* Deep burgundy — hover states */
  --color-accent-light:   #F7EDED;     /* Barely-there burgundy tint — selected, hover bg */
  --color-accent-muted:   #6B2A2A;     /* Softer burgundy — secondary links, icons */
  --color-accent-wash:    #FBF5F5;     /* Ultra-light burgundy wash — subtle card bg */

  /* ---- DARK BACKGROUND PALETTE ---- */
  /* For footer, dark CTA bands, dark hero variants. */
  --color-accent-on-dark:  #D4A0A0;    /* Soft rose on dark bg */
  --color-text-on-dark:    #FFFFFF;    /* Primary text on dark */
  --color-text-muted-dark: #A3A3A3;    /* Muted text on dark */
  --color-border-dark:     #2A2A2A;    /* Subtle dividers on dark */
  --color-border-dark-alt: #3D3D3D;    /* Stronger dividers on dark */

  /* ---- BORDERS & DIVIDERS ---- */
  --color-border:         #E5E5E5;     /* Default — cards, inputs, dividers */
  --color-border-strong:  #D4D4D4;     /* Stronger — active inputs, emphasis */
  --color-ghost-hover:    #F5F5F5;     /* Ghost button hover bg */

  /* ---- FUNCTIONAL ---- */
  /* Strictly for UI states. Never decorative. */
  --color-success:        #059669;     /* Form confirmed, green */
  --color-success-light:  #ECFDF5;     /* Success background tint */
  --color-warning:        #D97706;     /* Important notices */
  --color-warning-light:  #FFFBEB;     /* Warning background tint */
  --color-error:          #DC2626;     /* Validation errors */
  --color-error-light:    #FEF2F2;     /* Error background tint */

  /* ---- OVERLAY ---- */
  --overlay-light:        rgba(255, 255, 255, 0.6);  /* Image text overlay */
  --overlay-dark:         rgba(26, 26, 26, 0.5);     /* Modal backdrop */
  --overlay-dark-heavy:   rgba(26, 26, 26, 0.75);    /* Image text overlay on dark */

  /* ---- TYPOGRAPHY ---- */
  --font-display:   'Source Serif 4', Georgia, serif;
  --font-body:      'Inter', system-ui, sans-serif;

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

  /* --- FONT WEIGHTS --- */
  --font-weight-light:     300;
  --font-weight-normal:    400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;

  /* --- LINE HEIGHTS --- */
  --line-height-none:     1;
  --line-height-tight:    1.2;
  --line-height-snug:     1.375;
  --line-height-normal:   1.5;
  --line-height-relaxed:  1.75;

  /* --- LETTER SPACING --- */
  --tracking-tight:   -0.02em;
  --tracking-normal:   0em;
  --tracking-wide:     0.05em;
  --tracking-widest:   0.15em;

  /* ---- SPACING ---- */
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-14:  3.5rem;    /* 56px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */

  /* ---- LAYOUT ---- */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1280px;
  --container-2xl:  1536px;

  /* ---- BORDERS / RADIUS ---- */
  --radius-sm:   0.5rem;    /*  8px — tags, badges, small inputs */
  --radius-md:   0.75rem;   /* 12px — buttons, input fields */
  --radius-lg:   1rem;      /* 16px — small cards, dropdowns */
  --radius-xl:   1.25rem;   /* 20px — cards, modals */
  --radius-2xl:  1.5rem;    /* 24px — large cards, image containers */
  --radius-3xl:  2rem;      /* 32px — hero images, feature blocks */
  --radius-full: 9999px;    /* Pill shape — CTAs, tags */

  /* ---- SHADOWS ---- */
  /* Soft, diffused shadows — Rhode-inspired warmth */
  --shadow-sm:  0 1px 3px 0 rgb(71 1 1 / 0.04), 0 1px 2px -1px rgb(0 0 0 / 0.03);
  --shadow-md:  0 4px 12px -2px rgb(71 1 1 / 0.06), 0 2px 6px -2px rgb(0 0 0 / 0.04);
  --shadow-lg:  0 12px 28px -6px rgb(71 1 1 / 0.08), 0 4px 12px -4px rgb(0 0 0 / 0.04);
  --shadow-xl:  0 24px 48px -12px rgb(71 1 1 / 0.12), 0 8px 16px -8px rgb(0 0 0 / 0.06);
  --shadow-glow: 0 0 0 1px rgb(71 1 1 / 0.03), 0 8px 40px -8px rgb(71 1 1 / 0.1);
  --shadow-hover: 0 16px 40px -8px rgb(71 1 1 / 0.1), 0 4px 12px -4px rgb(0 0 0 / 0.04);

  /* ---- EASING CURVES ---- */
  /* Fluid, elastic — never mechanical, always alive */
  --ease-out:      cubic-bezier(0.0, 0.0, 0.2, 1.0);
  --ease-in-out:   cubic-bezier(0.4, 0.0, 0.2, 1.0);
  --ease-enter:    cubic-bezier(0.0, 0.0, 0.3, 1.0);
  --ease-brand:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-elastic:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:   cubic-bezier(0.25, 0.1, 0.25, 1.0);
  --ease-silk:     cubic-bezier(0.19, 1, 0.22, 1);

  /* ---- TRANSITIONS ---- */
  --transition-fast:    180ms;
  --transition-base:    300ms;
  --transition-slow:    500ms;
  --transition-enter:   700ms;
  --transition-page:    400ms;
  --transition-hero:    1000ms;
  --transition-fluid:   800ms;

}