/* ============================================================
   URBAN PHULKARI — Design Tokens  ·  "Phulkari Neon"
   A saturated, high-contrast palette drawn from real phulkari
   embroidery: madder crimson, marigold, fuchsia, saffron and
   peacock teal thread on deep aubergine cloth.
   ============================================================ */

/* ---- Brand constants (identical in both themes) ---- */
:root{
  /* thread colours */
  --th-fuchsia:   #E11D6E;
  --th-crimson:   #C2185B;
  --th-marigold:  #F79A0B;
  --th-saffron:   #FF6B2C;
  --th-gold:      #FFC53D;
  --th-peacock:   #0E9C8F;
  --th-indigo:    #4438CA;
  --th-aubergine: #2A0A26;

  /* legacy aliases kept so older rules keep resolving */
  --brand-gold:     #FFC53D;
  --brand-gold-lt:  #FFD97A;
  --brand-marigold: #F79A0B;
  --brand-rose:     #E11D6E;
  --brand-sage:     #0E9C8F;
  --brand-plum:     #2A0A26;

  /* signature gradients */
  --grad-hot:   linear-gradient(112deg, #E11D6E 0%, #FF6B2C 48%, #FFC53D 100%);
  --grad-warm:  linear-gradient(112deg, #FF6B2C 0%, #F79A0B 55%, #FFC53D 100%);
  --grad-jewel: linear-gradient(112deg, #4438CA 0%, #E11D6E 52%, #FF6B2C 100%);
  --grad-cool:  linear-gradient(112deg, #0E9C8F 0%, #4438CA 100%);

  /* Typography */
  --f-display: "Fraunces", "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --f-body:    "Jost", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Fluid type scale */
  --t-xs:   clamp(0.68rem, 0.64rem + 0.18vw, 0.78rem);
  --t-sm:   clamp(0.80rem, 0.76rem + 0.20vw, 0.92rem);
  --t-base: clamp(0.95rem, 0.90rem + 0.26vw, 1.09rem);
  --t-md:   clamp(1.08rem, 1.00rem + 0.42vw, 1.32rem);
  --t-lg:   clamp(1.35rem, 1.16rem + 0.92vw, 2.05rem);
  --t-xl:   clamp(1.85rem, 1.42rem + 2.05vw, 3.35rem);
  --t-2xl:  clamp(2.45rem, 1.62rem + 3.95vw, 5.40rem);
  --t-3xl:  clamp(3.10rem, 1.55rem + 7.10vw, 8.60rem);

  /* Spacing rhythm */
  --s-1: 0.35rem;  --s-2: 0.65rem;  --s-3: 1rem;    --s-4: 1.5rem;
  --s-5: 2.25rem;  --s-6: 3.25rem;  --s-7: 4.75rem; --s-8: 7rem;
  --s-9: clamp(4.5rem, 3rem + 7vw, 11rem);

  /* Layout */
  --wrap:      min(1440px, 100% - clamp(1.5rem, 5vw, 7rem));
  --wrap-tight:min(1080px, 100% - clamp(1.5rem, 5vw, 7rem));
  --wrap-text: min(760px, 100% - 2.5rem);
  --header-h:  clamp(68px, 6vw, 92px);

  /* Radii */
  --r-xs: 4px; --r-sm: 10px; --r-md: 18px; --r-lg: 28px; --r-xl: 44px; --r-pill: 999px;

  /* Motion */
  --e-out:   cubic-bezier(0.16, 1, 0.30, 1);
  --e-in-out:cubic-bezier(0.76, 0, 0.24, 1);
  --e-spring:cubic-bezier(0.34, 1.56, 0.64, 1);
  --d-fast: 0.18s; --d-mid: 0.38s; --d-slow: 0.62s; --d-xslow: 1s;

  /* Z layers */
  --z-bg: 0; --z-mid: 10; --z-sticky: 60; --z-header: 90;
  --z-menu: 100; --z-cursor: 900; --z-overlay: 950; --z-loader: 990;
}

/* ============================ LIGHT ============================ */
:root{
  color-scheme: light;

  --bg:          #FFF8F4;   /* warm blush paper  */
  --bg-alt:      #FDEDE6;   /* soft apricot      */
  --bg-deep:     #F9DFD4;
  --bg-elev:     #FFFFFF;
  --bg-invert:   #21061D;   /* deep aubergine    */

  --text:        #29081F;
  --text-soft:   #5C3350;
  --text-mut:    #8A6579;
  --text-invert: #FFF8F4;

  /* accent = fuchsia (contrast-safe on blush), hi = saffron */
  --accent:      #C81260;
  --accent-hi:   #E11D6E;
  --accent-2:    #C4700A;   /* marigold, darkened for light bg */
  --accent-3:    #0B7A70;   /* peacock */
  --accent-soft: #FBD3E2;
  --accent-wash: rgba(225,29,110,0.075);

  --line:        rgba(41,8,31,0.14);
  --line-soft:   rgba(41,8,31,0.075);
  --line-strong: rgba(41,8,31,0.30);

  --surface:     rgba(41,8,31,0.038);
  --surface-hi:  rgba(41,8,31,0.075);
  --glass:       rgba(255,248,244,0.74);
  --glass-line:  rgba(41,8,31,0.11);

  --shadow-sm: 0 1px 2px rgba(90,20,60,.06), 0 4px 14px rgba(90,20,60,.07);
  --shadow-md: 0 2px 6px rgba(90,20,60,.07), 0 18px 46px rgba(90,20,60,.12);
  --shadow-lg: 0 4px 12px rgba(90,20,60,.09), 0 42px 90px rgba(90,20,60,.18);
  --shadow-glow: 0 12px 40px rgba(225,29,110,.28);

  --img-filter: saturate(1.06) contrast(1.02);
  --grain-op: 0.26;

  --halo-1: rgba(225,29,110,0.22);
  --halo-2: rgba(255,107,44,0.20);
  --halo-3: rgba(14,156,143,0.16);

  --scrim: linear-gradient(180deg, rgba(33,6,29,.60) 0%, rgba(33,6,29,.14) 34%, rgba(33,6,29,.52) 68%, rgba(33,6,29,.92) 100%);
}

/* ============================ DARK ============================ */
:root[data-theme="dark"]{
  color-scheme: dark;

  --bg:          #12040F;   /* aubergine black   */
  --bg-alt:      #1B0718;
  --bg-deep:     #250B20;
  --bg-elev:     #1F0819;
  --bg-invert:   #FFF3EC;

  --text:        #FFF1E9;
  --text-soft:   #E4C6D6;
  --text-mut:    #B08FA2;
  --text-invert: #1A0616;

  --accent:      #FF4D8D;
  --accent-hi:   #FF8A3D;
  --accent-2:    #FFB43D;
  --accent-3:    #2FD3C0;
  --accent-soft: #5A0F33;
  --accent-wash: rgba(255,77,141,0.12);

  --line:        rgba(255,241,233,0.15);
  --line-soft:   rgba(255,241,233,0.075);
  --line-strong: rgba(255,241,233,0.34);

  --surface:     rgba(255,241,233,0.05);
  --surface-hi:  rgba(255,241,233,0.095);
  --glass:       rgba(18,4,15,0.70);
  --glass-line:  rgba(255,241,233,0.13);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.42);
  --shadow-md: 0 2px 8px rgba(0,0,0,.55), 0 20px 50px rgba(0,0,0,.6);
  --shadow-lg: 0 4px 14px rgba(0,0,0,.6), 0 48px 100px rgba(0,0,0,.72);
  --shadow-glow: 0 14px 46px rgba(255,77,141,.34);

  --img-filter: brightness(0.94) contrast(1.05) saturate(1.08);
  --grain-op: 0.38;

  --halo-1: rgba(255,77,141,0.22);
  --halo-2: rgba(255,138,61,0.18);
  --halo-3: rgba(47,211,192,0.14);

  --scrim: linear-gradient(180deg, rgba(10,2,9,.66) 0%, rgba(10,2,9,.18) 34%, rgba(10,2,9,.58) 68%, rgba(10,2,9,.95) 100%);
}

/* Follow the OS while the visitor has made no explicit choice */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#12040F; --bg-alt:#1B0718; --bg-deep:#250B20; --bg-elev:#1F0819; --bg-invert:#FFF3EC;
    --text:#FFF1E9; --text-soft:#E4C6D6; --text-mut:#B08FA2; --text-invert:#1A0616;
    --accent:#FF4D8D; --accent-hi:#FF8A3D; --accent-2:#FFB43D; --accent-3:#2FD3C0;
    --accent-soft:#5A0F33; --accent-wash:rgba(255,77,141,0.12);
    --line:rgba(255,241,233,0.15); --line-soft:rgba(255,241,233,0.075); --line-strong:rgba(255,241,233,0.34);
    --surface:rgba(255,241,233,0.05); --surface-hi:rgba(255,241,233,0.095);
    --glass:rgba(18,4,15,0.70); --glass-line:rgba(255,241,233,0.13);
    --shadow-sm:0 1px 2px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.42);
    --shadow-md:0 2px 8px rgba(0,0,0,.55), 0 20px 50px rgba(0,0,0,.6);
    --shadow-lg:0 4px 14px rgba(0,0,0,.6), 0 48px 100px rgba(0,0,0,.72);
    --shadow-glow:0 14px 46px rgba(255,77,141,.34);
    --img-filter: brightness(0.94) contrast(1.05) saturate(1.08);
    --grain-op:0.38;
    --halo-1:rgba(255,77,141,0.22); --halo-2:rgba(255,138,61,0.18); --halo-3:rgba(47,211,192,0.14);
    --scrim: linear-gradient(180deg, rgba(10,2,9,.66) 0%, rgba(10,2,9,.18) 34%, rgba(10,2,9,.58) 68%, rgba(10,2,9,.95) 100%);
  }
}

/* ============================================================
   SHARED COLOUR EFFECTS
   ============================================================ */

/* Gradient-filled text — used on every accent word */
.grad-text,
h1 .accent, h2 .accent, h3 .accent,
.ft__word .accent, .hero h1 .accent{
  background-image: var(--grad-hot);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.grad-text--cool{ background-image: var(--grad-cool); }
.grad-text--warm{ background-image: var(--grad-warm); }

/* split-text wraps every word in its own inline-block, so the word needs to
   carry the gradient as well or it renders as transparent-on-nothing */
h1 .accent .word, h2 .accent .word, h3 .accent .word,
.grad-text .word, .ft__word .accent .word{
  background-image: inherit;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* outline words must keep their stroke even inside a split heading */
h1 .outline .word, .hero h1 .outline .word{
  color: transparent; -webkit-text-fill-color: transparent;
  -webkit-text-stroke: inherit;
}

/* Gradient rule */
.grad-rule{
  height:2px; border:0; border-radius:2px;
  background-image: var(--grad-hot);
}

/* Gradient border card (uses a padded mask so the fill stays themed) */
.grad-ring{
  position:relative; isolation:isolate;
}
.grad-ring::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.4px;
  background-image: var(--grad-hot);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:0; transition: opacity .45s var(--e-out);
  pointer-events:none; z-index:1;
}
.grad-ring:hover::before{ opacity:1; }