/* =====================================================================
   UNLOCKED — Design Tokens & Base Styles  (v1)
   The single source of truth. The master file (PDF build) and the
   companion web page both load THIS file. Change a value here once and
   both outputs update. Do not redefine these values anywhere else.

   Sections:  1) Fonts  2) Tokens (:root)  3) Base elements
              4) Components  5) Utilities  6) Print / PDF rules
   ===================================================================== */

/* ---------- 1) FONTS -------------------------------------------------
   For production reliability (offline PDF export, no network), self-host
   these three families and replace this @import with local @font-face
   rules. The fallbacks below keep everything readable if fonts fail. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ---------- 2) TOKENS ------------------------------------------------ */
:root{
  /* INK BLUE — primary, dominant */
  --ink:        #15294A;   /* headings, dark surfaces, primary brand */
  --ink-2:      #2C4A7A;   /* links, sub-headings */
  --ink-line:   #9FB1CC;   /* hairlines, dividers */
  --ink-tint:   #EDF1F8;   /* callout / card background */

  /* AMBER — accent. RESERVED for Your Edge moves + primary CTAs. Never decorative. */
  --amber:      #E0A23C;
  --amber-deep: #B9791E;   /* amber text on light, hover */

  /* PAPER + NEUTRALS */
  --paper:      #F7F5F0;   /* page background */
  --card:       #FFFFFF;   /* raised surfaces */
  --text:       #232A33;   /* body copy */
  --muted:      #5A6573;   /* captions, secondary text */

  /* TYPE FAMILIES */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;          /* display / headings */
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* body */
  --mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;  /* prompts / data */

  /* TYPE SCALE (fluid; collapses gracefully on small screens) */
  --step--1: 0.875rem;
  --step-0:  1.0625rem;                              /* body base */
  --step-1:  clamp(1.25rem, 1.1rem + 0.6vw, 1.45rem);
  --step-2:  clamp(1.6rem, 1.4rem + 1vw, 2rem);
  --step-3:  clamp(2.1rem, 1.7rem + 1.8vw, 2.7rem);
  --step-4:  clamp(2.6rem, 2rem + 3vw, 3.6rem);

  --lh-body: 1.62;
  --lh-tight: 1.08;

  /* SPACING (8px base rhythm) */
  --s-1: 0.5rem;  --s-2: 1rem;   --s-3: 1.5rem;  --s-4: 2rem;
  --s-5: 3rem;    --s-6: 4rem;   --s-7: 6rem;

  /* SHAPE */
  --radius: 10px;
  --radius-sm: 6px;
  --hairline: 1px solid var(--ink-line);
  --shadow: 0 1px 2px rgba(21,41,74,.06), 0 8px 24px rgba(21,41,74,.06);

  /* LAYOUT */
  --measure: 68ch;     /* readable line length */
  --maxw: 920px;
}

/* ---------- 3) BASE ELEMENTS ---------------------------------------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--sans);
  font-size:var(--step-0);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{font-family:var(--serif); color:var(--ink); line-height:var(--lh-tight);
  font-weight:600; letter-spacing:-.01em; margin:0 0 var(--s-2);}
h1{font-size:var(--step-4);}
h2{font-size:var(--step-2); margin-top:var(--s-5);}
h3{font-size:var(--step-1); margin-top:var(--s-4);}
h4{font-size:var(--step-0); text-transform:uppercase; letter-spacing:.06em; color:var(--ink-2);}

p{margin:0 0 var(--s-2); max-width:var(--measure);}
ul,ol{max-width:var(--measure); padding-left:1.25rem;}
li{margin:.35rem 0;}

a{color:var(--ink-2); text-underline-offset:2px;}
a:hover{color:var(--ink);}

strong{color:var(--ink); font-weight:600;}
em{color:inherit;}

hr{border:0; border-top:var(--hairline); margin:var(--s-5) 0;}

code{font-family:var(--mono); font-size:.92em; background:var(--ink-tint);
  padding:.1em .35em; border-radius:var(--radius-sm); color:var(--ink);}
pre{font-family:var(--mono); font-size:13px; line-height:1.55; background:var(--ink);
  color:#EAF0F8; padding:14px 16px; border-radius:var(--radius-sm); overflow:auto; margin:0;}
pre code{background:none; padding:0; color:inherit;}

blockquote{margin:var(--s-3) 0; padding:.4rem 0 .4rem 1.1rem;
  border-left:3px solid var(--ink-line); color:var(--muted); font-style:italic;}

table{border-collapse:collapse; width:100%; margin:var(--s-3) 0; font-size:var(--step--1);}
th,td{text-align:left; padding:.6rem .7rem; border-bottom:var(--hairline);}
th{font-family:var(--sans); font-weight:600; color:var(--ink);
  text-transform:uppercase; letter-spacing:.04em; font-size:.78rem;}

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

/* ---------- 4) COMPONENTS ------------------------------------------- */

/* Eyebrow / kicker — mono label above a heading */
.eyebrow{font-family:var(--mono); font-size:var(--step--1); letter-spacing:.16em;
  text-transform:uppercase; color:var(--amber-deep); margin:0 0 var(--s-1);}

/* Lede — intro paragraph under a heading */
.lede{font-size:var(--step-1); color:var(--muted); max-width:var(--measure);
  margin:0 0 var(--s-3);}

/* THE SIGNATURE COMPONENT — ⚡ Your Edge callout
   Anatomy: head (bolt + kicker) · title · Move · Prompt (mono block) · Output */
.edge{
  background:var(--ink-tint);
  border:var(--hairline);
  border-left:5px solid var(--amber);
  border-radius:var(--radius);
  padding:1.4rem 1.5rem;
  margin:var(--s-4) 0;
}
.edge__head{display:flex; align-items:center; gap:.6rem; margin-bottom:.2rem;}
.edge__bolt{color:var(--amber); font-size:1.2em; line-height:1;}
.edge__kicker{font-family:var(--mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--amber-deep);}
.edge__title{font-family:var(--serif); font-weight:600; color:var(--ink);
  font-size:var(--step-1); margin:.1rem 0 .9rem;}
.edge__row{margin:.7rem 0;}
.edge__lbl{font-weight:600; color:var(--ink); font-size:var(--step--1);
  text-transform:uppercase; letter-spacing:.04em; margin-bottom:.25rem;}
.edge pre .ph{color:var(--amber);}   /* [bracketed placeholders] inside prompts */

/* Buttons / CTAs — amber primary is the only place amber appears outside .edge */
.btn{font-family:var(--sans); font-weight:600; font-size:var(--step-0);
  border-radius:8px; padding:.8rem 1.5rem; cursor:pointer; border:2px solid transparent;
  text-decoration:none; display:inline-block; line-height:1;}
.btn--primary{background:var(--amber); color:var(--ink);}
.btn--primary:hover{background:var(--amber-deep); color:#fff;}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--ink);}
.btn--ghost:hover{background:var(--ink); color:#fff;}

/* Neutral aside (NOT a Your Edge move — use for tips/warnings, no amber) */
.aside{background:var(--card); border:var(--hairline); border-left:4px solid var(--ink-2);
  border-radius:var(--radius); padding:1.1rem 1.25rem; margin:var(--s-3) 0;}
.aside--warn{border-left-color:#B23A3A;}

/* Pill / tag */
.pill{display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; padding:.25rem .55rem; border-radius:999px;
  background:var(--ink-tint); color:var(--ink-2);}

/* ---------- 5) UTILITIES -------------------------------------------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
.muted{color:var(--muted);}
.serif{font-family:var(--serif);}
.mono{font-family:var(--mono);}
.center{text-align:center;}
[id]{scroll-margin-top:90px;}   /* so PDF→web anchor links don't hide under headers */

/* ---------- 6) PRINT / PDF ------------------------------------------
   Used by the PDF export (headless Chrome or Paged.js). Keeps the same
   tokens so the PDF and the web page are visually identical. */
@page{
  size: Letter;
  margin: 22mm 20mm;
}
@media print{
  html,body{background:#fff;}
  body{font-size:11pt; line-height:1.5;}
  /* Force brand colors to print (browsers strip backgrounds by default) */
  *{-webkit-print-color-adjust:exact; print-color-adjust:exact;}
  /* Keep signature blocks and tables from splitting across pages */
  .edge,.aside,table,figure,pre{break-inside:avoid;}
  h1,h2,h3,h4{break-after:avoid;}
  h2{break-before:auto;}
  p,li{orphans:3; widows:3;}
  a{color:var(--ink); text-decoration:none;}
  /* Show companion-page URLs next to links so the printed PDF stays useful */
  a[data-companion]::after{content:" (" attr(data-companion) ")";
    font-family:var(--mono); font-size:9pt; color:var(--amber-deep);}
  .no-print{display:none !important;}
}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}