/* ==========================================================================
   RPEES MILLENNIUM STAY INN — DESIGN TOKENS
   Every colour, size, duration and easing in the site resolves here.
   Nothing downstream may hardcode a hex value or a pixel font-size.
   ========================================================================== */

:root {

  /* ---------------------------------------------------------------
     01. COLOUR — brand
     --------------------------------------------------------------- */
  --c-primary:        #431A00;   /* Deep Earth Brown  */
  --c-secondary:      #002E07;   /* Deep Forest Green */
  --c-accent:         #3E97C7;   /* Mountain Sky Blue */

  /* Supporting */
  --c-ivory:          #F7F3EA;
  --c-white:          #FCFAF5;
  --c-mist:           #E8ECE9;
  --c-charcoal:       #1C1C18;
  --c-sand:           #D8C6A5;

  /* Derived — mixed from the brand three, never invented */
  --c-primary-deep:   #2B1000;   /* brown pushed darker: overlays, hover  */
  --c-primary-soft:   #6B3216;   /* brown lifted: hairlines on ivory      */
  --c-forest-deep:    #041A08;   /* footer floor, darkest surface         */
  --c-forest-lift:    #0A3312;   /* raised block inside a forest section   */
  --c-bronze:         #B08D4F;   /* the divider line. sand, weighted       */
  --c-bronze-soft:    rgba(176, 141, 79, .34);

  /* Ink — text colour by surface */
  --ink-strong:       var(--c-charcoal);
  --ink:              #3A3A32;
  --ink-muted:        #6E6C60;
  --ink-on-dark:      var(--c-ivory);
  --ink-on-dark-mute: rgba(247, 243, 234, .68);

  /* Surfaces */
  --bg-page:          var(--c-white);
  --bg-raised:        var(--c-ivory);
  --bg-mist:          var(--c-mist);
  --bg-dark:          var(--c-secondary);
  --bg-darkest:       var(--c-forest-deep);

  /* Hairlines */
  --line:             rgba(28, 28, 24, .14);
  --line-soft:        rgba(28, 28, 24, .08);
  --line-on-dark:     rgba(247, 243, 234, .20);
  --line-on-dark-soft:rgba(247, 243, 234, .10);

  /* Atmospheric scrims — reused on every full-bleed image */
  --scrim-bottom:     linear-gradient(to top, rgba(4,22,8,.86) 0%, rgba(4,22,8,.42) 34%, transparent 68%);
  --scrim-top:        linear-gradient(to bottom, rgba(4,22,8,.58) 0%, transparent 46%);
  --scrim-full:       linear-gradient(to bottom, rgba(4,22,8,.40), rgba(4,22,8,.62));
  --vignette:         radial-gradient(115% 85% at 50% 45%, transparent 42%, rgba(4,22,8,.44) 100%);

  /* Focus — always visible, never removed */
  --focus:            var(--c-accent);
  --focus-ring:       0 0 0 2px var(--c-white), 0 0 0 4px var(--c-accent);
  --focus-ring-dark:  0 0 0 2px var(--c-forest-deep), 0 0 0 4px var(--c-accent);


  /* ---------------------------------------------------------------
     02. TYPE
     Display : Cormorant Garamond  — statements, never below 20px
     Body    : Manrope             — everything readable
     Utility : JetBrains Mono      — labels, numbering, data
     --------------------------------------------------------------- */
  --font-display: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --font-body:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-util:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Fluid scale. Each step is clamp(min, preferred, max) — no media queries
     needed for type, which is why responsive.css stays small. */
  --t-display-xl: clamp(3.4rem,  9.2vw, 8.5rem);   /* hero / final CTA only  */
  --t-display-l:  clamp(2.6rem,  5.6vw, 5.0rem);   /* section statements     */
  --t-display-m:  clamp(2.0rem,  3.6vw, 3.1rem);   /* page H1, sub-statements*/
  --t-display-s:  clamp(1.5rem,  2.2vw, 2.0rem);   /* card and room titles   */

  --t-lede:       clamp(1.05rem, 1.15vw, 1.25rem);
  --t-body:       1rem;
  --t-small:      0.875rem;
  --t-label:      0.6875rem;                        /* mono, uppercase       */

  --lh-display:   1.00;
  --lh-heading:   1.16;
  --lh-body:      1.68;
  --lh-tight:     1.35;

  --ls-display:  -0.012em;
  --ls-body:      0em;
  --ls-label:     0.24em;
  --ls-button:    0.14em;

  --fw-display:   500;      /* Cormorant reads best at 500 for statements */
  --fw-body:      400;
  --fw-medium:    500;
  --fw-bold:      700;


  /* ---------------------------------------------------------------
     03. SPACE
     --------------------------------------------------------------- */
  --s-1:  4px;   --s-2:  8px;   --s-3: 12px;   --s-4: 16px;
  --s-5: 24px;   --s-6: 32px;   --s-7: 48px;   --s-8: 64px;
  --s-9: 96px;   --s-10:128px;  --s-11:176px;  --s-12:240px;

  /* Section rhythm. Dark sections breathe wider than light ones. */
  --section-y:      clamp(72px, 11vh, 160px);
  --section-y-wide: clamp(104px, 16vh, 224px);

  /* Container */
  --container:        1440px;
  --container-narrow:  860px;   /* editorial prose — max ~72ch */
  --container-wide:   1760px;
  --gutter:           clamp(20px, 5vw, 88px);


  /* ---------------------------------------------------------------
     04. FORM
     --------------------------------------------------------------- */
  --radius:      2px;    /* near-sharp. editorial, not app-like */
  --radius-lg:   4px;
  --radius-pill: 999px;

  --border-hair: 1px;

  --btn-h:       56px;
  --btn-h-sm:    46px;
  --btn-px:      32px;

  --nav-h:       84px;
  --nav-h-sm:    68px;

  --shadow-soft: 0 2px 24px rgba(4, 22, 8, .07);
  --shadow-lift: 0 18px 48px rgba(4, 22, 8, .16);


  /* ---------------------------------------------------------------
     05. MOTION
     Durations and easings are tokens so the whole site can be slowed
     or sharpened from one place.
     --------------------------------------------------------------- */
  --d-fast:   .22s;
  --d-base:   .42s;
  --d-slow:   .9s;
  --d-reveal: 1.1s;

  --e-out:     cubic-bezier(.22, .61, .36, 1);
  --e-in-out:  cubic-bezier(.65, .05, .36, 1);
  --e-soft:    cubic-bezier(.16, 1, .3, 1);   /* the site's signature ease */

  --z-base: 1;  --z-sticky: 40;  --z-nav: 60;  --z-menu: 80;  --z-loader: 100;
}

/* Reduced motion: one attribute, set once by app.js. */
[data-motion="reduced"] {
  --d-fast: .001s;  --d-base: .001s;  --d-slow: .001s;  --d-reveal: .001s;
}