/* The Owner's Desk: tokens.css (v1.1 polish, 2026-09-25)
   Drop-in for site/assets/css/. Locked names match site.css :root exactly (--ink, --paper, --manila, --manila-deep, --manila-pale, --blue, --blue-deep, --graphite, --rule, --ok, --err, --serif, --sans, --radius-sm, --radius-md).
   v1.1 additions only: ghost CTA tokens, --texture-grain, --vignette-paper, --vignette-ink, .field-paper, .field-ink, .btn-ghost.
   Link BEFORE site.css. */
@font-face{font-family:"Zilla Slab";src:url("../fonts/ZillaSlab-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Zilla Slab";src:url("../fonts/ZillaSlab-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Public Sans";src:url("../fonts/PublicSans-VF.woff2") format("woff2");font-weight:100 900;font-display:swap}
/* The Owner's Desk: color tokens.
   Base names (--ink, --paper, --manila, --blue, --graphite, --rule, --ok, --err) are LOCKED
   and match the live site's site.css 1:1. Extensions below are additive. */
:root{
  /* Locked baseline */
  --ink:#17212B;
  --ink-soft:#2A3642;
  --paper:#F3F4F0;
  --white:#FFFFFF;
  --manila:#E4C98A;
  --manila-deep:#C9A962;
  --manila-pale:#F4E9CC;
  --blue:#274B7A;
  --blue-deep:#1B3558;
  --graphite:#55606B;
  --rule:#D5D8D2;
  --ok:#2F6B45;
  --err:#9B2C23;

  /* Extensions (values already present in the site CSS or interim assets, now named) */
  --manila-mid:#D9BC78;        /* back folder in the hero stack */
  --field-border:#AEB4AD;      /* input 1.5px borders */
  --ink-muted-on-dark:#C9D0D7; /* body copy on ink (CTA band, dark posts) */
  --rule-on-dark:#34414E;      /* hairlines on ink */
  --blue-ring:rgba(39,75,122,.2);
  --ok-pale:#E4EFE7;
  --err-pale:#F6E3E1;

  /* Semantic aliases */
  --text-body:var(--ink);
  --text-soft:var(--ink-soft);
  --text-muted:var(--graphite);
  --text-on-dark:var(--white);
  --text-on-dark-muted:var(--ink-muted-on-dark);
  --text-link:var(--blue);
  --text-link-hover:var(--blue-deep);

  --surface-page:var(--paper);
  --surface-card:var(--white);
  --surface-inverse:var(--ink);
  --surface-folder:var(--manila);
  --surface-folder-back:var(--manila-mid);
  --surface-folder-front:var(--manila-pale);
  --surface-callout:var(--manila-pale);

  --action-primary:var(--blue);
  --action-primary-hover:var(--blue-deep);
  --action-on-dark:var(--manila);
  --action-on-dark-hover:var(--white);

  --border-default:var(--rule);
  --border-field:var(--field-border);
  --border-focus:var(--blue);
  --accent-lane-a:var(--ink);
  --accent-lane-b:var(--blue);
}

/* The Owner's Desk: type tokens. Display = Zilla Slab 600/700. UI/body = Public Sans. */
:root{
  --serif:"Zilla Slab","Rockwell","Roboto Slab",Georgia,serif;
  --sans:"Public Sans","Segoe UI",-apple-system,Helvetica,Arial,sans-serif;
  --font-display:var(--serif);
  --font-body:var(--sans);

  /* Sizes (from site.css) */
  --fs-h1:clamp(2.25rem,5.2vw,3.6rem);
  --fs-h2:clamp(1.75rem,3.4vw,2.4rem);
  --fs-h3:1.35rem;
  --fs-lede:1.2rem;
  --fs-intro:1.1rem;
  --fs-body:1.0625rem;
  --fs-ui:1rem;
  --fs-small:.9rem;
  --fs-legal:.88rem;
  --fs-tab:.98rem;
  --fs-summary:1.2rem;
  --fs-step-num:2.2rem;

  --fw-display:700;
  --fw-display-sub:600;
  --fw-body:400;
  --fw-nav:500;
  --fw-label:650;
  --fw-strong:650;

  --lh-display:1.12;
  --lh-body:1.6;
  --lh-ui:1.2;
  --ls-display:-0.005em;
  --measure:66ch;
}

/* The Owner's Desk: layout, spacing, radii, elevation, motion */
:root{
  --wrap:1120px;
  --gutter:1.25rem;
  --header-h:72px;

  /* Spacing steps actually used on the site (rem) */
  --space-1:.35rem;
  --space-2:.6rem;
  --space-3:.8rem;
  --space-4:1.2rem;
  --space-5:1.6rem;
  --space-6:2.2rem;
  --space-7:3rem;
  --section-y:clamp(3rem,6vw,5rem);

  /* Radii: tight, institutional */
  --radius-sm:3px;   /* buttons, inputs */
  --radius-md:6px;   /* folder tabs, folder bodies */
  --radius-hair:2px; /* checkbox, paper edge, focus */

  /* Borders */
  --bw-hair:1px;
  --bw-field:1.5px;
  --bw-btn:2px;
  --bw-tabline:3px;
  --bw-accent:6px;

  /* Elevation: only folders and the hero note carry shadow */
  --shadow-folder:0 1px 0 var(--manila-deep) inset,0 10px 24px -14px rgba(23,33,43,.45);
  --shadow-note:0 8px 20px -14px rgba(23,33,43,.4);

  /* Focus */
  --focus-ring:3px solid var(--blue);
  --focus-offset:3px;

  /* Motion: effectively none. Instant state swaps, respect reduced-motion. */
  --ease:cubic-bezier(.2,0,0,1);
  --dur-fast:120ms;
}

/* The Owner's Desk: atmosphere + ghost CTA (v1.1 polish additions; locked names untouched) */
:root{
  /* Ghost / outline CTA */
  --ghost-fg:var(--blue);
  --ghost-border:var(--blue);
  --ghost-hover-bg:rgba(39,75,122,.06);
  --ghost-hover-fg:var(--blue-deep);
  --ghost-on-dark-fg:var(--manila);
  --ghost-on-dark-border:var(--manila);

  /* Atmosphere: fine ink grain + soft vignette. Paper and ink fields only, never over text blocks or cards. */
  --texture-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .09 0 0 0 0 .13 0 0 0 0 .17 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --vignette-paper:radial-gradient(ellipse 80% 90% at 44% 40%,rgba(255,255,255,.55),rgba(255,255,255,0) 60%,rgba(23,33,43,.04));
  --vignette-ink:radial-gradient(ellipse 80% 90% at 44% 40%,rgba(255,255,255,.02),rgba(0,0,0,0) 55%,rgba(0,0,0,.2));
}
.field-paper{background-color:var(--paper);background-image:var(--texture-grain),var(--vignette-paper)}
.field-ink{background-color:var(--ink);color:var(--white);background-image:var(--texture-grain),var(--vignette-ink)}


/* Ghost CTA for site.css .btn system */
.btn-ghost{background:transparent;color:var(--blue);border-color:var(--blue)}
.btn-ghost:hover{background:var(--ghost-hover-bg);color:var(--blue-deep);border-color:var(--blue-deep)}
.cta-band .btn-ghost{background:transparent;color:var(--manila);border-color:var(--manila)}
.cta-band .btn-ghost:hover{background:var(--manila);color:var(--ink)}
