/* ==========================================================================
   grégoire baur. — Design Tokens
   Single source of truth for color, type, spacing, radii, and motion.
   Import this on every artifact:  <link rel="stylesheet" href="colors_and_type.css">
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  /* --- Brand color (the only accent) --------------------------------- */
  --brand-green:        #d8efa7;       /* the one accent — pale green       */
  --brand-green-soft:   #ecf6d2;       /* lighter wash for large surfaces   */
  --brand-green-deep:   #b8d97e;       /* hover/press, darker variant       */

  /* --- Neutrals ------------------------------------------------------ */
  --bg:                 #ffffff;       /* paper white, default              */
  --bg-soft:            #f7f7f4;       /* off-white wash section            */
  --bg-inverse:         #0a0a0a;       /* near-black hero/footer sections   */

  --fg:                 #0a0a0a;       /* primary text — never pure #000    */
  --fg-2:               #444444;       /* secondary text                    */
  --fg-3:               #888888;       /* tertiary, captions, meta          */
  --fg-on-inverse:      #ffffff;       /* text on dark sections             */
  --fg-on-inverse-2:    #b8b8b8;       /* secondary text on dark            */

  --line:               rgba(10,10,10,0.08);  /* default 1px border         */
  --line-strong:        rgba(10,10,10,0.16);
  --line-on-inverse:    rgba(255,255,255,0.12);

  /* --- Semantic ------------------------------------------------------ */
  --error:              #b00020;
  --success:            var(--brand-green-deep);

  /* --- Type families ------------------------------------------------- */
  --font-sans:    'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif:   'Instrument Serif', 'Cormorant Garamond', Georgia, serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* --- Type scale (px, but use rem in components) -------------------- */
  --t-display-xl:   72px;     /* hero, rare                                */
  --t-display:      56px;     /* h1                                        */
  --t-h1:           44px;
  --t-h2:           32px;
  --t-h3:           24px;
  --t-h4:           20px;
  --t-body-lg:      19px;     /* lead paragraph                            */
  --t-body:         17px;     /* body default                              */
  --t-body-sm:      15px;
  --t-meta:         13px;     /* captions, labels                          */

  /* --- Line heights -------------------------------------------------- */
  --lh-display:     1.05;
  --lh-heading:     1.15;
  --lh-body:        1.55;
  --lh-meta:        1.4;

  /* --- Tracking ------------------------------------------------------ */
  --track-display:  -0.025em;
  --track-heading:  -0.015em;
  --track-body:     0em;
  --track-label:    0.04em;

  /* --- Spacing scale (8-pt) ----------------------------------------- */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   24px;
  --sp-6:   32px;
  --sp-7:   48px;
  --sp-8:   64px;
  --sp-9:   96px;
  --sp-10: 128px;

  /* --- Radii --------------------------------------------------------- */
  --r-0:     0px;
  --r-sm:    8px;       /* inputs                                         */
  --r-md:    12px;      /* default cards                                  */
  --r-lg:    16px;      /* large cards, video frames                      */
  --r-pill:  999px;

  /* --- Shadows (extremely restrained) -------------------------------- */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(10,10,10,0.04);
  --shadow-2: 0 8px 24px rgba(10,10,10,0.06);
  --shadow-3: 0 16px 48px rgba(10,10,10,0.08);

  /* --- Motion -------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 400ms;

  /* --- Layout caps --------------------------------------------------- */
  --w-prose:    640px;
  --w-content: 1120px;
  --w-wide:    1280px;
}

/* --------------------------------------------------------------------------
   Base reset (light)
   -------------------------------------------------------------------------- */

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  letter-spacing: var(--track-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

/* --------------------------------------------------------------------------
   Semantic typography classes — apply directly to elements.
   Designers can use either bare element selectors OR these utility classes.
   -------------------------------------------------------------------------- */

.t-display-xl,
.t-display,
.t-h1, .t-h2, .t-h3, .t-h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: var(--track-display);
  line-height: var(--lh-heading);
  margin: 0;
  text-wrap: balance;
}
.t-display-xl { font-size: var(--t-display-xl); line-height: var(--lh-display); letter-spacing: var(--track-display); }
.t-display    { font-size: var(--t-display);    line-height: var(--lh-display); letter-spacing: var(--track-display); }
.t-h1         { font-size: var(--t-h1); }
.t-h2         { font-size: var(--t-h2); }
.t-h3         { font-size: var(--t-h3); letter-spacing: var(--track-heading); }
.t-h4         { font-size: var(--t-h4); letter-spacing: var(--track-heading); font-weight: 500; }

.t-lead     { font-size: var(--t-body-lg); line-height: 1.5; color: var(--fg-2); text-wrap: pretty; }
.t-body     { font-size: var(--t-body);    line-height: var(--lh-body); }
.t-body-sm  { font-size: var(--t-body-sm); line-height: var(--lh-body); }
.t-meta     { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--fg-3); letter-spacing: var(--track-label); text-transform: uppercase; }

.t-italic-serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}

/* Highlighter — pale-green wash behind a single word in a heading. */
.t-mark {
  background: var(--brand-green);
  padding: 0 0.18em;
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* --------------------------------------------------------------------------
   Element defaults
   -------------------------------------------------------------------------- */

h1 { font-size: var(--t-display); font-weight: 600; letter-spacing: var(--track-display); line-height: var(--lh-display); margin: 0 0 var(--sp-5); text-wrap: balance; }
h2 { font-size: var(--t-h2);     font-weight: 600; letter-spacing: var(--track-display); line-height: var(--lh-heading); margin: 0 0 var(--sp-4); text-wrap: balance; }
h3 { font-size: var(--t-h3);     font-weight: 600; letter-spacing: var(--track-heading); line-height: var(--lh-heading); margin: 0 0 var(--sp-3); }
h4 { font-size: var(--t-h4);     font-weight: 500; letter-spacing: var(--track-heading); line-height: var(--lh-heading); margin: 0 0 var(--sp-3); }

p  { margin: 0 0 var(--sp-4); text-wrap: pretty; max-width: var(--w-prose); }

a  { color: inherit; text-decoration: none; transition: opacity var(--dur-base) var(--ease-out); }
a:hover { opacity: 0.7; }

small { font-size: var(--t-body-sm); color: var(--fg-2); }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-7) 0; }

/* --------------------------------------------------------------------------
   Component primitives — the bare bones, used across the system.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: 500;
  letter-spacing: 0;
  padding: 14px 24px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
  user-select: none;
  white-space: nowrap;
}
.btn:active { transform: scale(0.98); }

.btn--primary {
  background: var(--brand-green);
  color: var(--fg);
}
.btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
  background: var(--brand-green);
}

.btn--secondary {
  background: transparent;
  color: var(--fg);
  border-color: var(--fg);
}
.btn--secondary:hover {
  background: var(--fg);
  color: var(--bg);
  transform: translateY(-1px);
}

.btn--ghost {
  background: transparent;
  color: var(--fg);
  padding-left: 0;
  padding-right: 0;
}
.btn--ghost:hover { opacity: 0.6; }

/* dot — the green-circle marker */
.dot {
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: var(--brand-green);
  vertical-align: middle;
  margin-right: 0.5em;
}

/* card — the default container */
.card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.card:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }

/* input — minimal underline-y feel */
.input {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  width: 100%;
  padding: 12px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--fg);
  transition: border-color var(--dur-base) var(--ease-out);
}
.input:focus {
  outline: none;
  border-color: var(--fg);
}
.input::placeholder { color: var(--fg-3); }

/* layout helpers */
.container { max-width: var(--w-content); margin: 0 auto; padding: 0 var(--sp-5); }
.container--prose { max-width: var(--w-prose); }
.container--wide { max-width: var(--w-wide); }
.section { padding: var(--sp-9) 0; }
.section--soft { background: var(--bg-soft); }
.section--green { background: var(--brand-green); }
.section--inverse { background: var(--bg-inverse); color: var(--fg-on-inverse); }
.section--inverse h1, .section--inverse h2, .section--inverse h3 { color: var(--fg-on-inverse); }