/* ==========================================================================
   FROZLY EGYPT — DESIGN TOKENS & BASE SYSTEM
   ========================================================================== */

@font-face {
  font-family: 'Manrope';
  src: local('Manrope');
  font-display: swap;
}

:root {
  /* ---- Color: named per brief, values tuned to premium/natural (not neon) ---- */
  --color-strawberry: #9C1F35;      /* deep premium berry red */
  --color-strawberry-dark: #6E1526; /* shadow / hover red */
  --color-strawberry-tint: #F3DFDE; /* faint red for hairlines on ivory */
  --color-green: #445E3C;           /* natural agricultural green */
  --color-green-tint: #DCE4D3;
  --color-ivory: #F4F0E7;           /* warm neutral background */
  --color-ivory-2: #ECE6D8;         /* secondary ivory panel */
  --color-dark: #1B1A17;            /* deep charcoal / near-black */
  --color-dark-2: #26241F;
  --color-grey: #8A8477;            /* cool-warm grey for metadata */
  --color-grey-line: #D9D2C2;       /* hairline on ivory */
  --color-white: #FFFFFF;
  --color-ice: #E7EEEA;             /* cold ice grey-green */

  /* ---- Type ---- */
  --font-display: 'Manrope', -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Manrope', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Manrope', 'Courier New', monospace;

  --fs-display-xl: clamp(2.8rem, 3rem + 4vw, 7.5rem);
  --fs-display-l:  clamp(2.3rem, 2rem + 3.2vw, 5.2rem);
  --fs-h1:         clamp(2rem, 1.6rem + 2vw, 3.4rem);
  --fs-h2:         clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
  --fs-h3:         clamp(1.25rem, 1.1rem + 0.8vw, 1.6rem);
  --fs-h4:         1.125rem;
  --fs-body-l:     clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
  --fs-body:       1rem;
  --fs-small:      0.875rem;
  --fs-eyebrow:    0.8rem;
  --fs-label:      0.75rem;
  --fs-meta:       0.7rem;

  --lh-tight: 1.02;
  --lh-snug: 1.15;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  --ls-eyebrow: 0.16em;
  --ls-label: 0.12em;

  /* ---- Spacing ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;
  --space-4xl: 12rem;

  /* ---- Layout ---- */
  --container-max: 1440px;
  --container-pad: clamp(1.25rem, 1rem + 2vw, 4rem);
  --grid-columns: 12;
  --grid-gap: clamp(1rem, 0.8rem + 1vw, 2rem);

  /* ---- Radius / Geometry (refined, not pill-shaped) ---- */
  --radius-s: 2px;
  --radius-m: 4px;

  /* ---- Motion ---- */
  --ease-editorial: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 220ms;
  --dur-med: 520ms;
  --dur-slow: 900ms;

  /* ---- Elevation (used sparingly) ---- */
  --shadow-card: 0 1px 0 rgba(27,26,23,0.06);
  --shadow-raised: 0 12px 32px rgba(27,26,23,0.14);

  --header-h: 84px;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: var(--font-body);
  background: var(--color-ivory);
  color: var(--color-dark);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }
ul { list-style: none; }

/* ---- Focus states (accessibility) ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-strawberry);
  outline-offset: 3px;
}

/* ---- Typography classes ---- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; line-height: var(--lh-tight); letter-spacing: -0.01em; }
.display-xl { font-size: var(--fs-display-xl); font-weight: 800; line-height: 0.94; letter-spacing: -0.02em; }
.display-l { font-size: var(--fs-display-l); font-weight: 800; line-height: 0.98; letter-spacing: -0.02em; }
h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); }
h4, .h4 { font-size: var(--fs-h4); font-weight: 700; }
.body-l { font-size: var(--fs-body-l); line-height: var(--lh-relaxed); font-weight: 400; }
.body { font-size: var(--fs-body); line-height: var(--lh-relaxed); }
.small { font-size: var(--fs-small); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--color-strawberry);
}
.eyebrow::before {
  content: '';
  width: 22px;
  height: 1px;
  background: currentColor;
  display: inline-block;
}
.eyebrow--on-dark { color: var(--color-ice); }

.tech-label {
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--color-grey);
}
.meta { font-size: var(--fs-meta); color: var(--color-grey); text-transform: uppercase; letter-spacing: var(--ls-label); }

.text-muted { color: var(--color-grey); }
.text-on-dark { color: var(--color-ivory); }
.text-strawberry { color: var(--color-strawberry); }
.text-green { color: var(--color-green); }

/* ---- Layout ---- */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.section { padding-block: var(--space-3xl); position: relative; }
.section--tight { padding-block: var(--space-2xl); }
.section--dark { background: var(--color-dark); color: var(--color-ivory); }
.section--green { background: var(--color-green); color: var(--color-ivory); }
.section--ivory-2 { background: var(--color-ivory-2); }
.section--border-top { border-top: 1px solid var(--color-grey-line); }

.grid-12 {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gap);
}

.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.gap-xs { gap: var(--space-xs); }
.gap-s { gap: var(--space-s); }
.gap-m { gap: var(--space-m); }
.gap-l { gap: var(--space-l); }

.hairline { height: 1px; background: var(--color-grey-line); border: 0; width: 100%; }
.hairline--dark { background: rgba(244,240,231,0.18); }

/* ---- Reveal-on-scroll (progressive enhancement) ---- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease-editorial), transform var(--dur-slow) var(--ease-editorial);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.no-js .reveal { opacity: 1; transform: none; }

/* ---- Skip link ---- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-dark);
  color: var(--color-ivory);
  padding: var(--space-s) var(--space-m);
  z-index: 999;
}
.skip-link:focus { left: var(--space-s); top: var(--space-s); }