/* ─────────────────────────────────────────────────────────────────────────
   AD.JUST Studio — Design System Tokens
   Dark cinematic, Dubai-based development marketing agency.
   ─────────────────────────────────────────────────────────────────────── */

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

@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Surfaces ─────────────────────────────────────────────────────── */
  --canvas:           #08050a;
  --surface-card:     #110d16;
  --surface-elevated: #1a1024;
  --surface-glass:        rgba(255,255,255,0.04);
  --surface-glass-border: rgba(255,255,255,0.08);

  /* ── Foreground ink ───────────────────────────────────────────────── */
  --ink:          #ffffff;
  --body:         #c4bdd0;
  --muted:        #7d7490;
  --muted-soft:   #4f4860;
  --on-dark-soft: #a89fc0;

  /* ── Accent (violet) ──────────────────────────────────────────────── */
  --accent:        #8b5cf6;
  --accent-glow:   #7c3aed;
  --accent-bright: #a78bfa;
  --accent-soft:   rgba(139,92,246,0.15);
  --accent-border: rgba(139,92,246,0.3);
  --accent-text:   #c4b5fd;

  /* ── Hairlines ────────────────────────────────────────────────────── */
  --hairline:        rgba(255,255,255,0.08);
  --hairline-soft:   rgba(255,255,255,0.04);
  --hairline-accent: rgba(139,92,246,0.25);

  /* ── Semantic ─────────────────────────────────────────────────────── */
  --success: #10b981;
  --warning: #f59e0b;
  --error:   #ef4444;

  /* ── Gradients ────────────────────────────────────────────────────── */
  --gradient-hero: radial-gradient(ellipse 80% 60% at 70% 40%, #5b21b6 0%, #3b1f6e 20%, #1a0a2e 50%, #08050a 100%);
  --gradient-glow: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(139,92,246,0.3) 0%, transparent 70%);
  --gradient-card: linear-gradient(135deg, rgba(139,92,246,0.08) 0%, rgba(255,255,255,0.02) 100%);
  --gradient-cta:  linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
  --gradient-overlay-bottom: linear-gradient(to bottom, rgba(8,5,10,0) 0%, rgba(8,5,10,0.85) 100%);

  /* ── Type families ────────────────────────────────────────────────── */
  --font-display: 'Michroma', 'Arial Narrow', sans-serif;
  --font-body:    'Poppins', system-ui, -apple-system, sans-serif;

  /* ── Spacing scale ────────────────────────────────────────────────── */
  --space-xxs:  4px;
  --space-xs:   8px;
  --space-sm:   12px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   32px;
  --space-xxl:  48px;
  --space-xxxl: 64px;
  --space-section: 120px;

  /* ── Radius ───────────────────────────────────────────────────────── */
  --radius-none:  0px;
  --radius-xs:    2px;
  --radius-sm:    4px;
  --radius-md:    6px;
  --radius-lg:    10px;
  --radius-xl:    16px;
  --radius-hero-frame: 28px;   /* signature ghost-frame */
  --radius-team-card:  40px;   /* portrait cards */
  --radius-pill:  9999px;
  --radius-full:  9999px;

  /* ── Motion ───────────────────────────────────────────────────────── */
  --ease:           cubic-bezier(0.16, 1, 0.3, 1);
  --dur-micro:      200ms;
  --dur-enter:      400ms;
  --dur-page:       600ms;

  /* ── Layout ───────────────────────────────────────────────────────── */
  --max-width: 1280px;
  --gutter:    24px;

  /* ── Shadows / glows ──────────────────────────────────────────────── */
  --glow-cta:        0 0 24px rgba(124,58,237,0.40);
  --glow-card-hover: 0 0 40px rgba(139,92,246,0.10);
  --focus-ring:      0 0 0 3px rgba(139,92,246,0.10);
}

/* ─── Base ─────────────────────────────────────────────────────────────── */

html, body {
  background: var(--canvas);
  color: var(--body);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ─── Semantic typography classes ──────────────────────────────────────── */

.t-display-xl,
.t-display-lg,
.t-display-md,
.t-display-sm,
.t-number-display,
.t-label-section,
.t-button,
.t-nav-link,
.t-caption {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--ink);
}

.t-display-xl     { font-size: 72px; line-height: 1.0;  letter-spacing: -1px; }
.t-display-lg     { font-size: 52px; line-height: 1.05; letter-spacing: -0.5px; }
.t-display-md     { font-size: 36px; line-height: 1.1;  letter-spacing: 0; }
.t-display-sm     { font-size: 24px; line-height: 1.2;  letter-spacing: 0.5px; }
.t-number-display { font-size: 64px; line-height: 1.0;  letter-spacing: 0; }
.t-label-section  { font-size: 13px; line-height: 1.4;  letter-spacing: 2px; }
.t-button         { font-size: 13px; line-height: 1;    letter-spacing: 1.5px; }
.t-nav-link       { font-size: 13px; line-height: 1.4;  letter-spacing: 0.5px; }

.t-caption {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.8px;
}

.t-title-md  { font-family: var(--font-body); font-weight: 500; font-size: 18px; line-height: 1.4; }
.t-body-md   { font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 1.6; color: var(--body); }
.t-body-sm   { font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 1.6; color: var(--body); }
.t-meta      { font-family: var(--font-body); font-weight: 400; font-size: 11px; line-height: 1.4; letter-spacing: 0.3px; color: var(--muted); }

/* ─── Headings (semantic) ─────────────────────────────────────────────── */
h1 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 72px; line-height: 1.0;  letter-spacing: -1px;   color: var(--ink); }
h2 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 52px; line-height: 1.05; letter-spacing: -0.5px; color: var(--ink); }
h3 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 36px; line-height: 1.1;  letter-spacing: 0;      color: var(--ink); }
h4 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 24px; line-height: 1.2;  letter-spacing: 0.5px;  color: var(--ink); }
p  { font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 1.6; color: var(--body); }
small { font-family: var(--font-body); font-weight: 400; font-size: 14px; color: var(--body); }