/* Homepage tokens — kept separate from the case-study tokens so each
   page has its own visual world. The homepage uses Gallient (display)
   + Urbanist (text), on a slightly different dark navy than the case
   study. */

@font-face {
  font-family: "Gallient";
  src: url("../assets/fonts/Gallient.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Surface ─────────────────────────────────────────────────────────── */
  --color-bg: #0b0e13;
  --color-bg-light: #ffffff;
  --color-surface-1: #14181f;

  /* ── Text ────────────────────────────────────────────────────────────── */
  --color-text: #ffffff;
  --color-text-on-light: #0b0e13;
  --color-text-muted: rgba(255, 255, 255, 0.78);
  --color-text-subtle: rgba(255, 255, 255, 0.6);
  --color-text-on-light-muted: rgba(11, 14, 19, 0.7);
  --color-border-light: rgba(0, 0, 0, 0.12);
  --color-border-dark: rgba(255, 255, 255, 0.12);

  /* ── Accents ─────────────────────────────────────────────────────────── */
  --color-accent: #8ad8ff;          /* highlight blue used inline */
  --color-accent-cta: #1c3fca;       /* "Explore Case Study" button */
  --color-accent-tira: #f11902;      /* Tira external link */
  --color-accent-teal: #00a99f;
  --color-accent-purple: #8c00ce;

  /* Card gradients per case study */
  --grad-hdfc: linear-gradient(135deg, rgba(239, 241, 246, 0.95), rgba(248, 249, 255, 0.85));
  --grad-tira: linear-gradient(135deg, rgba(253, 243, 244, 0.95), rgba(248, 225, 227, 0.95));
  --grad-adda: linear-gradient(135deg, rgba(235, 251, 245, 1), rgba(198, 232, 219, 0.95));

  /* ── Typography ──────────────────────────────────────────────────────── */
  --font-display: "Gallient", "Caveat", "Cormorant Garamond", Georgia, serif;
  --font-sans: "Urbanist", system-ui, -apple-system, "Segoe UI", "Helvetica Neue",
    Arial, sans-serif;

  --fw-extralight: 200;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-black: 900;

  /* Type scale (responsive via clamp). Figma desktop values noted. */
  --fs-display-xl: clamp(64px, 11vw, 160px);  /* "my story", "selected work", "what others say" */
  --fs-display-lg: clamp(44px, 6.5vw, 80px);  /* hero headline */
  --fs-headline: clamp(32px, 4vw, 60px);      /* footer "Let's bring..." */
  --fs-section-intro: clamp(20px, 2vw, 36px); /* clients section heading */
  --fs-eyebrow: clamp(18px, 1.4vw, 26px);     /* "Hi, I'm Shaman." */
  --fs-lead: clamp(18px, 1.4vw, 26px);        /* hero sub-paragraph */
  --fs-quote: clamp(18px, 1.5vw, 24px);
  --fs-body: 16px;
  --fs-body-lg: 18px;
  --fs-body-md: 20px;
  --fs-nav: 18px;
  --fs-meta: 14px;

  /* Line heights */
  --lh-display: 1.05;
  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-body: 1.55;
  --lh-loose: 1.7;

  /* ── Spacing scale ───────────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --content-max: 1440px;
  --content-gutter: clamp(24px, 6vw, 120px);

  /* ── Radii ───────────────────────────────────────────────────────────── */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 32px;

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 180ms;
  --duration-base: 320ms;
  --duration-slow: 600ms;
}