/*
 * NeuSkin Clinic — design tokens (dark editorial reskin).
 * Ported from the "NeuSkin Clinic (standalone)" design: a warm near-black
 * ground (#141011) with cream type, mauve / dusty-rose accents, Google Sans Flex
 * for display and Hanken Grotesk for interface/body. English, LTR.
 * These values are the single source of truth.
 */

/*
 * Latin webfonts — locally hosted variable woff2 (no Google CDN dependency).
 * Google Sans Flex carries all English type (July 2026 — Playfair Display retired).
 */
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/HankenGrotesk-19e35a88.woff2") format("woff2");
}

/* Google Sans Flex — the English sans (July 2026). Self-hosted variable font
   (weights 100–1000), split into Google's latin / latin-ext subsets so
   Arabic-script text never falls through to it. */
@font-face {
  font-family: "Google Sans Flex";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("/assets/GoogleSansFlex-Latin-f6f73e10.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Google Sans Flex";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("/assets/GoogleSansFlex-LatinExt-7910d715.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/*
 * Arabic webfonts — locally hosted (Google removed Droid Arabic Kufi/Naskh;
 * their Google Fonts URLs 404). unicode-range limits them to Arabic script,
 * so Latin text on Arabic pages still renders in Google Sans Flex.
 */
@font-face {
  font-family: "Droid Arabic Kufi";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/DroidKufi-Regular-8e7a9d26.woff2") format("woff2"),
       url("/assets/DroidKufi-Regular-2526240b.ttf") format("truetype");
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+0660-0669;
}
@font-face {
  font-family: "Droid Arabic Kufi";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/DroidKufi-Bold-f43980ef.woff2") format("woff2"),
       url("/assets/DroidKufi-Bold-5e59759f.ttf") format("truetype");
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+0660-0669;
}
@font-face {
  font-family: "Droid Arabic Naskh";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/DroidNaskh-Regular-dd61a4fa.woff2") format("woff2"),
       url("/assets/DroidNaskh-Regular-073db017.ttf") format("truetype");
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+0660-0669;
}
@font-face {
  font-family: "Droid Arabic Naskh";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/DroidNaskh-Bold-68386730.woff2") format("woff2"),
       url("/assets/DroidNaskh-Bold-cab08df8.ttf") format("truetype");
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+0660-0669;
}

:root {
  /* Ground + surfaces */
  --ground:       #302427; /* warm near-black — page background */
  --surface:      #1b1517; /* faint alternating band */
  --card:         #241c1e; /* card background */
  --card-2:       #2a2024; /* raised / detail card */

  /* Type */
  --text:         #f4ece8; /* primary cream */
  --text-soft:    #ece2df; /* softer cream */
  --text-bright:  #f6efeb; /* brightest cream — headings */
  --text-muted:   #a99c98; /* muted taupe — secondary copy */
  --text-faint:   #8a7f7c; /* faint — captions, meta */

  /* Accents — mauve / dusty rose */
  --accent:       #9f8488; /* brand mauve — eyebrows, marks */
  --accent-soft:  #c9a6a9; /* softer rose — italic display accents */
  --accent-rose:  #c3a9ad; /* muted rose */
  --accent-pink:  #d8b9b6; /* light pink */
  --accent-dusty: #a98e92; /* dusty rose */
  --whatsapp:     #6fb98a; /* WhatsApp green glyph */

  /* Lines */
  --line:         rgba(236, 226, 223, .12);
  --line-soft:    rgba(236, 226, 223, .07);
  --line-strong:  rgba(236, 226, 223, .2);

  /* Buttons */
  --btn-bg:       #e6d7d3;
  --btn-bg-hover: #ffffff;
  --btn-ink:      #1a1416;

  /* Type families — Google Sans Flex carries the former serif slots too: the
     design's editorial voice, sturdier than a Didone at card sizes */
  --serif: "Google Sans Flex", "Hanken Grotesk", -apple-system, "Segoe UI", system-ui, sans-serif;
  --serif-text: "Google Sans Flex", "Hanken Grotesk", -apple-system, "Segoe UI", system-ui, sans-serif;
  --sans:  "Google Sans Flex", "Hanken Grotesk", -apple-system, "Segoe UI", system-ui, sans-serif;

  /* Layout */
  --maxw:          1280px;
  --gutter:        clamp(22px, 8vw, 130px);
  --space-section: clamp(56px, 7.5vw, 104px);
  --space-block:   clamp(34px, 5vw, 64px);
  --space-tight:   clamp(16px, 2.4vw, 26px);
  /* One shared height for every INTERIOR photo hero (clinic, protocols,
     outcomes, bridal, private care, technologies) — the home landing hero
     stays full-screen (100svh). July 2026 */
  --hero-h:        78vh;

  /* Motion */
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  .25s;
  --dur-mid:   .55s;
  --dur-slow:  1.1s;
}

/*
 * Arabic pages: Naskh carries display/headline type (the naskh-style serif the
 * design direction calls for), Kufi carries interface/body. Latin fallbacks
 * stay in the chain — unicode-range above keeps them owning Latin glyphs.
 */
html[lang="ar"] {
  --serif: "Droid Arabic Naskh", Tahoma, Verdana, serif;
  --serif-text: "Droid Arabic Naskh", Tahoma, Verdana, serif;
  --sans:  "Droid Arabic Kufi", "Google Sans Flex", "Hanken Grotesk", -apple-system, "Segoe UI", system-ui, sans-serif;
}

/* ============================================================
 * LIGHT MODE — warm ivory palette
 * Applied when <html data-theme="light"> is set by JS.
 * ============================================================ */
html[data-theme="light"] {
  /* Ground + surfaces — porcelain with white cards ("Porcelain & Mauve";
     anchored to the flat logo mauve #9F8488) */
  --ground:       #F7F2EE;   /* warm porcelain — page background          */
  --surface:      #EFE6E2;   /* rose-porcelain — alternating bands        */
  --card:         #FFFFFF;   /* card background — crisp white             */
  --card-2:       #F3EAE6;   /* raised / detail card                      */

  /* Type — mauve-ink */
  --text:         #2B2125;   /* deep mauve-ink (near-black, rose undertone) */
  --text-soft:    #3E3237;   /* slightly softer mauve-ink                  */
  --text-bright:  #2B2125;   /* headings — same deep mauve-ink             */
  --text-muted:   #746167;   /* muted mauve-grey — secondary copy          */
  --text-faint:   #9A8B90;   /* faint — captions, meta                     */

  /* Accents — logo mauve, deepened where it must read as text/CTA */
  --accent:       #8A6670;   /* logo mauve deepened — eyebrows, CTAs       */
  --accent-soft:  #AE949C;   /* soft mauve-taupe — italic display accents  */
  --accent-rose:  #C2A9AE;   /* muted rose                                 */
  --accent-pink:  #D9C2C3;   /* light pink                                 */
  --accent-dusty: #9F8488;   /* the logo mauve, pure — brand touches       */
  --whatsapp:     #3f9663;   /* WhatsApp green (darker for light bg)       */

  /* Lines — dusty-rose hairlines */
  --line:         rgba(138, 102, 112, .18);
  --line-soft:    rgba(138, 102, 112, .11);
  --line-strong:  rgba(138, 102, 112, .32);

  /* Buttons */
  --btn-bg:       #8A6670;
  --btn-bg-hover: #6F4F59;
  --btn-ink:      #FBF7F4;
}

/* Night / closing band stays dark even in light mode */
html[data-theme="light"] .night-band {
  --ground:       #2B2126;
  --text:         #F4EEE9;
  --text-soft:    #EBE0DC;
  --text-bright:  #F4EEE9;
  --text-muted:   #A8909A;
  --text-faint:   #9C8484;
  --line:         rgba(244, 238, 233, .12);
}