/* ============================================================
   Keren Aliza Project — Design Tokens
   Colors + Type + Spacing + Shadows + Radii
   ============================================================ */

/* Webfonts — Nunito Sans is the brand workhorse, Lato is the
   editorial face used in news/article excerpts. Manrope is a
   substitute for the paid display face "Ermilov" (heavy
   geometric rounded sans) and Sacramento is a substitute for the
   personal-use script "Last Christmas". See README → fonts. */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,400;0,500;0,700;0,900;1,400;1,700&family=Lato:ital,wght@0,300;0,400;0,500;0,700;1,400&family=Manrope:wght@500;700;800&family=Sacramento&display=swap');

:root {
  /* ─── BRAND COLORS ─────────────────────────────────────── */
  --color-magenta:        #EE077D;   /* primary brand accent  */
  --color-magenta-soft:   #FDF294;   /* (legacy) — see yellow */
  --color-yellow:         #FFE820;   /* logo yellow            */
  --color-yellow-warm:    #FCC655;   /* menu gradient top      */
  --color-yellow-pale:    #F9EF9F;   /* menu gradient bottom   */
  --color-cream:          #FEEECC;   /* sidebar / surface 2    */
  --color-cream-soft:     #FDF294;   /* legacy soft yellow     */
  --color-navy-deep:      #190E83;   /* deep nav band          */
  --color-violet:         #564CD8;   /* secondary accent       */

  /* ─── INK & SURFACE ────────────────────────────────────── */
  --color-ink:            #171717;   /* default text / borders */
  --color-ink-strong:     #08080F;   /* display headings ink   */
  --color-ink-soft:       #4F4F4F;   /* meta / muted text      */
  --color-paper:          #FFFFFF;   /* default surface        */
  --color-paper-cool:     #F9FAFF;   /* surface-2 cool         */
  --color-paper-warm:     #FEEECC;   /* surface-2 warm         */
  --color-line:           #F1F1F1;   /* hairline divider       */
  --color-line-soft:      rgba(8,8,15,0.20);

  /* ─── SEMANTIC ─────────────────────────────────────────── */
  --color-fg:             var(--color-ink);
  --color-fg-2:           var(--color-ink-soft);
  --color-fg-inverse:     var(--color-paper);
  --color-accent:         var(--color-magenta);
  --color-accent-hover:   #D90671;
  --color-bg:             var(--color-paper);
  --color-bg-2:           var(--color-paper-cool);
  --color-bg-warm:        var(--color-cream);
  --color-bg-hero:        var(--color-ink);

  /* ─── SIGNATURE GRADIENTS ──────────────────────────────── */
  --gradient-menu:        linear-gradient(180deg, #FCC655 0%, #F9EF9F 100%);
  --gradient-navy:        linear-gradient(180deg, #190E83 0%, #08080F 100%);

  /* ─── TYPE FAMILIES ────────────────────────────────────── */
  --font-ui:              'Nunito Sans', system-ui, -apple-system, sans-serif;
  --font-editorial:       'Lato', Georgia, sans-serif;
  --font-display:         'Manrope', 'Nunito Sans', sans-serif;       /* ~Ermilov */
  --font-script:          'Sacramento', 'Brush Script MT', cursive;       /* ~Last Christmas */

  /* ─── TYPE SCALE (web defaults) ────────────────────────── */
  /* All headings tighten by -4% letter-spacing, ride at 120% LH */
  --h1-size: 40px;  --h1-lh: 1.2;  --h1-ls: -0.04em;  --h1-weight: 700;
  --h2-size: 26px;  --h2-lh: 1.2;  --h2-ls: -0.04em;  --h2-weight: 700;
  --h3-size: 20px;  --h3-lh: 1.2;  --h3-ls: -0.04em;  --h3-weight: 700;
  --h4-size: 16px;  --h4-lh: 1.2;  --h4-ls: -0.04em;  --h4-weight: 700;

  /* Body text rides at 160% LH (12px copy uses 140%) */
  --body-size: 16px;       --body-lh: 1.6;     --body-weight: 400;
  --body-sm-size: 14px;    --body-sm-lh: 1.6;
  --body-xs-size: 12px;    --body-xs-lh: 1.4;

  --display-jumbo-size: 110px;   /* big chapter headers (Ermilov) */
  --display-cover-size: 34px;    /* secondary display             */
  --display-cover-ls: 0.011em;

  /* ─── SPACING ──────────────────────────────────────────── */
  /* Figma uses 4/8/12/16/24/32/40/60/80 with 80 as the dominant
     section padding inside cards. */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  40px;
  --space-8:  60px;
  --space-9:  80px;

  /* ─── RADII ────────────────────────────────────────────── */
  /* Inputs/CTAs 12, large CTAs 16, cards 16, panels 24, hero 30 */
  --radius-sm:    4px;
  --radius-md:    12px;
  --radius-lg:    16px;
  --radius-xl:    24px;
  --radius-2xl:   30px;
  --radius-full:  9999px;

  /* ─── ELEVATION / SHADOWS ──────────────────────────────── */
  /* The brand is mostly flat; cards rely on color separation
     (cream sidebar against white body) more than shadow.
     These are used for product cards and floating tags. */
  --shadow-soft:    0 1px 2px rgba(8,8,15,0.04), 0 4px 16px rgba(8,8,15,0.06);
  --shadow-card:    0 2px 8px rgba(8,8,15,0.06), 0 12px 32px rgba(8,8,15,0.08);
  --shadow-pop:     0 8px 28px rgba(238,7,125,0.18);
  --shadow-inset:   inset 0 0 0 1px var(--color-line);

  /* ─── MOTION ───────────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in:    cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --ease-snap:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   360ms;
}

/* ============================================================
   Semantic type roles
   ============================================================ */
.h1, h1 {
  font-family: var(--font-ui);
  font-weight: var(--h1-weight);
  font-size: var(--h1-size);
  line-height: var(--h1-lh);
  letter-spacing: var(--h1-ls);
  color: inherit;
}
.h2, h2 {
  font-family: var(--font-ui);
  font-weight: var(--h2-weight);
  font-size: var(--h2-size);
  line-height: var(--h2-lh);
  letter-spacing: var(--h2-ls);
  color: inherit;
}
.h3, h3 {
  font-family: var(--font-ui);
  font-weight: var(--h3-weight);
  font-size: var(--h3-size);
  line-height: var(--h3-lh);
  letter-spacing: var(--h3-ls);
  color: inherit;
}
.h4, h4 {
  font-family: var(--font-ui);
  font-weight: var(--h4-weight);
  font-size: var(--h4-size);
  line-height: var(--h4-lh);
  letter-spacing: var(--h4-ls);
  color: inherit;
}
.body, p {
  font-family: var(--font-ui);
  font-weight: var(--body-weight);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  color: inherit;
}
.body-sm   { font-size: var(--body-sm-size); line-height: var(--body-sm-lh); }
.body-xs   { font-size: var(--body-xs-size); line-height: var(--body-xs-lh); }
.body-med  { font-weight: 500; }
.body-bold { font-weight: 700; }

/* The chapter-headline face — bold, geometric, mid-condensed.
   Used in UI-Kit spread headers ("Buttons", "Colors", "Header"). */
.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--display-jumbo-size);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-ink-strong);
}

/* The "Слушать и играть музыку души" tagline face. */
.script {
  font-family: var(--font-script);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.1;
  color: var(--color-yellow);
}

/* Editorial — used for news entries, article excerpts, dates */
.editorial {
  font-family: var(--font-editorial);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-fg);
}

/* ============================================================
   Atom primitives — buttons, links, dividers
   ============================================================ */
.btn {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-accent);
  background: transparent;
  color: var(--color-accent);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
.btn:hover {
  background: var(--color-accent);
  color: var(--color-paper);
}
.btn--solid {
  background: var(--color-accent);
  color: var(--color-paper);
}
.btn--solid:hover { background: var(--color-accent-hover); }
.btn--wide  { padding: 12px 32px; border-radius: var(--radius-lg); }

.link {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 16px;
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
}
.link:hover { color: var(--color-accent-hover); }

.divider          { height: 1px; background: var(--color-line-soft); width: 100%; }
.divider--paper   { background: var(--color-paper); }
.divider--ink     { background: var(--color-ink); opacity: 0.7; }