/* tokens.css - darkmonstr design system */

/* --- Colors ------------------------------------------------ */
:root {
  --bg-primary:     #1C1917;
  --bg-card:        #2C2825;
  --text-primary:   #F5F0E8;
  --text-secondary: #9E9488;
  --border:         #3A3530;
  --decorative:     #E71B49;
  --shimmer:        rgba(245, 240, 232, 0.14);  /* light sheen on dark cards */
}

[data-theme="light"] {
  --bg-primary:     #F7F4EF;
  --bg-card:        #FDFCF9;
  --text-primary:   #1C1917;
  --text-secondary: #5A5248;
  --border:         #D9D4CC;
  --decorative:     #E71B49;
  --shimmer:        rgba(28, 25, 23, 0.10);      /* dark sheen on light cards */
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg-primary:     #F7F4EF;
    --bg-card:        #FDFCF9;
    --text-primary:   #1C1917;
    --text-secondary: #5A5248;
    --border:         #D9D4CC;
    --decorative:     #E71B49;
    --shimmer:        rgba(28, 25, 23, 0.10);    /* dark sheen on light cards */
  }
}

/* Shared accent helper: apply the decorative (red) color to any inline text.
   Reused across the home and every project page instead of one-off classes. */
.accent { color: var(--decorative); }

/* Shared muted helper: the secondary text color. Only captions, links, badge
   descriptions, the quote attribution and the hero meta use it (body copy does
   not). One class instead of repeating `color: var(--text-secondary)`. */
.muted { color: var(--text-secondary); }

/* Shared inline emphasis, consistent everywhere:
   <em> -> Lora italic, <strong> -> bold in the primary text color. */
em {
  font-family: var(--font-secondary);
  font-style: italic;
}

strong {
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}

/* Shared link style (muted, underlines in the accent color on hover).
   Used by the nav, "more work", "download resume", about links and the
   case-study prev/next. Layout/size stays on each element's own class. */
.link {
  color: var(--text-secondary);
  transition: color 200ms ease;
}

.link:hover {
  color: var(--text-primary);
  text-decoration: underline var(--decorative);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* Shared full-bleed-to-gutter divider line at the top of a section. */
.section-divider { position: relative; }

.section-divider::before {
  content: '';
  position: absolute;
  top: 0;
  left: 8vw;
  right: 8vw;
  height: 0.5px;
  background: var(--border);
}

/* --- Typography -------------------------------------------- */
:root {
  --font-primary:   'Plus Jakarta Sans', sans-serif;
  --font-secondary: 'Lora', serif;

  --weight-extrabold: 800;
  --weight-bold:      700;
  --weight-medium:    500;

  --size-sm:  14px;
  --size-md:  16px;
  --size-lg:  24px;
  --size-xl:  32px;
  --size-2xl: 40px;
  --size-3xl: 60px;
  --size-4xl: 72px;

  --lh-sm: 20px;
  --lh-md: 24px;
  --lh-lg: 27px;

  /* Image / media aspect ratios */
  --ratio-media:    4 / 3;    /* default cards & case-study media */
  --ratio-wide:    21 / 9;    /* full-width case-study media */
  --ratio-featured: 5 / 3;    /* Project 1 card + about portrait */
}

img {
  width: 100%;
  object-fit: cover;
  display: block;
}

/* --- Reduced motion ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}