/* =============================================================================
   CASA MANA — Design Tokens
   Central source for all design values.
   Edit this file to update colours, type or spacing across the entire site.
   ============================================================================= */

:root {

  /* COLOURS
     Palette drawn from: limewashed plaster, sun-warmed stone, dry earth,
     olive leaf, walnut, pool water in shadow, faded linen.
  ---------------------------------------------------------------------------- */

  /* Backgrounds */
  --color-bg-primary:       #F5F0E6;   /* Warm chalk — main background */
  --color-bg-secondary:     #ECE6D5;   /* Light sand — alternate sections */
  --color-bg-tertiary:      #E3DBCA;   /* Deeper sand — subtle contrast */
  --color-bg-dark:          #1C1912;   /* Deep warm near-black — footer, dark sections */
  --color-bg-dark-soft:     #262218;   /* Slightly lighter dark */

  /* Overlays */
  --color-overlay-hero:     rgba(22, 19, 12, 0.38);
  --color-overlay-dark:     rgba(28, 25, 18, 0.55);

  /* Text */
  --color-text-primary:     #28201A;   /* Deep espresso */
  --color-text-secondary:   #6B5E52;   /* Warm mid-brown */
  --color-text-muted:       #9C8E82;   /* Muted warm — labels, captions */
  --color-text-light:       #F0EBE0;   /* Warm off-white — on dark backgrounds */
  --color-text-light-muted: rgba(240, 235, 224, 0.6);

  /* Accent */
  --color-accent:           #6E7358;   /* Muted olive */
  --color-accent-hover:     #575E44;   /* Deeper olive — hover */
  --color-accent-light:     #8C9172;   /* Lighter olive — subtle use */

  /* Borders */
  --color-border:           #D4CCB8;   /* Warm light */
  --color-border-strong:    #B8AD9A;   /* More visible */
  --color-border-dark:      rgba(240, 235, 224, 0.12);  /* On dark bg */


  /* TYPOGRAPHY
  ---------------------------------------------------------------------------- */

  --font-serif:   'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Scale */
  --text-xs:      0.6875rem;  /*  11px */
  --text-sm:      0.8125rem;  /*  13px */
  --text-base:    1rem;       /*  16px */
  --text-md:      1.125rem;   /*  18px */
  --text-lg:      1.25rem;    /*  20px */
  --text-xl:      1.5rem;     /*  24px */
  --text-2xl:     2rem;       /*  32px */
  --text-3xl:     2.625rem;   /*  42px */
  --text-4xl:     3.375rem;   /*  54px */
  --text-5xl:     4.375rem;   /*  70px */
  --text-6xl:     5.75rem;    /*  92px */

  /* Weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  /* Leading */
  --leading-tight:    1.08;
  --leading-snug:     1.22;
  --leading-normal:   1.55;
  --leading-relaxed:  1.72;
  --leading-loose:    1.92;

  /* Tracking */
  --tracking-tight:   -0.025em;
  --tracking-normal:   0em;
  --tracking-wide:     0.07em;
  --tracking-wider:    0.13em;
  --tracking-widest:   0.2em;


  /* 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-16:   4rem;      /*  64px */
  --space-20:   5rem;      /*  80px */
  --space-24:   6rem;      /*  96px */
  --space-28:   7rem;      /* 112px */
  --space-32:   8rem;      /* 128px */
  --space-40:   10rem;     /* 160px */
  --space-48:   12rem;     /* 192px */


  /* LAYOUT
  ---------------------------------------------------------------------------- */

  --container-wide:     1440px;
  --container-default:  1200px;
  --container-text:     680px;
  --container-narrow:   520px;

  --nav-height:           72px;
  --nav-height-scrolled:  58px;
  --nav-padding-x:        var(--space-10);


  /* BORDERS & RADIUS
  ---------------------------------------------------------------------------- */

  --radius-xs:  1px;
  --radius-sm:  2px;
  --radius-md:  4px;
  --radius-lg:  8px;


  /* SHADOWS
  ---------------------------------------------------------------------------- */

  --shadow-sm:  0 1px 4px rgba(28, 25, 18, 0.07);
  --shadow-md:  0 4px 20px rgba(28, 25, 18, 0.09);
  --shadow-lg:  0 8px 40px rgba(28, 25, 18, 0.12);


  /* TRANSITIONS
  ---------------------------------------------------------------------------- */

  --transition-fast:    110ms ease;
  --transition-base:    200ms ease;
  --transition-slow:    380ms ease;
  --transition-nav:     280ms ease;
  --transition-reveal:  700ms cubic-bezier(0.25, 0, 0, 1);


  /* Z-INDEX
  ---------------------------------------------------------------------------- */

  --z-below:    -1;
  --z-base:      0;
  --z-above:    10;
  --z-nav:     100;
  --z-overlay: 200;

}