/* ==========================================================================
   Piren — design tokens
   Ported verbatim from the Piren design system
   (_ds/piren-design-system-405e36d0…/tokens/*.css).

   Every value the site paints with lives here. Nothing below this file may
   hardcode a colour, a family, a radius or a duration.
   ========================================================================== */

/* --- Webfonts -------------------------------------------------------------
   Lovelace (display) is licensed from Zetafonts; the .otf binaries ship in
   assets/fonts. Raleway (body) comes from Google Fonts.                     */
@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300;0,400;0,500;0,600;0,700;0,900;1,400;1,500&display=swap");

@font-face{font-family:Lovelace;src:url("/assets/fonts/Lovelace-ExtraLight.38e4181f7c207225.otf") format("opentype");font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:Lovelace;src:url("/assets/fonts/Lovelace-Light.7ca2c7e20d439705.otf")      format("opentype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Lovelace;src:url("/assets/fonts/Lovelace-Regular.99f51dd8c7f88fc9.otf")    format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Lovelace;src:url("/assets/fonts/Lovelace-Medium.e25fa099b58c9bb7.otf")     format("opentype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Lovelace;src:url("/assets/fonts/Lovelace-Bold.d293e63424138588.otf")       format("opentype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Lovelace;src:url("/assets/fonts/Lovelace-ExtraBold.6a276ccdc3c29e37.otf")  format("opentype");font-weight:800;font-style:normal;font-display:swap}

:root{

  /* ======================================================================
     COLOUR
     ====================================================================== */

  /* Brand keys */
  --piren-cream:#ffeee5;          /* page background, "shore" peach */
  --piren-teal:#00b5a7;           /* the wordmark. Logo only. */
  --piren-sage:#c9cfc5;           /* primary-200 key — the brand tint */
  --piren-slate:#3b495b;          /* secondary-800 key — buttons, footer */
  --piren-ink:#313b49;            /* secondary-900 — body + heading text */

  /* Primary — sage / driftwood green */
  --color-primary-50:#f7f7f6;
  --color-primary-100:#eceeea;
  --color-primary-200:#c9cfc5;    /* KEY */
  --color-primary-300:#b9c1b4;
  --color-primary-400:#919d8b;
  --color-primary-500:#717d6a;
  --color-primary-600:#5b6554;
  --color-primary-700:#495144;
  --color-primary-800:#3d4239;
  --color-primary-900:#323730;
  --color-primary-950:#191c17;

  /* Secondary — slate blue / deep water */
  --color-secondary-50:#f6f7f9;
  --color-secondary-100:#ebeef3;
  --color-secondary-200:#d4dbe3;
  --color-secondary-300:#adbbcc;
  --color-secondary-400:#8197af;
  --color-secondary-500:#627a95;
  --color-secondary-600:#4d627c;
  --color-secondary-700:#3f4f65;
  --color-secondary-800:#3b495b;  /* KEY */
  --color-secondary-900:#313b49;
  --color-secondary-950:#212730;

  /* Neutrals */
  --color-neutral-50:#f8f8f8;     /* KEY — text on dark */
  --color-neutral-100:#efefef;
  --color-neutral-200:#dcdcdc;
  --color-neutral-300:#bdbdbd;
  --color-neutral-400:#989898;
  --color-neutral-500:#7c7c7c;
  --color-neutral-600:#656565;
  --color-neutral-700:#525252;
  --color-neutral-800:#464646;
  --color-neutral-900:#3d3d3d;
  --color-neutral-950:#292929;    /* KEY */

  /* Accents — illustration + seasonal, used sparingly */
  --color-accent-coral:#e79979;
  --color-accent-deep-sea:#375a6a;
  --color-accent-leaf:#64825c;
  --color-accent-citrus:#eae663;

  /* Semantic */
  --color-error:#e74444;
  --color-warning:#ffd505;
  --color-info:#ffffff;
  --color-transparent:#ffffff00;
  --color-grey-opaque:#80808026;

  /* Theme aliases — build against THESE, not the scales */
  --surface-page:var(--piren-cream);
  --surface-inverse:var(--color-secondary-800);
  --surface-tint:var(--color-primary-200);
  --surface-card:var(--piren-cream);
  --surface-dark:var(--color-neutral-950);
  --surface-light:var(--color-neutral-50);

  --text-body:var(--color-secondary-900);
  --text-heading:var(--color-secondary-900);
  --text-on-dark:var(--piren-cream);
  --text-brand:var(--color-primary-200);
  --text-secondary:var(--color-secondary-800);
  --text-muted:var(--color-secondary-600);

  --border-color:var(--color-secondary-800);
  --border-color-muted:var(--color-neutral-400);
  --border-color-hairline:var(--color-primary-200);

  --button-bg:var(--color-secondary-800);
  --button-text:var(--color-neutral-50);
  --button-bg-hover:var(--color-secondary-950);
  --button-text-hover:var(--color-neutral-50);
  --button-outline:var(--color-secondary-800);
  --button-outline-hover:var(--color-neutral-50);

  --link-color:var(--color-secondary-900);
  --link-color-hover:var(--color-secondary-950);

  --focus-ring-color:var(--color-secondary-900);
  --focus-ring-offset:var(--piren-cream);

  /* ======================================================================
     TYPOGRAPHY
     Two families only: Lovelace for anything that speaks, Raleway for
     anything that informs.
     ====================================================================== */

  --font-display:Lovelace,"Times New Roman",serif;
  --font-body:Raleway,-apple-system,"Helvetica Neue",sans-serif;

  /* BODY WEIGHTS, ONE STEP LIGHTER THAN THE DESIGN FILE. Raleway 900 for
     <strong> and 700 for every lead paragraph read as black type against the
     regular 500, and the client asked for the bold cut to be less heavy.
     Medium is now semibold (600) and bold is bold (700); both cuts are
     already in the Google Fonts request above. */
  --font-body-regular:500;
  --font-body-medium:600;
  --font-body-bold:700;
  --font-display-regular:300;
  --font-display-medium:500;
  --font-display-bold:700;

  --line-height-tight:1em;      /* display, h1, h2 */
  --line-height-snug:1.1em;     /* h3 */
  --line-height-normal:1.3em;   /* h4–h6, large body */
  --line-height-relaxed:1.5em;  /* body, small */

  --letter-spacing-none:0em;
  --letter-spacing-tight:-.03em;
  --letter-spacing-wide:.12em;  /* uppercase eyebrows, the HORNSBERGS lockup */
  --letter-spacing-eyebrow:.07em;

  /* Static ramp — the ceiling each fluid step below clamps up to. */
  --display-font-size:7rem;
  --h1-font-size:5rem;
  --h2-font-size:4rem;
  --h3-font-size:3rem;
  --h4-font-size:2rem;
  --h5-font-size:1.5rem;
  --h6-font-size:1rem;
  --text-large-font-size:1.25rem;
  --text-main-font-size:1rem;
  --text-small-font-size:.875rem;

  --measure-prose:50ch;   /* every paragraph on the site is capped here */
  --measure-short:40ch;

  /* ======================================================================
     SPACING — one rem-stepped scale; layout tokens are aliases of it.
     ====================================================================== */

  --size-0:0rem;
  --size-0-125:.125rem;
  --size-0-25:.25rem;
  --size-0-5:.5rem;
  --size-0-75:.75rem;
  --size-1:1rem;
  --size-1-25:1.25rem;
  --size-1-5:1.5rem;
  --size-2:2rem;
  --size-2-5:2.5rem;
  --size-3:3rem;
  --size-4:4rem;
  --size-4-5:4.5rem;
  --size-5:5rem;
  --size-5-5:5.5rem;
  --size-6:6rem;
  --size-6-5:6.5rem;
  --size-7:7rem;
  --size-7-5:7.5rem;
  --size-8:8rem;
  --size-8-5:8.5rem;
  --size-9:9rem;
  --size-9-5:9.5rem;
  --size-10:10rem;
  --size-11:11rem;
  --size-12:12rem;
  --size-13:13rem;
  --size-14:14rem;
  --size-15:15rem;
  --size-16:16rem;

  --space-extra-small:var(--size-0-75);
  --space-small:var(--size-1-5);
  --space-medium:var(--size-3);
  --space-large:var(--size-4);
  --grid-gap:var(--size-1);

  --padding-vertical-none:var(--size-0);
  --padding-vertical-small:var(--size-5);
  --padding-vertical-main:var(--size-7);
  --padding-vertical-large:var(--size-10);
  --padding-horizontal-main:var(--size-3);

  --max-width-main:90rem;   /* the 1440px content cap */
  --max-width-none:100vw;

  --element-min:24rem;      /* portrait media blocks */
  --element-xmin:18rem;
  --element-max:32rem;      /* forms, signup panels */

  /* ======================================================================
     EFFECTS — borders, radii, shadows, motion, textures.
     The brand is SQUARE: the site only ever uses --radius-round (dots) and
     --radius-none everywhere else.
     ====================================================================== */

  --border-width-main:1.5px;      /* hairline — the one legitimate px */
  --svg-stroke-width-main:1.5px;
  --svg-stroke-width-thick:2.5px;

  --radius-none:0rem;
  --radius-extra-small:.5rem;
  --radius-small:.75rem;
  --radius-main:1rem;
  --radius-round:100vw;

  --shadow-hard:.25rem .25rem 0rem 0 var(--color-neutral-950);
  --shadow-soft:.25rem .25rem 1.3rem 0 #13121233;
  --shadow-supersoft:1rem 1rem 1.25rem 0 #0000001a, .5rem .5rem 1.25rem 0 #00000026, .125rem .125rem .4rem 0 #13121233;

  /* Motion — the whole animation library reads from these four. */
  --duration-instant:.12s;
  --duration-fast:.2s;
  --duration-medium:.3s;
  --duration-slow:.6s;
  --ease-default:ease;
  --ease-emphasis:cubic-bezier(.4,0,.2,1);
  --ease-exit:cubic-bezier(.2,0,.2,1);
  --transition-hover:color var(--duration-fast) var(--ease-emphasis),
                     border-color var(--duration-fast) var(--ease-emphasis),
                     background-color var(--duration-fast) var(--ease-emphasis);

  /* Textures & marks.
     Root-relative on purpose: a url() carried in a custom property is resolved
     against the PAGE, not against this stylesheet, so "../textures/…" would
     break the moment a page sits anywhere but the site root. */
  --texture-foam:url("/assets/textures/foam.73f45e648cde77d9.avif");
  --texture-salt-lines:url("/assets/textures/salt-lines.060d222b41ab0fdd.avif");

  /* Overlay gradients used over photography */
  --overlay-dark:radial-gradient(circle at 110% -20%,#ffffff40,#fff0 50%),radial-gradient(circle at 10% 150%,#ffffff40,#fff0 50%);
  --overlay-light:radial-gradient(circle at 110% -20%,#00000026,#0000 50%),radial-gradient(circle at 10% 150%,#00000026,#0000 50%);

  /* Stacking order — named so nothing has to guess a magic number. */
  --layer-decor:-1;
  --layer-base:1;
  --layer-raised:10;
  --layer-header:100;
  --layer-dropdown:200;
}

/* Inverse block: footer, quote bands, dark event cards. Apply to a wrapper. */
.piren-theme-inverse{
  --surface-page:var(--color-secondary-800);
  --surface-card:var(--color-secondary-800);
  --text-body:var(--piren-cream);
  --text-heading:var(--piren-cream);
  --border-color:var(--piren-cream);
  --button-bg:var(--piren-cream);
  --button-text:var(--color-secondary-900);
  --button-bg-hover:var(--color-primary-200);
  --button-text-hover:var(--color-secondary-900);
  --button-outline:var(--piren-cream);
  --link-color:var(--piren-cream);
  --link-color-hover:var(--color-primary-200);
  --focus-ring-color:var(--piren-cream);
  --focus-ring-offset:var(--color-secondary-800);
  color:var(--text-body);
}