/*
 * CSS Design Tokens for sealaviesxm.com
 * Palette and typography derived from the existing Duda site.
 * Kept generic-named so AI editor and partials can reuse without re-learning.
 */

:root {
    /* Brand palette */
    --color-primary:      #00a5ff;   /* Sea La Vie blue (buttons, links, accents) */
    --color-primary-dark: #0090e0;   /* hover state */
    --color-primary-ink:  #ffffff;
    --color-teal:         #68ccd1;   /* outlined buttons */
    --color-teal-border:  #5bbdc8;
    --color-dark:         #212527;   /* hero overlay, logo bg */
    --color-footer-bg:    #1a1d1f;

    /* Neutrals */
    --color-ink:         #333333;
    --color-ink-soft:    #555555;
    --color-muted:       #949494;
    --color-bg:          #ffffff;
    --color-bg-alt:      #f4efe7;    /* warm sand — featured section bg */
    --color-bg-soft:     #faf7f2;    /* testimonial card bg */
    --color-border:      #e5e7eb;
    --color-success:     #16a34a;
    --color-danger:      #dc2626;

    /* Warm accent (editorial eyebrows, section dividers) */
    --color-gold:        #c8a97e;
    --color-gold-soft:   #e3d4b4;
    --color-gold-ink:    #8c6f47;

    /* Typography */
    --font-display: 'Playfair Display','Playfair Display Fallback',Georgia,serif;
    --font-heading: 'Oswald','Oswald Fallback',sans-serif;
    --font-italic:  'Playfair Display','Playfair Display Fallback',Georgia,serif;
    --font-body:    'Roboto','Roboto Fallback','Helvetica Neue',Arial,sans-serif;
    --font-mono:    ui-monospace,'SF Mono',Menlo,Consolas,monospace;

    /* Size scale */
    --fs-xs:  0.8125rem;    /* 13px */
    --fs-sm:  0.9375rem;    /* 15px */
    --fs-md:  1rem;         /* 16px */
    --fs-lg:  1.125rem;     /* 18px */
    --fs-xl:  1.375rem;     /* 22px */
    --fs-2xl: 1.75rem;      /* 28px */
    --fs-3xl: 2.25rem;      /* 36px */
    --fs-4xl: 3rem;         /* 48px */
    --fs-hero: clamp(2.5rem, 7vw, 5.3rem);  /* 42px → 85px */

    --lh-tight: 1.2;
    --lh-body:  1.7;

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;
    --space-10: 8rem;
    --space-11: 10rem;

    /* Section rhythm — responsive, luxury hospitality cadence */
    --section-y: clamp(5rem, 10vw, 9rem);
    --section-gap: clamp(3rem, 6vw, 5rem);

    /* Motion */
    --duration-fast:   0.25s;
    --duration-med:    0.6s;
    --duration-slow:   1.1s;
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-gentle: cubic-bezier(0.22, 0.8, 0.36, 1);

    /* Radii */
    --radius-button: 6px;
    --radius-button-tight: 2px;
    --radius-card:   8px;
    --radius-pill:   999px;

    /* Shadows */
    --shadow-sm:   0 1px 2px rgba(17,20,24,0.06);
    --shadow-md:   0 4px 16px rgba(0,0,0,0.1);
    --shadow-lg:   0 8px 30px rgba(0,0,0,0.25);
    --shadow-card: 0 3px 11px rgba(0,0,0,0.25);

    /* Layout */
    --container-max: 1200px;
    --container-wide: 1400px;

    /* z-index */
    --z-header: 100;
    --z-wa: 90;
}