/*
 * System Hyperlink — Design Tokens
 * Adapted from Claude Design export (system-hyperlink project).
 * This is the front-end source of truth; theme.json mirrors the
 * subset the block editor needs.
 *
 * All sizes use rem (base: 16px browser default).
 * Spacing scale: 0.25rem (4px) base.
 * Type scale uses clamp() for fluid sizing between 375px–1280px viewports.
 */

@import url('https://fonts.googleapis.com/css2?family=Platypi:ital,wght@0,300..800;1,300..800&family=Ysabeau+Office:ital,wght@0,200..900;1,200..900&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Light (default) ─────────────────────────────────────── */
:root {
  /* Surfaces */
  --paper:        #F5F5F1;
  --paper-2:      #ECECE6;
  --paper-card:   #FBFBF8;

  /* Ink */
  --ink:          #11121A;
  --ink-2:        #3C3D45;
  --ink-3:        #6E6F77;

  /* Rules */
  --rule:         #DAD9D3;
  --rule-2:       #E6E5DF;
  --rule-strong:  #11121A;

  /* Accent — electric violet */
  --accent:       #6C28DA;
  --accent-press: #571CB4;
  --accent-tint:  #EEE7FB;
  --on-accent:    #FFFFFF;

  /* Feature — cyan. Once per page (footer band). */
  --feature:      #06B6D4;
  --feature-ink:  #0A1418;
  --on-feature:   #11121A;

  /* Shadows — hard offset, no blur (rem) */
  --shadow-color:   #11121A;
  --shadow-hard:    0.375rem 0.375rem 0 var(--shadow-color);
  --shadow-hard-sm: 0.25rem  0.25rem  0 var(--shadow-color);
  --shadow-hard-lg: 0.5625rem 0.5625rem 0 var(--shadow-color);

  /* Type families */
  --font-display: "Platypi", "Iowan Old Style", "Charter", Georgia, serif;
  --font-text:    "Ysabeau Office", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale (fluid clamp: min at 375px → max at 1280px viewport) */
  --fs-base:     clamp(1rem, 0.957rem + 0.183vw, 1.0625rem);  /* 16px → 17px */
  --fs-sm:       clamp(0.875rem, 0.853rem + 0.092vw, 0.9375rem); /* 14px → 15px */
  --fs-xs:       clamp(0.6875rem, 0.676rem + 0.046vw, 0.71875rem); /* 11px → 11.5px */
  --fs-mono-sm:  clamp(0.6875rem, 0.676rem + 0.046vw, 0.75rem); /* 11px → 12px */
  --fs-h4:       clamp(1.1875rem, 1.1rem + 0.367vw, 1.3125rem); /* 19px → 21px */
  --fs-h3:       clamp(1.4375rem, 1.305rem + 0.55vw, 1.625rem); /* 23px → 26px */
  --fs-h2:       clamp(1.75rem, 1.617rem + 0.55vw, 2.125rem);   /* 28px → 34px */
  --fs-h1:       clamp(2.125rem, 1.76rem + 1.56vw, 3rem);       /* 34px → 48px */
  --fs-display:  clamp(3rem, 2.0rem + 4.4vw, 7.5rem);           /* 48px → 120px */

  /* Layout */
  --measure:        66ch;
  --measure-tight:  54ch;

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

  /* Radii — system is square; only chips and avatar deviate */
  --radius-0:     0;
  --radius-pill:  624.9375rem; /* effectively infinite; robust alternative to 999px */
  --radius-round: 50%;
}


/* ── Semantic type classes ───────────────────────────────── */
.t-hero      { font-family: var(--font-display); font-weight: 700; font-size: clamp(3rem, 2rem + 4.4vw, 5.75rem); line-height: 0.98; letter-spacing: -0.025em; color: var(--ink); }
.t-display-1 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display); line-height: 0.92; letter-spacing: -0.025em; color: var(--ink); }
.t-h1        { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h1); line-height: 1.06; letter-spacing: -0.018em; color: var(--ink); }
.t-h2        { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); line-height: 1.09; letter-spacing: -0.014em; color: var(--ink); }
.t-h3        { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); }
.t-h4        { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4); line-height: 1.2; letter-spacing: -0.008em; color: var(--ink); }

.t-lead    { font-family: var(--font-text); font-size: clamp(1.1875rem, 1.1rem + 0.367vw, 1.3125rem); line-height: 1.5;  color: var(--ink-2); }
.t-body-lg { font-family: var(--font-text); font-size: clamp(1.0625rem, 1rem + 0.275vw, 1.1875rem);  line-height: 1.62; color: var(--ink-2); }
.t-body     { font-family: var(--font-text); font-size: var(--fs-base);                               line-height: 1.6;  color: var(--ink-2); }
.t-body-sm  { font-family: var(--font-text); font-size: var(--fs-sm);                                 line-height: 1.5;  color: var(--ink-2); }

.t-eyebrow { font-family: var(--font-text); font-weight: 700; font-size: 0.8125rem; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
.t-meta    { font-family: var(--font-text); font-size: var(--fs-sm); line-height: 1.3; color: var(--ink-3); font-weight: 400; }
.t-fine    { font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1.4; letter-spacing: 0.02em; color: var(--ink-3); }
.t-source  { font-family: var(--font-mono); font-size: var(--fs-mono-sm); letter-spacing: 0.04em; color: var(--ink-3); text-transform: uppercase; }

.sh-link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 0.09375rem;
  text-underline-offset: 0.1875rem;
  text-decoration-color: var(--accent);
  transition: color 120ms ease, text-decoration-color 120ms ease;
}
.sh-link:hover { color: var(--accent); }