/* ============================================================
   PROJECT DEFAULT DESIGN SYSTEM — use for all frontend work
   unless the user specifies otherwise.

   Avik Yadav — Design System Tokens
   Colors + Type foundations and semantic styles.
   Primary face: PP Neue Montreal (licensed) — substituted with
   DM Sans (Google Fonts). Doodle face: Caveat (Google Fonts).

   Source: Claude Design handoff bundle. Docs + reference template:
   docs/design-system/README.md
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300;1,9..40,400&family=Caveat:wght@600;700&display=swap');

:root {
  /* ---- Colour ---- */
  --color-bg:        #f5f5f0;
  --color-surface:   #efefea;
  --color-border:    #e0e0d8;
  --color-fg:        #0e0e0e;
  --color-fg-dark:   #1a1a1a;
  --color-muted:     #888880;

  /* dark / inverted section */
  --dark-bg:         #0e0e0e;
  --dark-fg:         #f5f5f0;
  --dark-muted:      #888880;
  --dark-border:     #2a2a28;
  --dark-doodle:     #6a6a64;

  /* ---- Type families ---- */
  --font-primary:    'PP Neue Montreal', 'DM Sans', sans-serif;
  --font-doodle:     'Caveat', cursive;

  /* ---- Type scale ---- */
  --text-hero:       clamp(34px, 8vw, 120px);
  --text-display:    clamp(24px, 5vw, 72px);
  --text-heading:    clamp(20px, 2.4vw, 24px);
  --text-nav:        13px;
  --text-body:       16px;
  --text-caption:    12px;

  /* ---- Font weights ---- */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-doodle:   700;

  /* ---- Letter spacing ---- */
  --tracking-display: -0.03em;
  --tracking-section: -0.025em;
  --tracking-heading: -0.015em;
  --tracking-caps:     0.1em;
  --tracking-nav:      0.08em;
  --tracking-body:     0em;

  /* ---- Line height ---- */
  --lh-display:  1.02;
  --lh-section:  1.08;
  --lh-heading:  1.2;
  --lh-body:     1.6;

  /* ---- Spacing (base-4) ---- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   16px;
  --space-4:   24px;
  --space-5:   32px;
  --space-6:   48px;
  --space-7:   64px;
  --space-8:   96px;
  --space-9:   128px;
  --space-10:  192px;

  /* ---- Layout ---- */
  --margin-page:  5vw;
  --max-width:    1440px;
  --max-reading:  680px;
  --grid-columns: 12;
  --grid-gutter:  var(--space-4);

  /* ---- Motion ---- */
  --ease-out-expo:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);
  --duration-fast:    0.3s;
  --duration-base:    0.6s;
  --duration-slow:    0.9s;
  --stagger:          60ms;
}

/* ============================================================
   Semantic base styles
   ============================================================ */

body {
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-primary);
  font-weight: var(--weight-light);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Hero / display */
.ds-hero {
  font-family: var(--font-primary);
  font-weight: var(--weight-light);
  font-size: var(--text-hero);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-display);
}

/* Section heading */
.ds-display, h1 {
  font-family: var(--font-primary);
  font-weight: var(--weight-light);
  font-size: var(--text-display);
  letter-spacing: var(--tracking-section);
  line-height: var(--lh-section);
}

/* Sub-heading */
.ds-heading, h2 {
  font-family: var(--font-primary);
  font-weight: var(--weight-regular);
  font-size: var(--text-heading);
  letter-spacing: var(--tracking-heading);
  line-height: var(--lh-heading);
}

/* Body */
.ds-body, p {
  font-family: var(--font-primary);
  font-weight: var(--weight-light);
  font-style: italic;
  font-size: var(--text-body);
  line-height: var(--lh-body);
  max-width: var(--max-reading);
}

/* Nav / label */
.ds-nav {
  font-family: var(--font-primary);
  font-weight: var(--weight-regular);
  font-size: var(--text-nav);
  letter-spacing: var(--tracking-nav);
  line-height: 1;
}

/* Caps micro-label */
.ds-caps {
  font-family: var(--font-primary);
  font-weight: var(--weight-regular);
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-muted);
}

/* Caption / meta */
.ds-caption {
  font-family: var(--font-primary);
  font-weight: var(--weight-regular);
  font-size: var(--text-caption);
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: var(--color-muted);
}

/* ============================================================
   Doodle layer (Caveat)
   ============================================================ */
.doodle {
  font-family: var(--font-doodle);
  font-weight: 700;
  color: var(--color-muted);
  display: inline-block;
  transform: rotate(-1.5deg);
  line-height: 1;
}
.doodle--sm  { font-size: 14px; font-weight: 600; transform: rotate(-2deg); }
.doodle--md  { font-size: 18px; font-weight: 700; transform: rotate(-1.5deg); }
.doodle--lg  { font-size: 26px; font-weight: 700; transform: rotate(-2.5deg); }
.doodle--tag {
  font-size: 14px; font-weight: 600;
  border: 1.5px solid var(--color-border);
  border-radius: 20px;
  padding: 2px 10px;
  transform: rotate(-1.5deg);
}

/* ============================================================
   Primitives
   ============================================================ */

/* Text link with animated underline (left→right in, right→left out) */
.ds-link {
  color: var(--color-fg);
  text-decoration: none;
  background-image: linear-gradient(var(--color-fg), var(--color-fg));
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size var(--duration-fast) var(--ease-out-expo);
}
.ds-link:hover { background-size: 100% 1px; }

/* CTA: caps text + animated arrow */
.ds-cta {
  font-family: var(--font-primary);
  font-weight: var(--weight-regular);
  font-size: var(--text-nav);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-fg);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.ds-cta .arrow { transition: transform var(--duration-fast) var(--ease-out-expo); }
.ds-cta:hover .arrow { transform: translateX(4px); }

/* Pill tag */
.ds-tag {
  display: inline-block;
  font-family: var(--font-primary);
  font-weight: var(--weight-regular);
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  color: var(--color-fg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 100px;
  padding: 6px 14px;
}

/* Section divider */
.ds-divider { border: 0; border-top: 1px solid var(--color-border); }