/* ==========================================================================
   THE NEIGHBOURHOOD PENRYN, Brand System & Custom Properties
   ========================================================================== */

:root {
  /* ---- Colour Palette ---- */
  /* Primary neutrals */
  --color-limestone:    #F5F0E8;
  --color-chalk:        #EDE8DE;
  --color-oat:          #E3DCD0;
  --color-bone:         #D9D2C4;
  --color-warm-white:   #FAF8F4;
  --color-white:        #FFFFFF;

  /* Darks */
  --color-ink:          #1A1A1A;
  --color-charcoal:     #2C2C2C;
  --color-graphite:     #3D3D3D;
  --color-slate:        #5A5A5A;
  --color-stone:        #8A8A82;

  /* Accents */
  --color-wine:         #722F37;
  --color-oxblood:      #5A1E24;
  --color-burgundy:     #8B3A42;
  --color-sage:         #7A8B6F;
  --color-olive:        #6B7B5E;
  --color-brass:        #C4A75B;
  --color-brass-muted:  #B89D4F;

  /* Refined accents, editorial register (v1.1, "Hustle, Calmly") */
  --color-aged-bordeaux: #5C2A2E;   /* single quiet accent, replaces wine in semantic use */
  --color-espresso:      #3A2A24;   /* warm dark brown */
  --color-terracotta:    #A86F52;   /* muted terracotta, very sparing use */
  --color-dusty-olive:   #6F7A5C;   /* dustier than sage/olive */
  --color-clay:          #C9A88B;   /* warm mid-tone for image overlays / details */

  /* Brand system (v2.0, Ernie's brief) */
  --color-brand:        #D81E35;   /* Pantone 2347 C, working sRGB value, confirm vs Bridge */
  --color-brand-dark:   #B0162A;   /* darker red for hover/active states */
  --color-paper:        #F5F3EF;   /* warm off-white base background */
  --color-charcoal-deep:#2B2B2B;   /* deep charcoal body text, not pure black */

  /* v2.2, oklch authoring (hex above is the fallback; modern browsers use these).
     Warmer, more controlled tonal steps for the "warm belonging" palette. */
  --color-brand:        oklch(58.5% 0.214 22);
  --color-brand-dark:   oklch(49% 0.190 22);
  --color-paper:        oklch(96.3% 0.006 95);
  --color-charcoal-deep:oklch(29% 0.004 70);
  --color-granite:      oklch(46% 0.008 80);   /* warm stone grey, rails, fine detail */

  /* Functional */
  --color-success:      #6B8F5E;
  --color-error:        #8B3A3D;   /* desaturated from #A63D40 for the calmer register */
  --color-focus:        var(--color-brand);

  /* ---- Semantic Tokens ---- */
  --bg-primary:         var(--color-paper);
  --bg-secondary:       var(--color-limestone);
  --bg-dark:            var(--color-ink);
  --bg-accent:          var(--color-chalk);
  --bg-overlay:         rgba(26, 26, 26, 0.65);

  --text-primary:       var(--color-charcoal-deep);
  --text-secondary:     var(--color-slate);
  --text-tertiary:      var(--color-stone);
  --text-inverse:       var(--color-warm-white);
  --text-accent:        var(--color-brand);

  --border-light:       var(--color-oat);
  --border-dark:        rgba(255, 255, 255, 0.12);

  /* ---- Typography ---- */
  --font-serif:         'Fraunces', 'Georgia', 'Times New Roman', serif;
  --font-sans:          'Inter', 'Helvetica Neue', 'Arial', sans-serif;
  --font-ui:            'Montserrat', 'Inter', 'Helvetica Neue', sans-serif;
  --font-mono:          'JetBrains Mono', 'Fira Code', monospace;

  /* Scale, fluid clamp values */
  --text-xs:            clamp(0.694rem, 0.66rem + 0.17vw, 0.8rem);
  --text-sm:            clamp(0.833rem, 0.78rem + 0.26vw, 1rem);
  --text-base:          clamp(1rem, 0.93rem + 0.35vw, 1.2rem);
  --text-md:            clamp(1.125rem, 1.04rem + 0.43vw, 1.375rem);
  --text-lg:            clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem);
  --text-xl:            clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
  --text-2xl:           clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  --text-3xl:           clamp(2.5rem, 1.8rem + 3.5vw, 5rem);
  --text-display:       clamp(3rem, 2rem + 5vw, 7rem);

  --leading-tight:      1.15;
  --leading-snug:       1.3;
  --leading-normal:     1.6;
  --leading-relaxed:    1.8;

  --tracking-tight:     -0.02em;
  --tracking-normal:    0;
  --tracking-wide:      0.04em;
  --tracking-wider:     0.08em;
  --tracking-widest:    0.16em;

  --weight-light:       300;
  --weight-regular:     400;
  --weight-medium:      500;
  --weight-semibold:    600;
  --weight-bold:        700;

  /* ---- Spacing ---- */
  --space-2xs:          clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);
  --space-xs:           clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
  --space-sm:           clamp(0.75rem, 0.6rem + 0.75vw, 1.25rem);
  --space-md:           clamp(1rem, 0.8rem + 1vw, 1.75rem);
  --space-lg:           clamp(1.5rem, 1.1rem + 2vw, 3rem);
  --space-xl:           clamp(2rem, 1.4rem + 3vw, 4.5rem);
  --space-2xl:          clamp(3rem, 2rem + 5vw, 7rem);
  --space-3xl:          clamp(4rem, 2.5rem + 7.5vw, 10rem);
  --space-4xl:          clamp(6rem, 4rem + 10vw, 14rem);     /* extreme breathing room */
  --space-section:      clamp(5rem, 3rem + 10vw, 12rem);
  --space-cinematic:    clamp(8rem, 5rem + 15vw, 20rem);    /* section-to-section transitions */

  /* ---- Layout ---- */
  --container-max:      1440px;
  --container-wide:     1200px;
  --container-content:  800px;
  --container-narrow:   640px;
  --gutter:             clamp(1.25rem, 1rem + 2vw, 3rem);
  --grid-gap:           clamp(1rem, 0.75rem + 1.25vw, 2rem);

  /* ---- Borders & Radius ---- */
  --radius-sm:          3px;
  --radius-md:          6px;
  --radius-lg:          12px;
  --radius-full:        9999px;

  /* ---- Shadows ---- */
  --shadow-sm:          0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md:          0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:          0 8px 30px rgba(0, 0, 0, 0.1);
  --shadow-xl:          0 16px 50px rgba(0, 0, 0, 0.14);

  /* ---- Transitions ---- */
  --ease-out:           cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out:        cubic-bezier(0.42, 0, 0.58, 1);
  --ease-smooth:        cubic-bezier(0.22, 1, 0.36, 1);
  --ease-quiet:         cubic-bezier(0.16, 1, 0.3, 1);      /* the "quiet ease", slow, almost still landing */
  --ease-pour:          cubic-bezier(0.22, 0.61, 0.18, 1);  /* "the pour", decelerates like liquid settling */
  --duration-fast:      180ms;
  --duration-base:      300ms;
  --duration-slow:      500ms;
  --duration-slower:    800ms;
  --duration-cinematic: 1200ms;                              /* for slow editorial fades */

  /* ---- Detail rules ---- */
  --rule-hairline:      1px solid var(--color-oat);          /* hairline under titles, dividers */

  /* ---- Z-Index ---- */
  --z-base:             1;
  --z-dropdown:         100;
  --z-sticky:           200;
  --z-overlay:          300;
  --z-modal:            400;
  --z-header:           500;
  --z-max:              9999;
}