/* =============================================================
   ATELIER — Portfolio Design System
   colors_and_type.css

   Editorial minimalism. Warm off-white canvas, near-black ink,
   a single earthy accent. Geometric/humanist sans pairing:
   Outfit (display) + Instrument Sans (text).

   Load this file, then use the semantic vars (--h1, --body, etc.)
   or the utility classes at the bottom.
   ============================================================= */

/* ----- Fonts (self-hosted variable woff2) ------------------- */
@font-face {
  font-family: "Outfit";
  src: url("fonts/outfit.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ===========================================================
     COLOR — base tokens
     =========================================================== */
  --paper:        #F9F7F4; /* warm off-white — the canvas        */
  --paper-2:      #F3F0EA; /* recessed wells, alt rows           */
  --card:         #FFFFFF; /* card / surface on paper            */
  --ink:          #1A1A18; /* primary text, near-black warm      */
  --ink-2:        #6B6B67; /* muted secondary text               */
  --ink-3:        #9B9A93; /* captions, disabled, meta           */

  --accent:       #8C7355; /* earthy warm — primary accent       */
  --accent-deep:  #6F5A41; /* hover / pressed accent             */
  --accent-soft:  #C8B89A; /* lighter accent, decorative         */
  --accent-wash:  #EFE9DF; /* accent-tinted fill / chip bg       */

  --line:         #E6E2DA; /* hairline borders on paper          */
  --line-strong:  #D8D3C8; /* emphasized borders                 */

  /* semantic status (used sparingly) */
  --positive:     #5B7355;
  --negative:     #9A5B4F;

  /* ===========================================================
     COLOR — roles (reference these in components)
     =========================================================== */
  --bg:            var(--paper);
  --bg-sunken:     var(--paper-2);
  --surface:       var(--card);
  --fg-1:          var(--ink);
  --fg-2:          var(--ink-2);
  --fg-3:          var(--ink-3);
  --border:        var(--line);
  --border-strong: var(--line-strong);
  --link:          var(--accent-deep);

  /* ===========================================================
     TYPE — families
     =========================================================== */
  --font-display: "Outfit", ui-sans-serif, system-ui, sans-serif;
  --font-text:    "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    ui-monospace, "SFMono-Regular", "Menlo", monospace;

  /* weights */
  --w-light:   300;
  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;
  --w-bold:    700;

  /* ===========================================================
     TYPE — fluid display scale (clamps to viewport)
     Editorial, tight leading, slightly negative tracking on
     large sizes. Body stays at a generous 1.65 leading.
     =========================================================== */
  --h1-size: clamp(2.75rem, 1.6rem + 5.6vw, 5rem);   /* 44 → 80 */
  --h1-line: 1.04;
  --h1-track: -0.022em;
  --h1-weight: var(--w-medium);

  --h2-size: clamp(2rem, 1.4rem + 2.6vw, 2.9rem);    /* 32 → 46 */
  --h2-line: 1.1;
  --h2-track: -0.018em;
  --h2-weight: var(--w-medium);

  --h3-size: clamp(1.4rem, 1.15rem + 1.1vw, 1.85rem);/* 22 → 30 */
  --h3-line: 1.2;
  --h3-track: -0.012em;
  --h3-weight: var(--w-medium);

  --h4-size: 1.25rem;   /* 20 */
  --h4-line: 1.35;
  --h4-track: -0.006em;
  --h4-weight: var(--w-semi);

  --body-lg-size: 1.125rem; /* 18 */
  --body-lg-line: 1.65;

  --body-size: 1rem;        /* 16 */
  --body-line: 1.65;
  --body-weight: var(--w-regular);

  --caption-size: 0.875rem; /* 14 */
  --caption-line: 1.5;

  --label-size: 0.75rem;    /* 12 */
  --label-line: 1.3;
  --label-track: 0.12em;    /* uppercase eyebrow */
  --label-weight: var(--w-semi);

  /* ===========================================================
     SPACING — 4px base scale
     =========================================================== */
  --space-1: 0.25rem;  /*  4 */
  --space-2: 0.5rem;   /*  8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */
  --space-10: 8rem;    /* 128 */

  /* layout */
  --measure: 68ch;          /* ideal reading column            */
  --container: 1200px;      /* max content width               */
  --container-wide: 1440px; /* full-bleed-ish showcase width    */
  --gutter: clamp(1.25rem, 5vw, 5rem);

  /* ===========================================================
     RADII — minimal. Cards barely rounded.
     =========================================================== */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ===========================================================
     ELEVATION — barely-there. Lean on borders, not shadow.
     =========================================================== */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(26, 26, 24, 0.04);
  --shadow-sm: 0 1px 3px rgba(26, 26, 24, 0.05), 0 1px 2px rgba(26, 26, 24, 0.03);
  --shadow-md: 0 6px 16px rgba(26, 26, 24, 0.06), 0 2px 5px rgba(26, 26, 24, 0.04);
  --shadow-lg: 0 18px 48px rgba(26, 26, 24, 0.10), 0 6px 14px rgba(26, 26, 24, 0.05);

  /* ===========================================================
     MOTION — quiet, no bounce. Soft ease, short durations.
     =========================================================== */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur: 220ms;
  --dur-slow: 420ms;
}

/* =============================================================
   SEMANTIC ELEMENT STYLES
   Use these classes (or copy the rules onto your tags).
   ============================================================= */
.h1, .h2, .h3, .h4 {
  font-family: var(--font-display);
  color: var(--fg-1);
  margin: 0;
  text-wrap: balance;
}
.h1 { font-size: var(--h1-size); line-height: var(--h1-line); letter-spacing: var(--h1-track); font-weight: var(--h1-weight); }
.h2 { font-size: var(--h2-size); line-height: var(--h2-line); letter-spacing: var(--h2-track); font-weight: var(--h2-weight); }
.h3 { font-size: var(--h3-size); line-height: var(--h3-line); letter-spacing: var(--h3-track); font-weight: var(--h3-weight); }
.h4 { font-size: var(--h4-size); line-height: var(--h4-line); letter-spacing: var(--h4-track); font-weight: var(--h4-weight); }

.body-lg, .body, .caption {
  font-family: var(--font-text);
  color: var(--fg-1);
  margin: 0;
  text-wrap: pretty;
}
.body-lg { font-size: var(--body-lg-size); line-height: var(--body-lg-line); font-weight: var(--w-regular); }
.body    { font-size: var(--body-size);    line-height: var(--body-line);    font-weight: var(--body-weight); }
.caption { font-size: var(--caption-size); line-height: var(--caption-line); color: var(--fg-2); }

.label {
  font-family: var(--font-text);
  font-size: var(--label-size);
  line-height: var(--label-line);
  letter-spacing: var(--label-track);
  font-weight: var(--label-weight);
  text-transform: uppercase;
  color: var(--fg-3);
}

.measure { max-width: var(--measure); }
.muted { color: var(--fg-2); }
.faint { color: var(--fg-3); }
.accent { color: var(--accent-deep); }

a {
  color: var(--link);
  text-decoration-color: var(--accent-soft);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur) var(--ease);
}
a:hover { text-decoration-color: var(--accent-deep); }