/* ============================================================
   Agentic Practices — Design System tokens (production build)
   "Drafting Table": cool slate paper + deep slate ink + ONE signal
   accent (cobalt blue) + a warm-clay technical secondary.
   Faithful copy of the design-system token + base + component layers.
   Source: agentic-practices-design-system/project/tokens/*
   ============================================================ */

/* ---- Colors ---------------------------------------------- */
:root {
  /* Surfaces — cool "drafting paper", never stark white */
  --paper:          #F0F2F5;
  --paper-raised:   #FAFBFC;
  --paper-sunk:     #E4E8EC;
  --paper-edge:     #D6DCE2;

  /* Ink — cool slate near-black, never pure #000 */
  --ink:            #15181C;
  --ink-soft:       #3C424A;
  --ink-muted:      #5F666F;

  /* Hairlines & blueprint grid — low-alpha cool slate / cobalt */
  --hairline:       rgba(110, 120, 132, 0.32);
  --hairline-soft:  rgba(110, 120, 132, 0.18);
  --grid-line:      rgba(36, 86, 196, 0.07);

  /* Signal accent — cobalt blue. Loud through restraint. */
  --signal:         #2456C4;
  --signal-deep:    #173F96;
  --signal-tint:    #E2E9F7;
  --signal-on-dark: #8FB0F2;

  /* Technical secondary — warm clay. Schematic detail ONLY — never CTAs. */
  --clay:           #A85234;
  --clay-soft:      #D88A66;

  /* Semantic aliases — text */
  --text-strong:    var(--ink);
  --text-body:      var(--ink-soft);
  --text-meta:      var(--ink-muted);
  --text-accent:    var(--signal);
  --text-on-signal: #FAFBFC;
  --text-technical: var(--clay);

  /* Semantic aliases — surfaces */
  --surface-page:   var(--paper);
  --surface-card:   var(--paper-raised);
  --surface-well:   var(--paper-sunk);
  --surface-footer: var(--paper-sunk);

  /* Lines & borders */
  --border-rule:    var(--hairline);
  --border-card:    var(--hairline);
  --border-strong:  var(--ink);

  /* Interactive */
  --action:         var(--signal);
  --action-hover:   var(--signal-deep);
  --focus-ring:     var(--signal);

  /* Status (used sparingly) */
  --ok:             #2F7A52;
  --warn:           #B7791F;
  --danger:         #C0392B;

  /* ---- Type families ------------------------------------- */
  --font-display: "Fraunces", "Georgia", "Times New Roman", serif;
  --font-body:    "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ---- Weights ------------------------------------------- */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-black:    900;

  /* ---- Fluid type scale ---------------------------------- */
  --text-hero:    clamp(2.75rem, 6vw, 5.5rem);
  --text-display: clamp(2.25rem, 4.5vw, 3.75rem);
  --text-title:   clamp(1.9rem, 3.5vw, 3rem);
  --text-heading: clamp(1.4rem, 2.2vw, 1.875rem);
  --text-subhead: clamp(1.125rem, 1.6vw, 1.375rem);

  /* ---- Fixed type scale ---------------------------------- */
  --text-lead:    1.25rem;
  --text-body-lg: 1.125rem;
  --text-base:    1rem;
  --text-sm:      0.9375rem;
  --text-xs:      0.8125rem;
  --text-eyebrow: 0.8rem;

  /* ---- Line heights -------------------------------------- */
  --leading-hero:   1.02;
  --leading-title:  1.1;
  --leading-snug:   1.3;
  --leading-body:   1.6;
  --leading-mono:   1.45;

  /* ---- Tracking ------------------------------------------ */
  --tracking-hero:   -0.02em;
  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-eyebrow: 0.12em;
  --tracking-mono:   0.02em;

  /* ---- Measure ------------------------------------------- */
  --measure:       68ch;
  --measure-tight: 52ch;

  /* ---- Spacing scale ------------------------------------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;

  /* ---- Section rhythm ------------------------------------ */
  --section-y: clamp(3rem, 7vw, 6.5rem);
  --gutter:    clamp(1.25rem, 4vw, 2.5rem);

  /* ---- Widths -------------------------------------------- */
  --max-w:        72rem;
  --max-w-narrow: 48rem;
  --max-w-wide:   84rem;

  /* ---- Radii --------------------------------------------- */
  --radius-none: 0;
  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-pill: 999px;

  /* ---- Border widths ------------------------------------- */
  --border-hair: 1px;
  --border-med:  1.5px;
  --border-bold: 2px;

  /* ---- Blueprint grid sizing ----------------------------- */
  --grid-cell: 32px;

  /* ---- Shadows ------------------------------------------- */
  --shadow-raised:
    0 1px 2px rgba(27, 26, 23, 0.04),
    0 6px 20px rgba(27, 26, 23, 0.07);
  --shadow-raised-hover:
    0 2px 4px rgba(27, 26, 23, 0.05),
    0 12px 32px rgba(27, 26, 23, 0.10);
  --shadow-popover: 0 8px 40px rgba(27, 26, 23, 0.16);
  --shadow-inset: inset 0 1px 3px rgba(27, 26, 23, 0.06);
  --shadow-focus: 0 0 0 3px rgba(36, 86, 196, 0.30);

  /* ---- Motion -------------------------------------------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-settle: cubic-bezier(0.2, 0.72, 0.22, 1);
  --dur-fast:   120ms;
  --dur-base:   220ms;
  --dur-slow:   500ms;
  --dur-step:   420ms;
  --dur-travel: 760ms;
  --dur-flow:   3200ms;
  --stagger:    75ms;
  --lift:       -1px;

  /* --ease-settle, --dur-step and --dur-travel are for content that is built
     up in front of an audience rather than for interface feedback.

     --ease-settle is the curve for something arriving and coming to rest. Two
     session decks reached for it independently before it was named here, which
     is what makes it the house curve rather than one designer's preference.

     --dur-step is one step of a presenter-driven build landing. --dur-travel is
     for motion that crosses a distance, such as a line drawing along its own
     path, and it is deliberately longer than --dur-slow: travel only reads as
     travel if the eye can follow it.

     --dur-flow is one full circuit of a marker travelling a process diagram,
     repeating while a presenter has it playing. It is the only duration here
     that is NOT zeroed under reduced motion, and deliberately so: zeroing the
     duration of a repeating animation does not stop it, it spins it infinitely
     fast. Anything using --dur-flow must therefore switch itself off in script
     when prefers-reduced-motion matches, rather than relying on the token.

     Note that 00-shared-assets/session-deck/deck.css does not use any of the
     motion tokens. It hardcodes its own durations and easings, as do the
     diagrams in sessions 1 to 5. That drift is known and deliberately left
     alone rather than migrated, because those decks are delivered. New work
     uses these tokens; do not "fix" the old decks on the strength of this
     comment alone. */

  /* ---- Blueprint texture --------------------------------- */
  --bp-grid:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  --bp-grid-size: var(--grid-cell) var(--grid-cell);

  /* ---- Eyebrow semantic roles ---------------------------- */
  --type-eyebrow-family: var(--font-mono);
  --type-eyebrow-weight: var(--weight-medium);
  --type-eyebrow-transform: uppercase;
}

.bp-grid {
  background-image: var(--bp-grid);
  background-size: var(--bp-grid-size);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-step: 0ms;
    --dur-travel: 0ms;
    /* --dur-flow is absent on purpose. See the note above: it drives a
       repeating animation, and 0ms would spin it rather than still it. */
    --stagger: 0ms;
    --lift: 0px;
  }
}

/* ============================================================
   Base element styles & utilities
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-strong);
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: var(--leading-body);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1 { font-size: var(--text-title); }
h2 { font-size: var(--text-heading); }
h3 { font-size: var(--text-subhead); letter-spacing: var(--tracking-normal); }

p {
  margin: 0 0 var(--space-4);
  max-width: var(--measure);
  color: var(--text-body);
  text-wrap: pretty;
}

a { color: var(--text-strong); text-decoration: none; }

code, pre, kbd { font-family: var(--font-mono); font-size: 0.92em; }

::selection { background: var(--signal-tint); color: var(--ink); }

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Mono eyebrow / numbered section marker */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-accent);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.eyebrow--clay { color: var(--text-technical); }
.eyebrow--muted { color: var(--text-meta); }

.rule { border: 0; border-top: var(--border-hair) solid var(--border-rule); margin: 0; }

.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--max-w-narrow); }

.mono-meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono);
  color: var(--text-meta);
}

.big-numeral {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: clamp(3rem, 8vw, 7rem);
  line-height: 1;
  color: var(--ink-faint, var(--hairline));
}

.accent { color: var(--text-accent); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   Component classes (ap-*) — buttons, badges, eyebrow, card,
   metric, form fields, segmented control. Token-driven.
   ============================================================ */

/* ---- Button ---------------------------------------------- */
.ap-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body); font-weight: var(--weight-semibold);
  line-height: 1; text-decoration: none; white-space: nowrap;
  border: var(--border-hair) solid transparent;
  border-radius: var(--radius-md); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.ap-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.ap-btn[disabled], .ap-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

.ap-btn--sm { font-size: var(--text-sm);     padding: 0.5rem 0.875rem; }
.ap-btn--md { font-size: var(--text-base);   padding: 0.6875rem 1.25rem; }
.ap-btn--lg { font-size: var(--text-body-lg);padding: 0.875rem 1.625rem; }
.ap-btn--block { display: flex; width: 100%; }

.ap-btn--primary { background: var(--signal); color: var(--text-on-signal); }
.ap-btn--primary:hover { background: var(--signal-deep); transform: translateY(var(--lift)); }
.ap-btn--primary:active { background: var(--signal-deep); transform: translateY(0); }

.ap-btn--secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.ap-btn--secondary:hover { background: var(--ink); color: var(--paper-raised); }
.ap-btn--secondary:active { transform: translateY(0); }

.ap-btn--ghost { background: transparent; color: var(--ink); }
.ap-btn--ghost:hover { background: rgba(27,26,23,0.05); }

.ap-btn__icon { display: inline-flex; flex: none; }

/* ---- Badge / Tag ----------------------------------------- */
.ap-badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono); font-weight: var(--weight-medium);
  font-size: var(--text-xs); letter-spacing: var(--tracking-mono);
  padding: 0.25rem 0.5rem; border-radius: var(--radius-sm);
  border: var(--border-hair) solid var(--hairline);
  color: var(--ink-soft); background: var(--paper-raised);
}
.ap-badge--signal  { color: var(--signal); border-color: color-mix(in srgb, var(--signal) 35%, transparent); background: var(--signal-tint); }
.ap-badge--clay { color: var(--clay); border-color: color-mix(in srgb, var(--clay) 30%, transparent); background: color-mix(in srgb, var(--clay) 8%, var(--paper-raised)); }
.ap-badge--solid { color: var(--text-on-signal); background: var(--signal); border-color: transparent; }
.ap-badge__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.ap-tag {
  display: inline-flex; align-items: center;
  font-family: var(--font-body); font-weight: var(--weight-medium);
  font-size: var(--text-sm); padding: 0.3125rem 0.75rem;
  border-radius: var(--radius-pill); border: var(--border-hair) solid var(--hairline);
  color: var(--ink-soft); background: var(--paper-raised);
}

/* ---- Eyebrow / section marker ---------------------------- */
.ap-eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-mono); font-weight: var(--weight-medium);
  font-size: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--signal);
}
.ap-eyebrow--clay { color: var(--clay); }
.ap-eyebrow--muted { color: var(--ink-muted); }
.ap-eyebrow__num { color: inherit; opacity: 1; }
.ap-eyebrow__rule { width: 1.5rem; height: 1px; background: currentColor; opacity: 0.5; }

/* ---- Card ------------------------------------------------ */
.ap-card {
  background: var(--surface-card);
  border: var(--border-hair) solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.ap-card--raised { box-shadow: var(--shadow-raised); border-color: transparent; }
.ap-card--interactive { cursor: pointer; }
.ap-card--interactive:hover { box-shadow: var(--shadow-raised-hover); transform: translateY(-2px); }
.ap-card--flat { box-shadow: none; }
.ap-card--well { background: var(--surface-well); box-shadow: var(--shadow-inset); border-color: transparent; }
.ap-card--accent { border-color: var(--signal); }

/* ---- Metric ---------------------------------------------- */
.ap-metric { display: flex; flex-direction: column; gap: var(--space-2); }
.ap-metric__value {
  font-family: var(--font-display); font-weight: var(--weight-black);
  font-size: clamp(2.25rem, 4vw, 3.25rem); line-height: 1;
  letter-spacing: var(--tracking-tight); color: var(--ink);
}
.ap-metric--signal .ap-metric__value { color: var(--signal); }
.ap-metric__value sup, .ap-metric__value .unit { font-size: 0.55em; font-weight: var(--weight-semibold); }
.ap-metric__label {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono); color: var(--ink-muted);
  text-transform: none; max-width: 28ch;
}

/* ---- Field / Input / Textarea / Select ------------------- */
.ap-field { display: flex; flex-direction: column; gap: var(--space-2); }
.ap-field__label { font-family: var(--font-body); font-weight: var(--weight-semibold); font-size: var(--text-sm); color: var(--ink); }
.ap-field__hint { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-muted); }
.ap-field__req { color: var(--signal); }

.ap-input, .ap-textarea, .ap-select {
  font-family: var(--font-body); font-size: var(--text-base);
  color: var(--ink); background: var(--paper-raised);
  border: var(--border-hair) solid var(--hairline);
  border-radius: var(--radius-sm); padding: 0.625rem 0.75rem;
  width: 100%; transition: border-color var(--dur-fast) var(--ease-out),
                            box-shadow var(--dur-fast) var(--ease-out);
}
.ap-input::placeholder, .ap-textarea::placeholder { color: var(--ink-muted); }
.ap-input:focus, .ap-textarea:focus, .ap-select:focus { outline: none; border-color: var(--signal); box-shadow: var(--shadow-focus); }
.ap-textarea { min-height: 6.5rem; resize: vertical; line-height: var(--leading-body); }
.ap-select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236E685C' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2rem;
}

/* ---- Segmented control ----------------------------------- */
.ap-segmented {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--paper-sunk); border-radius: var(--radius-pill);
  border: var(--border-hair) solid var(--hairline);
}
.ap-segmented__opt {
  font-family: var(--font-mono); font-weight: var(--weight-medium);
  font-size: var(--text-sm); letter-spacing: var(--tracking-mono);
  padding: 0.375rem 0.875rem; border: 0; background: transparent;
  color: var(--ink-soft); border-radius: var(--radius-pill); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.ap-segmented__opt:hover { color: var(--ink); }
.ap-segmented__opt[aria-pressed="true"], .ap-segmented__opt--active {
  background: var(--paper-raised); color: var(--ink); box-shadow: var(--shadow-raised);
}