/* ============================================================
   rise — shared design tokens
   ------------------------------------------------------------
   The single source of truth for the whole component library.
   Every component reads these via var(--rise-*, fallback), so:
     • include this file once on any page (or in a host app), and
     • all components re-skin together.

   Custom properties inherit THROUGH shadow DOM, so even though each
   component is encapsulated, these tokens still reach inside them.

   To re-theme: copy this file, change the values, done.
   Components also ship sensible fallbacks, so they still render
   acceptably if this file is ever missing.
   ============================================================ */

/* ---- Brand webfont (from the original Shorthand build) ---- */
@font-face {
  font-family: "Preston";
  src: url("../assets/site/fonts/Preston-Regular.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Preston";
  src: url("../assets/site/fonts/Preston-RegularItalic.woff") format("woff");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Preston";
  src: url("../assets/site/fonts/Preston-Medium.woff") format("woff");
  font-weight: 500 600; font-style: normal; font-display: swap;
}

:root {
  /* ---- Color ---- */
  --white: #fff;
  --black: #000;
  --font-body: #1a1a1a;
  --font-caption: #6b6b6b;
  --border: #e4e4e0;
  --surface: #f4f4f2;

  --rise-color-bg:        var(--white);   /* page background            */
  --rise-color-surface:   var(--surface);   /* cards / raised panels      */
  --rise-color-text:      var(--font-body);   /* primary text               */
  --rise-color-muted:     var(--font-caption);   /* secondary text / captions  */
  --rise-color-accent:    var(--font-body);  /* links, focus, active state */
  --rise-color-on-accent: var(--white);   /* text on accent fills       */
  --rise-color-border:    var(--border);   /* hairlines, dividers        */
  --rise-color-on-media:  var(--white);   /* text laid over imagery     */
  --rise-color-overlay:   rgba(0, 0, 0, 0.45); /* scrim over media  */
  --rise-color-backdrop:  rgba(0, 0, 0, 0.88); /* lightbox backdrop */

  /* ---- Typography ---- */
  --rise-font-body:    system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --rise-font-display: var(--rise-font-body); /* swap to a serif to restyle headings */

  --rise-text-xs:      0.8125rem;
  --rise-text-sm:      0.9375rem;
  --rise-text-base:    1rem;
  --rise-text-lg:      1.125rem;
  --rise-text-xl:      clamp(1.25rem, 1.10rem + 0.6vw, 1.5rem);
  --rise-text-2xl:     clamp(1.6rem,  1.30rem + 1.4vw, 2.25rem);
  --rise-text-3xl:     clamp(2rem,    1.40rem + 3vw,   3.5rem);
  --rise-text-display: clamp(2.5rem,  1.50rem + 5vw,   5.5rem);

  --rise-leading-tight: 1.15;
  --rise-leading:       1.6;

  --rise-weight-normal: 400;
  --rise-weight-medium: 500;
  --rise-weight-bold:   700;

  --rise-tracking-wide: 0.04em;

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

  /* fluid page side-padding (the "gutter") */
  --rise-gutter: clamp(1rem, 5vw, 4rem);

  /* ---- Layout ---- */
  --rise-maxw:       72rem;  /* wide content                 */
  --rise-maxw-prose: 42rem;  /* comfortable reading measure  */
  --rise-header-h:   4rem;   /* sticky header height          */

  /* ---- Shape & depth ---- */
  --rise-radius:    2px;
  --rise-radius-lg: 8px;
  --rise-shadow:    0 1px 3px rgba(0, 0, 0, 0.10), 0 8px 24px rgba(0, 0, 0, 0.08);

  /* ---- Motion ---- */
  --rise-dur-fast: 0.2s;
  --rise-dur:      0.5s;
  --rise-ease:     cubic-bezier(0.22, 0.61, 0.36, 1);

  /* ---- Stacking ---- */
  --rise-z-header:  100;
  --rise-z-overlay: 1000;
}