/**
 * Capricho Novias — CSS Custom Properties
 * Child theme of Kadence
 *
 * Breakpoint reference (mobile-first):
 *   --bp-sm  : 480px   (small phones)
 *   --bp-md  : 768px   (tablets / large phones landscape)
 *   --bp-lg  : 1024px  (small laptops / tablets landscape)
 *   --bp-xl  : 1280px  (desktops)
 *   --bp-2xl : 1440px  (wide screens)
 */

:root {

  /* ─────────────────────────────────────────
     COLORS
  ───────────────────────────────────────── */
  --white       : #ffffff;
  --cream       : #faf7f4;
  --dark        : #1a1a1a;
  --gray        : #666666;
  --gray-light  : #f5f5f5;
  --rose        : #c4879a;
  --rose-light  : #f0e0e5;
  --line        : #e8e0dc;

  /* Derived / semantic aliases */
  --color-bg          : var(--cream);
  --color-bg-alt      : var(--white);
  --color-bg-dark     : var(--dark);
  --color-text        : var(--dark);
  --color-text-muted  : var(--gray);
  --color-accent      : var(--rose);
  --color-accent-light: var(--rose-light);
  --color-border      : var(--line);

  /* ─────────────────────────────────────────
     TYPOGRAPHY — FAMILIES
  ───────────────────────────────────────── */
  --font-heading : 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body    : 'Jost', 'Helvetica Neue', Arial, sans-serif;

  /* ─────────────────────────────────────────
     TYPOGRAPHY — WEIGHTS
  ───────────────────────────────────────── */
  --fw-light    : 300;
  --fw-regular  : 400;
  --fw-medium   : 500;
  --fw-semibold : 600;

  /* ─────────────────────────────────────────
     TYPOGRAPHY — SIZE SCALE (fluid clamp)
     Formula: clamp(min, preferred, max)
  ───────────────────────────────────────── */
  --text-xs   : clamp(0.6875rem, 0.65rem + 0.2vw,  0.75rem);   /*  11 → 12px */
  --text-sm   : clamp(0.8125rem, 0.78rem + 0.2vw,  0.875rem);  /*  13 → 14px */
  --text-base : clamp(0.9375rem, 0.9rem  + 0.2vw,  1rem);      /*  15 → 16px */
  --text-md   : clamp(1rem,      0.95rem + 0.3vw,  1.125rem);  /*  16 → 18px */
  --text-lg   : clamp(1.125rem,  1rem    + 0.6vw,  1.375rem);  /*  18 → 22px */
  --text-xl   : clamp(1.375rem,  1.2rem  + 0.9vw,  1.75rem);   /*  22 → 28px */
  --text-2xl  : clamp(1.75rem,   1.5rem  + 1.2vw,  2.25rem);   /*  28 → 36px */
  --text-3xl  : clamp(2.25rem,   1.8rem  + 2vw,    3rem);      /*  36 → 48px */
  --text-4xl  : clamp(2.75rem,   2rem    + 3.5vw,  4rem);      /*  44 → 64px */
  --text-5xl  : clamp(3.5rem,    2.5rem  + 4.5vw,  5.5rem);    /*  56 → 88px */

  /* ─────────────────────────────────────────
     TYPOGRAPHY — LINE HEIGHTS
  ───────────────────────────────────────── */
  --lh-tight  : 1.1;
  --lh-snug   : 1.25;
  --lh-base   : 1.6;
  --lh-relaxed: 1.75;

  /* ─────────────────────────────────────────
     TYPOGRAPHY — LETTER SPACING
  ───────────────────────────────────────── */
  --ls-tight  : -0.02em;
  --ls-base   : 0em;
  --ls-wide   : 0.08em;
  --ls-wider  : 0.15em;
  --ls-widest : 0.25em;

  /* ─────────────────────────────────────────
     SPACING SCALE
     Base unit: 8px
  ───────────────────────────────────────── */
  --spacing-2xs : 0.25rem;   /*  4px */
  --spacing-xs  : 0.5rem;    /*  8px */
  --spacing-sm  : 0.75rem;   /* 12px */
  --spacing-md  : 1rem;      /* 16px */
  --spacing-lg  : 1.5rem;    /* 24px */
  --spacing-xl  : 2rem;      /* 32px */
  --spacing-2xl : 3rem;      /* 48px */
  --spacing-3xl : 4rem;      /* 64px */
  --spacing-4xl : 6rem;      /* 96px */
  --spacing-5xl : 8rem;      /* 128px */

  /* ─────────────────────────────────────────
     SECTION PADDING (vertical rhythm)
  ───────────────────────────────────────── */
  --section-pad-y     : clamp(4rem, 6vw, 7rem);
  --section-pad-y-lg  : clamp(6rem, 9vw, 10rem);

  /* ─────────────────────────────────────────
     CONTAINER MAX-WIDTHS
  ───────────────────────────────────────── */
  --container-xs   : 36rem;    /* 576px  — narrow text columns */
  --container-sm   : 48rem;    /* 768px  — compact layouts     */
  --container-md   : 64rem;    /* 1024px — default content     */
  --container-lg   : 80rem;    /* 1280px — wide layouts        */
  --container-xl   : 90rem;    /* 1440px — max site width      */
  --container-pad  : clamp(1rem, 4vw, 2.5rem);

  /* ─────────────────────────────────────────
     BORDER RADIUS
  ───────────────────────────────────────── */
  --radius-none   : 0;
  --radius-sm     : 2px;
  --radius-md     : 4px;
  --radius-lg     : 8px;
  --radius-xl     : 16px;
  --radius-pill   : 9999px;
  --radius-circle : 50%;

  /* ─────────────────────────────────────────
     SHADOWS
  ───────────────────────────────────────── */
  --shadow-xs  : 0 1px 2px rgba(26, 26, 26, 0.06);
  --shadow-sm  : 0 2px 8px rgba(26, 26, 26, 0.08);
  --shadow-md  : 0 4px 20px rgba(26, 26, 26, 0.10);
  --shadow-lg  : 0 8px 40px rgba(26, 26, 26, 0.14);
  --shadow-xl  : 0 16px 64px rgba(26, 26, 26, 0.18);

  /* Coloured shadows */
  --shadow-rose: 0 4px 24px rgba(196, 135, 154, 0.30);

  /* Navbar scrolled state */
  --shadow-nav : 0 2px 24px rgba(26, 26, 26, 0.10);

  /* ─────────────────────────────────────────
     TRANSITIONS
  ───────────────────────────────────────── */
  --ease-in-out  : cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out     : cubic-bezier(0, 0, 0.2, 1);
  --ease-in      : cubic-bezier(0.4, 0, 1, 1);
  --ease-spring  : cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast   : 150ms;
  --duration-base   : 300ms;
  --duration-slow   : 500ms;
  --duration-slower : 800ms;

  --transition-base  : var(--duration-base) var(--ease-in-out);
  --transition-fast  : var(--duration-fast) var(--ease-out);
  --transition-slow  : var(--duration-slow) var(--ease-in-out);
  --transition-color : color var(--transition-base),
                       background-color var(--transition-base),
                       border-color var(--transition-base);

  /* ─────────────────────────────────────────
     Z-INDEX SCALE
  ───────────────────────────────────────── */
  --z-below    : -1;
  --z-base     : 0;
  --z-raised   : 10;
  --z-dropdown : 100;
  --z-sticky   : 200;
  --z-overlay  : 300;
  --z-modal    : 400;
  --z-toast    : 500;
  --z-tooltip  : 600;

  /* ─────────────────────────────────────────
     GRID / LAYOUT
  ───────────────────────────────────────── */
  --grid-gap        : clamp(1rem, 2vw, 1.5rem);
  --grid-gap-lg     : clamp(1.5rem, 3vw, 2.5rem);

  /* ─────────────────────────────────────────
     COMPONENT — NAVBAR
  ───────────────────────────────────────── */
  --nav-height       : 80px;
  --nav-height-scroll: 64px;

  /* ─────────────────────────────────────────
     COMPONENT — BUTTONS
  ───────────────────────────────────────── */
  --btn-pad-y       : 0.875rem;
  --btn-pad-x       : 2.25rem;
  --btn-pad-y-sm    : 0.625rem;
  --btn-pad-x-sm    : 1.5rem;
  --btn-font-size   : var(--text-xs);
  --btn-letter-space: var(--ls-wider);
  --btn-radius      : var(--radius-none);
  --btn-border-width: 1px;

  /* ─────────────────────────────────────────
     COMPONENT — FORM
  ───────────────────────────────────────── */
  --input-border-color : var(--line);
  --input-focus-color  : var(--rose);
  --input-pad-y        : 0.875rem;
  --input-font-size    : var(--text-sm);

  /* ─────────────────────────────────────────
     IMAGES / ASPECT RATIOS
  ───────────────────────────────────────── */
  --ratio-portrait   : 3 / 4;
  --ratio-landscape  : 3 / 2;
  --ratio-square     : 1 / 1;
  --ratio-wide       : 16 / 9;
}