/* ==========================================================
   SPC MAROC. Design Tokens
   Palette extracted from the brand logo:
   slate, travertine, beige wood, forest decking, brown plank,
   marble, dark green leaf.
   ========================================================== */

:root {
  /* Brand colors */
  --color-forest-900: #142A1F;
  --color-forest-700: #1F4030;
  --color-forest-500: #2D5A44;
  --color-forest-300: #4F8068;
  --color-forest-100: #D7E3DC;

  --color-sand-900: #6B5A3F;
  --color-sand-700: #9A8460;
  --color-sand-500: #C9B896;
  --color-sand-300: #E2D5B4;
  --color-sand-100: #F2EADA;

  --color-brass-700: #8A6F40;
  --color-brass-500: #A8895C;
  --color-brass-300: #C9AE7E;

  --color-terracotta-500: #B45A3C;
  --color-terracotta-300: #D38163;

  --color-charcoal-900: #1C1B19;
  --color-charcoal-700: #2E2D2A;
  --color-charcoal-500: #4A4843;

  --color-stone-700: #6B6862;
  --color-stone-500: #8A8782;
  --color-stone-300: #BFBCB4;
  --color-stone-100: #E8E5DD;

  --color-bone: #FAF8F4;
  --color-paper: #FFFFFF;

  /* Channel-only RGB triplets, paired with the hex tokens above.
     Use as: rgb(var(--rgb-bone) / 0.92). Kept in sync with the hex tokens. */
  --rgb-forest-900: 20 42 31;
  --rgb-forest-700: 31 64 48;
  --rgb-forest-500: 45 90 68;
  --rgb-forest-300: 79 128 104;
  --rgb-forest-100: 215 227 220;
  --rgb-charcoal-900: 28 27 25;
  --rgb-charcoal-700: 46 45 42;
  --rgb-charcoal-500: 74 72 67;
  --rgb-stone-700: 107 104 98;
  --rgb-stone-500: 138 135 130;
  --rgb-stone-300: 191 188 180;
  --rgb-stone-100: 232 229 221;
  --rgb-sand-900: 107 90 63;
  --rgb-sand-700: 154 132 96;
  --rgb-sand-500: 201 184 150;
  --rgb-sand-300: 226 213 180;
  --rgb-sand-100: 242 234 218;
  --rgb-brass-700: 138 111 64;
  --rgb-brass-500: 168 137 92;
  --rgb-brass-300: 201 174 126;
  --rgb-terracotta-500: 180 90 60;
  --rgb-terracotta-300: 211 129 99;
  --rgb-bone: 250 248 244;
  --rgb-paper: 255 255 255;

  /* Semantic aliases */
  --bg: var(--color-bone);
  --bg-elevated: var(--color-paper);
  --bg-deep: var(--color-charcoal-900);
  --bg-muted: var(--color-stone-100);

  --ink: var(--color-charcoal-900);
  --ink-soft: var(--color-charcoal-500);
  --ink-muted: var(--color-stone-700);
  --ink-inverse: var(--color-bone);

  --brand: var(--color-forest-700);
  --brand-strong: var(--color-forest-900);
  --brand-soft: var(--color-forest-100);

  --accent: var(--color-brass-500);
  --accent-strong: var(--color-brass-700);

  --line: var(--color-stone-300);
  --line-soft: var(--color-stone-100);

  /* Scrim and surface tints */
  --scrim-ink-15: rgb(var(--rgb-charcoal-900) / 0.15);
  --scrim-ink-25: rgb(var(--rgb-charcoal-900) / 0.25);
  --scrim-ink-30: rgb(var(--rgb-charcoal-900) / 0.30);
  --scrim-ink-45: rgb(var(--rgb-charcoal-900) / 0.45);
  --scrim-brand-55: rgb(var(--rgb-forest-900) / 0.55);
  --scrim-brand-25: rgb(var(--rgb-forest-900) / 0.25);
  --surface-bone-92: rgb(var(--rgb-bone) / 0.92);
  --surface-bone-95: rgb(var(--rgb-bone) / 0.95);
  --decor-brass-soft: rgb(var(--rgb-brass-500) / 0.20);
  --decor-brass-softer: rgb(var(--rgb-brass-500) / 0.18);
  --footer-divider: rgb(var(--rgb-stone-100) / 0.08);

  /* Type. Manrope mirrors the geometric lowercase wordmark of the SPC Maroc logo;
     Fraunces handles the editorial display headlines without competing with it. */
  --font-serif: "Fraunces", "Cormorant Garamond", "EB Garamond", Georgia, "Times New Roman", serif;
  --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 3rem;
  --fs-4xl: 4rem;
  --fs-5xl: 5.5rem;

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-base: 1.55;
  --lh-loose: 1.75;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.12em;
  --tracking-widest: 0.24em;

  /* Spacing scale */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* Layout */
  --container: 1240px;
  --container-tight: 960px;
  --container-wide: 1440px;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgb(var(--rgb-charcoal-900) / 0.06);
  --shadow-sm: 0 4px 12px rgb(var(--rgb-charcoal-900) / 0.06);
  --shadow-md: 0 12px 28px rgb(var(--rgb-charcoal-900) / 0.10);
  --shadow-lg: 0 24px 60px rgb(var(--rgb-charcoal-900) / 0.18);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 160ms;
  --dur-2: 280ms;
  --dur-3: 480ms;

  /* Header */
  --header-h: 88px;
}

@media (max-width: 720px) {
  :root {
    /* Compress the full upper ramp evenly so display headings, body-large,
       and intermediate sizes stay in proportion on small viewports. Without
       these, only h1/h2 shrank while h3/h4 stayed desktop-sized, giving an
       uneven visual hierarchy. */
    --fs-md:  1.0625rem;
    --fs-lg:  1.1875rem;
    --fs-xl:  1.4rem;
    --fs-2xl: 1.75rem;
    --fs-3xl: 2.25rem;
    --fs-4xl: 2.75rem;
    --fs-5xl: 3.25rem;
    --header-h: 72px;
  }
}