/* ============================================================
   Hai Dang Dinh — Design System
   Foundations: color + type
   ============================================================ */

/* Fonts:
   - Supreme (sans body)       — self-hosted, local /fonts/ (14 cuts)
   - Instrument Serif (display) — Google Fonts CDN
   - Geist Mono (meta labels)   — Google Fonts CDN
   ---------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist+Mono:wght@400;500&display=swap');

/* ---------- Supreme (sans body) — self-hosted ---------- */
@font-face {
  font-family: 'Supreme';
  src: url('fonts/Supreme-Thin.otf') format('opentype');
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Supreme';
  src: url('fonts/Supreme-ThinItalic.otf') format('opentype');
  font-weight: 100; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Supreme';
  src: url('fonts/Supreme-Extralight.otf') format('opentype');
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Supreme';
  src: url('fonts/Supreme-ExtralightItalic.otf') format('opentype');
  font-weight: 200; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Supreme';
  src: url('fonts/Supreme-Light.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Supreme';
  src: url('fonts/Supreme-LightItalic.otf') format('opentype');
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Supreme';
  src: url('fonts/Supreme-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Supreme';
  src: url('fonts/Supreme-Italic.otf') format('opentype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Supreme';
  src: url('fonts/Supreme-Medium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Supreme';
  src: url('fonts/Supreme-MediumItalic.otf') format('opentype');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Supreme';
  src: url('fonts/Supreme-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Supreme';
  src: url('fonts/Supreme-BoldItalic.otf') format('opentype');
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Supreme';
  src: url('fonts/Supreme-Extrabold.otf') format('opentype');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Supreme';
  src: url('fonts/Supreme-ExtraboldItalic.otf') format('opentype');
  font-weight: 800; font-style: italic; font-display: swap;
}

/* ---------- Archivo (alt grotesk) — self-hosted ---------- */
@font-face {
  font-family: 'Archivo';
  src: url('fonts/Archivo-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('fonts/Archivo-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('fonts/Archivo-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('fonts/Archivo-MediumItalic.ttf') format('truetype');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('fonts/Archivo-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('fonts/Archivo-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('fonts/Archivo-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('fonts/Archivo-BoldItalic.ttf') format('truetype');
  font-weight: 700; font-style: italic; font-display: swap;
}

/* ---------- Space Grotesk (display / accent grotesk) — variable ---------- */
@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/SpaceGrotesk-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 300 700; font-style: normal; font-display: swap;
}

:root {
  /* ---------- COLOR ----------
     Restrained, off-white canvas. Ink-black foreground.
     One warm accent (ochre) used very sparingly for state /
     active links. Imagery carries the color in this brand. */

  /* Canvas (paper) */
  --paper:        #F4F1EC;   /* primary canvas — warm off-white */
  --paper-soft:   #ECE8E1;   /* slight depression / hover surface */
  --paper-deep:   #E3DED5;   /* sectional bands */
  --paper-pure:   #FFFFFF;   /* image plates, modals */

  /* Ink (foreground) */
  --ink:          #111111;   /* near-black, text + UI */
  --ink-soft:     #2A2A2A;   /* secondary body */
  --ink-mute:     #6B6B6B;   /* captions, meta */
  --ink-faint:    #A3A19B;   /* placeholders, divider labels */
  --ink-pure:     #000000;   /* contrast accents, frames */

  /* Lines */
  --rule:         #1A1A1A;   /* hairline rules between sections */
  --rule-soft:    #C9C5BC;   /* light rules within content */

  /* Single accent (sparingly) */
  --accent:       #B7472A;   /* warm vermilion — active link, marker */
  --accent-deep:  #8E3520;
  --accent-soft:  #E8C8BD;

  /* Inverse (rare — used for project hero blocks) */
  --void:         #0B0B0B;   /* near-pure black canvas */
  --void-soft:    #1A1A1A;
  --on-void:      #EFECE5;   /* paper-on-void */

  /* Semantic */
  --link:         var(--ink);
  --link-hover:   var(--accent);
  --selection-bg: var(--ink);
  --selection-fg: var(--paper);

  /* ---------- TYPE ----------
     Display: Instrument Serif (modern transitional serif, italic-forward)
     Body:    Geist (neutral humanist grotesk, Swiss feel)
     Mono:    Geist Mono (metadata, captions, indices)
     ---------------------------------------------------------- */
  --font-serif:    'Instrument Serif', 'Times New Roman', Georgia, serif;
  --font-sans:     'Supreme', 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-sans-alt: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-grotesk:  'Space Grotesk', 'Supreme', 'Helvetica Neue', sans-serif;
  --font-mono:     'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Type scale — modular, editorial scale weighted toward display */
  --t-mega:      clamp(72px, 14vw, 220px);   /* hero project title */
  --t-display:   clamp(56px, 8vw, 120px);    /* section openers */
  --t-h1:        clamp(40px, 5vw, 72px);     /* page titles */
  --t-h2:        clamp(28px, 3.2vw, 44px);   /* sub-titles */
  --t-h3:        24px;                       /* card titles */
  --t-lead:      20px;                       /* lead paragraphs */
  --t-body:      16px;                       /* default body */
  --t-small:     14px;                       /* secondary body */
  --t-meta:      12px;                       /* captions, mono labels */
  --t-micro:     10px;                       /* tiny tags, indices */

  /* Line heights */
  --lh-display:  0.92;
  --lh-tight:    1.05;
  --lh-snug:     1.2;
  --lh-body:     1.45;
  --lh-loose:    1.6;

  /* Tracking (letter-spacing) */
  --tr-display:  -0.02em;     /* tight on big serif */
  --tr-body:      0;
  --tr-meta:      0.08em;     /* mono labels, all-caps */
  --tr-mega:     -0.03em;

  /* ---------- SPACING ----------
     Editorial grid based on 8px base.
     Generous whitespace — Swiss-modernist. */
  --s-0:   0;
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   24px;
  --s-6:   32px;
  --s-7:   48px;
  --s-8:   64px;
  --s-9:   96px;
  --s-10:  128px;
  --s-11:  192px;
  --s-12:  256px;

  /* Grid */
  --gutter:   24px;
  --margin:   48px;    /* page edge margin */
  --col:      12;

  /* ---------- BORDERS & RADII ----------
     Sharp corners are the rule. Radius reserved for image masks. */
  --r-0:  0;
  --r-1:  2px;
  --r-2:  4px;
  --r-pill: 999px;

  --bw-hair:    0.5px;
  --bw-rule:    1px;
  --bw-bold:    2px;

  /* ---------- ELEVATION ----------
     Almost nothing. One soft shadow for hover lifts only. */
  --shadow-none:    none;
  --shadow-hover:   0 12px 32px -16px rgba(0,0,0,0.18);
  --shadow-modal:   0 24px 64px -24px rgba(0,0,0,0.32);

  /* ---------- MOTION ---------- */
  --ease-out:     cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out:  cubic-bezier(0.7, 0, 0.3, 1);
  --dur-fast:     160ms;
  --dur-base:     280ms;
  --dur-slow:     520ms;
  --dur-reveal:   900ms;
}

/* ============================================================
   Element defaults
   ============================================================ */

html { background: var(--paper); color: var(--ink); }
body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--selection-bg); color: var(--selection-fg); }

/* Headings — all serif display */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: var(--tr-display);
  line-height: var(--lh-tight);
  color: var(--ink);
  margin: 0;
}
h1 { font-size: var(--t-h1); line-height: var(--lh-display); letter-spacing: var(--tr-mega); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-family: var(--font-sans); font-weight: 500; letter-spacing: 0; }

/* Body copy */
p {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink-soft);
  margin: 0;
  text-wrap: pretty;
}

/* Mono labels — captions, dates, indices */
.meta,
.label,
small {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* Display utility classes */
.t-mega    { font-family: var(--font-serif); font-size: var(--t-mega); line-height: var(--lh-display); letter-spacing: var(--tr-mega); font-weight: 400; }
.t-display { font-family: var(--font-serif); font-size: var(--t-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); font-weight: 400; }
.t-lead    { font-family: var(--font-sans); font-size: var(--t-lead); line-height: var(--lh-snug); color: var(--ink-soft); }
.t-meta    { font-family: var(--font-mono); font-size: var(--t-meta); letter-spacing: var(--tr-meta); text-transform: uppercase; color: var(--ink-mute); }
.t-micro   { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: var(--tr-meta); text-transform: uppercase; color: var(--ink-mute); }

/* Italic display — used heavily for project titles, accents */
.t-italic  { font-style: italic; }

/* Links — quiet by default, accent on hover */
a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--link-hover); }

/* Hairline rule */
hr {
  border: 0;
  border-top: var(--bw-rule) solid var(--rule);
  margin: 0;
}