/* ============================================================
   Fanny Davidson — Design System
   Colors + Typography foundations
   ============================================================ */

/* -- Fonts ---------------------------------------------------- */
/* Display serif (hero / project titles) — Playfair Display */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&display=swap");

/* UI + body sans — Space Grotesk */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap");

/* Monospace metadata — JetBrains Mono */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* ==========================================================
     COLOR TOKENS — raw
     ========================================================== */

  /* Primary (core identity) */
  --deep-ink:     #0e0e11;
  --soft-ink:     #1f1f23;
  --paper:        #ffffff;

  /* Accent — use in sharp, short bursts only */
  --acid-lime:    #d6df59;
  --acid-lime-dim:#c7d046;

  /* Surfaces */
  --washed-gray:  #f4f4f6;
  --inverted-ink: #1f1f23;

  /* Text neutrals */
  --text-primary:   #1f1f23;
  --text-secondary: #6f6f76;
  --text-tertiary:  #a1a1a8;

  /* Lines */
  --hairline:     #e6e6eb;

  /* ==========================================================
     SEMANTIC TOKENS
     ========================================================== */
  --fg-1: var(--deep-ink);        /* headings, strongest text */
  --fg-2: var(--soft-ink);        /* body primary */
  --fg-3: var(--text-secondary);  /* secondary / meta */
  --fg-4: var(--text-tertiary);   /* disabled / quietest */

  --bg-1: var(--paper);           /* main canvas */
  --bg-2: var(--washed-gray);     /* grouped sections */
  --bg-inverse: var(--inverted-ink); /* footer / experimental */

  --accent: var(--acid-lime);
  --accent-ink: var(--deep-ink);  /* text on acid lime */

  --line: var(--hairline);

  /* ==========================================================
     TYPE — families
     ========================================================== */
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans:  "Space Grotesk", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --font-mono:  "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* ==========================================================
     TYPE — scale (px values per spec)
     ========================================================== */
  --fs-hero:     72px;  /* hero title (60–72) */
  --fs-hero-sm:  60px;
  --fs-project:  36px;  /* project title (28–40) */
  --fs-section:  20px;  /* section header (18–22) */
  --fs-body:     17px;  /* body (16–18) */
  --fs-ui:       15px;  /* UI label (14–16) */
  --fs-meta:     12px;  /* metadata (12–13) */

  --lh-tight:    1.05;
  --lh-snug:     1.2;
  --lh-body:     1.55;
  --lh-loose:    1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;

  /* ==========================================================
     SPACING — 8px base, with deliberate syncopation
     ========================================================== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  16px;
  --space-4:  24px;
  --space-5:  32px;
  --space-6:  40px;
  --space-7:  56px;   /* break rhythm */
  --space-8:  80px;
  --space-9:  120px;
  --space-10: 160px;

  /* ==========================================================
     RADII
     ========================================================== */
  --radius-0:  0px;     /* editorial / strict */
  --radius-1:  6px;     /* standard UI */
  --radius-2:  10px;    /* cards */
  --radius-full: 9999px;

  /* ==========================================================
     ELEVATION — mostly flat; shadows rare
     ========================================================== */
  --elev-flat:    none;
  --elev-line:    inset 0 0 0 1px var(--line);
  --elev-surface: 0 0 0 1px var(--line);
  --elev-lift:    0 12px 30px -12px rgba(14, 14, 17, 0.18);

  /* ==========================================================
     MOTION
     ========================================================== */
  --ease-snappy:  cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-gentle:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:     120ms;
  --dur-base:     200ms;
  --dur-slow:     360ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Consume via class names or bare tags.
   ============================================================ */

.fd-reset {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.fd-base {
  font-family: var(--font-sans);
  color: var(--fg-2);
  background: var(--bg-1);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Hero */
.fd-hero,
h1.fd-hero {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

/* Project title */
.fd-project-title,
h2.fd-project-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-project);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

/* Section header */
.fd-section-header {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-section);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

/* Body */
.fd-body,
p.fd-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
  text-wrap: pretty;
}

/* UI label */
.fd-ui {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-ui);
  line-height: 1.3;
  color: var(--fg-2);
}

/* Metadata */
.fd-meta {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-meta);
  line-height: 1.4;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Link — offset underline, lime on hover */
.fd-link {
  color: var(--fg-1);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition:
    color var(--dur-fast) var(--ease-snappy),
    text-decoration-thickness var(--dur-base) var(--ease-snappy);
}
.fd-link:hover {
  color: var(--accent);
  text-decoration-thickness: 2px;
}

/* Acid lime highlight block — use VERY sparingly */
.fd-highlight {
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0 0.12em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Selection */
::selection {
  background: var(--accent);
  color: var(--accent-ink);
}