/* ============================================================
   LEVI CLARKE DESIGN — Design Tokens
   Typography + Color + Spacing + Motion
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@300;400;500&display=swap');

:root {
  /* ---------- COLORS: Core ---------- */
  --lcd-black:        #080808;  /* Near-black. Primary background. */
  --lcd-ink:          #0c0c0c;  /* Slightly elevated surface */
  --lcd-surface:      #111111;  /* Cards, placeholder min */
  --lcd-surface-2:    #1a1a1a;  /* Hover / raised placeholder */
  --lcd-surface-3:    #2a2a2a;  /* Placeholder max */
  --lcd-rule:         #1a1a1a;  /* 1px dividers — the ONLY divider */
  --lcd-rule-soft:    #141414;  /* Even quieter rule */

  --lcd-off-white:    #f0f0f0;  /* Primary text on dark */
  --lcd-white:        #ffffff;  /* Pure white — submit button, emphasis */
  --lcd-fg-mute:      #8a8a8a;  /* Secondary body / project type labels */
  --lcd-fg-faint:     #5a5a5a;  /* "Drop your image" ghost copy */
  --lcd-fg-ghost:     #2e2e2e;  /* Crosshair reticle */

  --lcd-blue:         #3a8fff;  /* The one accent. Logo mark only. */

  /* ---------- SEMANTIC — Foreground ---------- */
  --fg-1: var(--lcd-off-white); /* primary text */
  --fg-2: var(--lcd-fg-mute);   /* secondary / captions */
  --fg-3: var(--lcd-fg-faint);  /* placeholder / hint */
  --fg-accent: var(--lcd-blue);

  /* ---------- SEMANTIC — Background ---------- */
  --bg-1: var(--lcd-black);
  --bg-2: var(--lcd-ink);
  --bg-3: var(--lcd-surface);
  --bg-4: var(--lcd-surface-2);

  /* ---------- TYPE: Families ---------- */
  --font-display: 'Anton', 'Oswald', 'Impact', sans-serif;
  --font-body:    'Inter', -apple-system, 'Helvetica Neue', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* ---------- TYPE: Scale ---------- */
  /* Display (Anton) — uppercase, very tight tracking at small sizes,
     slightly open tracking at display sizes for legibility */
  --type-hero:       clamp(72px, 14vw, 220px);  /* LEVI CLARKE DESIGN */
  --type-display-1:  clamp(48px, 6vw, 96px);    /* Section heads */
  --type-display-2:  clamp(32px, 4vw, 56px);    /* Sub-heads */
  --type-h1:         32px;
  --type-h2:         22px;
  --type-h3:         16px;
  --type-label:      11px;   /* uppercase spaced labels */
  --type-label-xs:   10px;   /* tiny topbar / meta */

  --type-body:       16px;
  --type-body-sm:    14px;
  --type-caption:    12px;

  /* Weights */
  --fw-light:    300; /* @kind font */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-display:  400; /* @kind font */ /* Anton is a single-weight display */

  /* Line heights */
  --lh-tight:   0.92; /* @kind font */
  --lh-display: 1.02; /* @kind font */
  --lh-snug:    1.25; /* @kind font */
  --lh-body:    1.55; /* @kind font */
  --lh-loose:   1.75; /* @kind font */

  /* Letter spacing */
  --ls-hero:    -0.015em; /* @kind font */
  --ls-display: -0.005em; /* @kind font */
  --ls-body:     0; /* @kind font */
  --ls-label:    0.18em;   /* @kind font */ /* uppercase spaced type */
  --ls-label-lg: 0.24em; /* @kind font */

  /* ---------- SPACING ---------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;
  --space-11: 192px;

  --gutter:        24px;   /* default gutter */
  --gutter-image:  3px;    /* signature tight image grid gap */
  --page-pad-x:    clamp(24px, 4vw, 64px);
  --section-pad-y: clamp(64px, 10vw, 160px);

  /* ---------- LAYOUT ---------- */
  --max-w:       1600px;
  --max-w-prose: 62ch;

  /* ---------- BORDERS / RADII ---------- */
  --border:      1px solid var(--lcd-rule);
  --border-soft: 1px solid var(--lcd-rule-soft);
  --radius-0: 0;        /* Default — nothing is rounded */
  --radius-1: 2px;      /* Reserved for form affordances if needed */

  /* ---------- MOTION ---------- */
  --ease-out:  cubic-bezier(0.2, 0.7, 0.2, 1); /* @kind other */
  --ease-in:   cubic-bezier(0.5, 0, 0.75, 0); /* @kind other */
  --ease-std:  cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --dur-1: 120ms;   /* @kind other */ /* micro */
  --dur-2: 220ms;   /* @kind other */ /* standard */
  --dur-3: 400ms;   /* @kind other */ /* emphasis */
  --dur-4: 800ms;   /* @kind other */ /* reveal */
}

/* ============================================================
   BASE + SEMANTIC ELEMENTS
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--type-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* --- Display / Headings (Anton) --- */
.lcd-hero,
.lcd-display-1,
.lcd-display-2,
.lcd-h1, .lcd-h2, .lcd-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  text-transform: uppercase;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  margin: 0;
  color: var(--fg-1);
}

.lcd-hero       { font-size: var(--type-hero);      line-height: var(--lh-tight); letter-spacing: var(--ls-hero); }
.lcd-display-1  { font-size: var(--type-display-1); }
.lcd-display-2  { font-size: var(--type-display-2); }
.lcd-h1         { font-size: var(--type-h1);        }
.lcd-h2         { font-size: var(--type-h2);        }
.lcd-h3         { font-size: var(--type-h3);        }

/* --- Labels (uppercase spaced) --- */
.lcd-label {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--type-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--fg-1);
}
.lcd-label-xs {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--type-label-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--fg-1);
}

/* --- Body --- */
.lcd-body {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--type-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
}
.lcd-body-sm {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--type-body-sm);
  line-height: var(--lh-body);
  color: var(--fg-2);
}
.lcd-caption {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--type-caption);
  line-height: var(--lh-snug);
  color: var(--fg-2);
}

/* --- Links --- */
a { color: inherit; text-decoration: none; transition: opacity var(--dur-2) var(--ease-out); }
a:hover { opacity: 0.6; }

/* --- Rules --- */
hr.lcd-rule {
  border: 0;
  border-top: var(--border);
  margin: 0;
}

/* --- Selection --- */
::selection { background: var(--lcd-off-white); color: var(--lcd-black); }