/* ============================================================
   Kate's Quest — Borders, Frames & Radii
   ------------------------------------------------------------
   The single most defining brand element is the FRAME: a heavy ink
   keyline, an inset colored rule (teal or terracotta), and ornate
   corners. Radii are small and restrained — these are printed cards,
   not glassy app surfaces.
   ============================================================ */

:root {
  /* ---- Radii (printed-card restraint) ---- */
  --radius-none: 0;
  --radius-xs:   2px;    /* stamps, chips */
  --radius-sm:   4px;    /* buttons, inputs */
  --radius-md:   6px;    /* panels */
  --radius-lg:   10px;   /* cards */
  --radius-xl:   16px;   /* large surfaces */
  --radius-pill: 999px;  /* compass dials, dot indicators */
  --radius-seal: 50%;    /* wax seals, postmarks */

  /* ---- Border widths ---- */
  --bw-hair:   1px;
  --bw-rule:   1.5px;
  --bw-frame:  2.5px;   /* the standard card keyline */
  --bw-heavy:  4px;     /* outer-most frame */
  --bw-double: 6px;

  /* ---- Border styles in use ---- */
  --border-keyline:  var(--bw-frame) solid var(--border-frame);
  --border-hairline: var(--bw-hair) solid var(--border-soft);
  --border-rule:     var(--bw-rule) solid var(--border-rule);

  /* ---- The signature double frame (apply as box-shadow rings) ----
     Usage: box-shadow: var(--frame-double);  border: var(--border-keyline);
     Produces: ink keyline (border) + paper gap + colored inner rule. */
  --frame-double:
    inset 0 0 0 5px var(--paper-100),
    inset 0 0 0 7px var(--teal-600);

  --frame-double-warm:
    inset 0 0 0 5px var(--paper-100),
    inset 0 0 0 7px var(--terracotta-500);

  /* ---- Dashed "stamp perforation" border ---- */
  --border-perf: var(--bw-rule) dashed var(--ink-500);

  /* ---- Decorative corner ornament size ---- */
  --corner-size: 28px;
}