/* ═══════════════════════════════════════════════════════════════════
   AM Design System — v2.0
   A bespoke design system for andrewmalone.design

   DESIGN PRINCIPLES
   1. Space is the primary design element. Let things breathe.
   2. One accent colour (terracotta). Use it like a printer's mark — sparingly.
   3. Type does the heavy lifting: Fraunces for authority, DM Sans for clarity.
   4. Everything on an 8pt grid. No exceptions.
   5. Sharp corners. Precision, not softness.
   6. Borders over shadows. Depth through structure, not decoration.

   Usage: <link rel="stylesheet" href="design-system.css">
   Place BEFORE page-specific <style> blocks so pages can override.

   Structure:
   1. Reset & Base
   2. Design Tokens (custom properties)
   3. Typography Scale
   4. Layout Primitives
   5. Component: Nav
   6. Component: Card
   7. Component: Callout
   8. Component: Button & Link
   9. Component: Section Eyebrow
   10. Component: Image Placeholder
   11. Utilities
   12. Dark Theme Overrides
   13. Responsive Breakpoints
   14. Reduced Motion
   ═══════════════════════════════════════════════════════════════════ */


/* ─── 1. Reset & Base ─────────────────────────────────────────────── */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
}

img { display: block; max-width: 100%; height: auto; }
a   { color: inherit; text-decoration: none; }


/* ─── 2. Design Tokens ────────────────────────────────────────────── */

:root {
  /* ── Palette: Neutral — warm uncoated paper ── */
  --bg:       #F7F6F2;
  --surface:  #EFEDE8;
  --border:   #DDD9D0;
  --text:     #1A1816;
  --muted:    #6B665E;
  --subtle:   #9E9890;
  --line:     rgba(26, 24, 22, 0.06);

  /* ── Palette: Accent — terracotta, used sparingly ── */
  --accent:     #B5541A;       /* Primary accent colour              */
  --accent-bg:  #FDF5F0;       /* Tinted background for accent       */
  --accent-mid: #9A4515;       /* Darker accent for text on light bg */

  /* ── Palette: Structural (shared across all pages) ── */
  --navy:       #1A1816;
  --navy-mid:   #3A3630;

  /* ── Palette: Feedback ── */
  --green:     #3A6B45;
  --green-bg:  #EEF5F0;

  --error:       #B91C1C;
  --error-bg:    #FEE2E2;
  --warning:     #92400E;
  --warning-bg:  #FEF3C7;
  --info:        #14385C;
  --info-bg:     #DBF0FF;

  /* ── Typography ── */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* ── Layout ── */
  --content-w:  760px;
  --wide-w:     1080px;
  --page-px:    48px;          /* Horizontal page padding            */
  --page-px-sm: 24px;          /* Page padding below 768px           */

  /* ── Spacing Scale (8pt grid) ── */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-7:   28px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-18:  72px;
  --sp-20:  80px;
  --sp-24:  96px;

  /* ── Border Radius — sharp, precise ── */
  --radius-xs:   2px;          /* Badges, tags                       */
  --radius-sm:   3px;          /* Small controls, toggles            */
  --radius-md:   4px;          /* Cards, inputs                      */
  --radius-lg:   6px;          /* Larger cards, callouts, images     */
  --radius-xl:   6px;          /* Feature containers                 */
  --radius-pill: 999px;        /* Pill buttons, tags                 */
  --radius-circle: 50%;

  /* ── Shadows — subtle, warm-tinted ── */
  --shadow-sm:   0 1px 3px rgba(26, 24, 22, 0.06);
  --shadow-md:   0 4px 12px rgba(26, 24, 22, 0.08);
  --shadow-card-hover: 0 4px 16px rgba(181, 84, 26, 0.09);

  /* ── Transitions ── */
  --ease-default:  0.2s ease;
  --ease-fast:     0.15s ease;
  --ease-spring:   0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:   0.3s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ─── 3. Typography Scale ─────────────────────────────────────────── */

/*
   Named sizes rather than raw px values.
   Every font-size in the system maps to one of these.

   --type-xs:   10px   — Labels, eyebrows (uppercase)
   --type-sm:   11px   — Meta text, eyebrows
   --type-body-sm: 13px — Secondary body, descriptions
   --type-body: 14–15px — Body copy on project pages
   --type-base: 16px   — Root / default body
   --type-lg:   18px   — Intro paragraphs, nav logo
   --type-xl:   20px   — Hero subtitles, lead text
   --type-h3:   22px   — Sub-headings
   --type-h2:   28px   — Section titles
   --type-h1:   responsive — Hero headings (clamp)
*/

:root {
  --type-xs:      10px;
  --type-sm:      11px;
  --type-body-sm: 13px;
  --type-body:    15px;
  --type-base:    16px;
  --type-lg:      18px;
  --type-xl:      20px;
  --type-h3:      22px;
  --type-h2:      28px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
  color: var(--text);
}

p {
  font-size: var(--type-base);
  line-height: 1.65;
  color: var(--muted);
}


/* ─── 4. Layout Primitives ────────────────────────────────────────── */

.container {
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 0 var(--page-px);
}

.container-wide {
  max-width: var(--wide-w);
  margin: 0 auto;
  padding: 0 var(--page-px);
}

/* Standard section rhythm */
section {
  padding: var(--sp-18) 0;               /* 72px top and bottom */
}

section:last-of-type {
  border-bottom: none;
}

/* Section title pattern */
.section-eyebrow {
  font-size: var(--type-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--subtle);
  margin-bottom: var(--sp-4);
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--type-h2);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text);
  margin-bottom: var(--sp-5);
}


/* ─── 5. Component: Nav ───────────────────────────────────────────── */

nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-5) var(--page-px);
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: background var(--ease-smooth),
              border-color var(--ease-smooth);
}

nav.scrolled {
  background: rgba(247, 246, 242, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--border);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.nav-logo-name {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--type-lg);
  font-weight: 200;
  letter-spacing: -0.015em;
  color: var(--text);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
}

.nav-right a {
  font-size: var(--type-body-sm);
  font-weight: 400;
  color: var(--muted);
  transition: color var(--ease-fast);
}

.nav-right a:hover {
  color: var(--text);
}


/* ─── 6. Component: Card ──────────────────────────────────────────── */

/*
   One base card. Override sparingly.

   Variants:
     .card--accent    — Left border tinted with --accent
     .card--dark      — Dark background (navy), light text
     .card--compact   — Reduced padding for dense layouts
*/

.card {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);      /* 12px — canonical card radius */
  padding: var(--sp-6) var(--sp-7);     /* 24px 28px                    */
  transition: transform var(--ease-default),
              box-shadow var(--ease-default),
              border-color var(--ease-default);
}

.card:hover {
  /* Only apply if the card is interactive (link wrapper, etc.) */
}

/* Accent variant — left-border tint */
.card--accent {
  border-left: 3px solid var(--accent);
  background: var(--accent-bg);
}

/* Dark variant — inverted colours */
.card--dark {
  background: var(--navy);
  border-color: var(--navy);
  color: white;
}
.card--dark p,
.card--dark .card-body {
  color: rgba(255, 255, 255, 0.75);
}

/* Compact variant — for grids with many small cards */
.card--compact {
  padding: var(--sp-4) var(--sp-5);     /* 16px 20px */
}

/* ── Card inner elements ── */

.card-label {
  font-size: var(--type-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--subtle);
  margin-bottom: var(--sp-2);
}

.card-title {
  font-size: var(--type-body);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--text);
  margin-bottom: var(--sp-2);
}

.card-body {
  font-size: var(--type-body-sm);
  line-height: 1.65;
  color: var(--muted);
}


/* ─── 7. Component: Callout ───────────────────────────────────────── */

/*
   Tinted information boxes. Uses the accent slot by default.
   Override --accent / --accent-bg for project-specific tints.
*/

.callout {
  background: var(--accent-bg);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: var(--sp-6) var(--sp-7);
  margin: var(--sp-8) 0;
}

.callout-label {
  font-size: var(--type-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: var(--sp-2);
}

.callout p {
  font-size: var(--type-body);
  line-height: 1.65;
  color: var(--text);
}

/* Neutral callout — no accent tint */
.callout--neutral {
  background: var(--surface);
  border-left-color: var(--border);
}
.callout--neutral .callout-label {
  color: var(--muted);
}


/* ─── 8. Component: Button & Link ─────────────────────────────────── */

/* Primary button */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  padding: 10px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: white;
  color: var(--text);
  cursor: pointer;
  transition: background var(--ease-fast),
              border-color var(--ease-fast),
              color var(--ease-fast);
}
.btn:hover {
  background: var(--surface);
  border-color: var(--subtle);
}

/* Ghost / text-only button */
.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}
.btn--ghost:hover {
  color: var(--text);
  background: var(--surface);
  border-color: transparent;
}

/* Accent button */
.btn--accent {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}
.btn--accent:hover {
  filter: brightness(1.08);
}

/* Pill button (e.g. LinkedIn) */
.btn--pill {
  border-radius: var(--radius-pill);
}

/* Inline text link */
.text-link {
  color: var(--accent);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--ease-fast);
}
.text-link:hover {
  color: var(--accent-mid);
}


/* ─── 9. Component: Badges & Tags ─────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--type-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: var(--radius-xs);
  background: var(--surface);
  color: var(--muted);
}

.badge--accent {
  background: var(--accent-bg);
  color: var(--accent);
}

.tag {
  display: inline-block;
  font-size: var(--type-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--subtle);
}


/* ─── 10. Component: Image Placeholder ────────────────────────────── */

.img-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  background: var(--surface);
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-12) var(--sp-8);
  text-align: center;
}

.img-placeholder-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--border);
}

.img-placeholder-label {
  font-size: var(--type-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--subtle);
}


/* ─── 11. Utilities ───────────────────────────────────────────────── */

/* Visually hidden but accessible */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Section-level spacing overrides */
.mt-0  { margin-top: 0 !important; }
.mb-0  { margin-bottom: 0 !important; }
.mt-4  { margin-top: var(--sp-4) !important; }
.mt-8  { margin-top: var(--sp-8) !important; }
.mt-10 { margin-top: var(--sp-10) !important; }
.mb-4  { margin-bottom: var(--sp-4) !important; }
.mb-8  { margin-bottom: var(--sp-8) !important; }
.mb-10 { margin-bottom: var(--sp-10) !important; }

/* Text colour overrides */
.text-muted  { color: var(--muted); }
.text-subtle { color: var(--subtle); }
.text-accent { color: var(--accent); }


/* ─── 12. Dark Theme ──────────────────────────────────────────────── */

[data-theme="dark"] {
  --bg:       #141310;
  --surface:  #1E1C18;
  --border:   #302D27;
  --text:     #EDE9E0;
  --muted:    #A8A49C;
  --subtle:   #6B665E;
  --line:     rgba(237, 233, 224, 0.07);

  /* Accent slots — override per project page in page-level <style> */
  --accent:     #D06A30;
  --accent-bg:  #1F1710;
  --accent-mid: #E07A3E;

  --navy:       #EDE9E0;
  --navy-mid:   #A8A49C;

  --green:     #5A9B65;
  --green-bg:  #141F18;

  --error:       #F87171;
  --error-bg:    #2D1A1A;
  --warning:     #FCD34D;
  --warning-bg:  #2D2410;
  --info:        #7AB8F5;
  --info-bg:     #14233A;
}

[data-theme="dark"] nav.scrolled {
  background: rgba(20, 19, 16, 0.95);
}

[data-theme="dark"] .card,
[data-theme="dark"] .callout--neutral {
  background: var(--surface);
}

[data-theme="dark"] .card--dark {
  background: var(--surface);
  border-color: var(--border);
}

[data-theme="dark"] .btn {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
[data-theme="dark"] .btn:hover {
  background: var(--border);
}

[data-theme="dark"] .badge {
  background: var(--border);
}

[data-theme="dark"] .img-placeholder {
  background: var(--surface);
  border-color: var(--border);
}


/* ─── 13. Responsive Breakpoints ──────────────────────────────────── */

/* Tablet — 960px */
@media (max-width: 960px) {
  :root {
    --page-px: 32px;
  }
}

/* Mobile — 768px */
@media (max-width: 768px) {
  :root {
    --page-px: var(--page-px-sm);    /* 24px */
  }

  nav {
    padding: var(--sp-5) var(--page-px-sm);
  }

  section {
    padding: var(--sp-16) 0;         /* 64px */
  }

  .section-title {
    font-size: 24px;
  }
}

/* Small mobile — 600px */
@media (max-width: 600px) {
  .nav-right {
    gap: var(--sp-5);
  }
}


/* ─── 14. Reduced Motion ──────────────────────────────────────────── */

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