@import url('https://fonts.googleapis.com/css2?family=Glory:ital,wght@0,100..800;1,100..800&family=Oxygen:wght@300;400;700&display=swap');
/* ============================================================================
   TWC THEME  —  GENERATED FILE. DO NOT EDIT BY HAND.
   ----------------------------------------------------------------------------
   Rewritten every time you press Save on the "Site Design" tab in
   /twc-control/. Anything typed in here directly will be lost on the next
   save — change it in the control panel instead.

   Generated: 2026-09-14 16:32 UTC
   ========================================================================== */

/* ---- Bommer Sans (your own font, served from this site) ---------------- */
@font-face {
  font-family: 'Bommer Sans';
  src: url('../BommerSansRegular/BommerSans-Regular.woff2') format('woff2'),
       url('../BommerSansRegular/BommerSans-Regular.woff') format('woff');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Type families -------------------------------------------------- */
  --font-display: 'Bommer Sans', 'Glory', system-ui, -apple-system, sans-serif;
  --font-body:    'Glory', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-ui:      'Oxygen', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---- Brand ---------------------------------------------------------- */
  --brand-navy:   #002147;
  --brand-mid:    #1f56b5;
  --brand-bright: #036bfc;
  --accent:       #03bafc;

  /* ---- Copper -----------------------------------------------------------
     The metal gradient is what makes it read as copper rather than brown:
     a dark base, a bright band across the middle, and back down again. */
  --copper:       #c97c3a;
  --copper-light: #f2b77a;
  --copper-dark:  #7a4a22;
  /* Nine stops, not three. Copper does not read as metal because it is the
     right brown — it reads as metal because of how light travels across it:
     a deep shadow at each end, the body colour rising through it, one narrow
     specular band, and the fall back down. Three flat tones give you a
     gradient that looks like a gradient; this gives you a surface. Every
     stop is derived from the three colours in the panel, so it stays yours. */
  --copper-metal: linear-gradient(100deg,
                    #583518 0%,
                    #7a4a22 15%,
                    #c97c3a 34%,
                    #f2b77a 46%,
                    #f5c797 50%,
                    #f2b77a 54%,
                    #c97c3a 66%,
                    #7a4a22 85%,
                    #583518 100%);
  --copper-metal-alt: linear-gradient(260deg,
                    #583518 0%,
                    #7a4a22 18%,
                    #c97c3a 38%,
                    #f5c797 51%,
                    #c97c3a 64%,
                    #7a4a22 84%,
                    #583518 100%);

  /* ---- The copper ramp --------------------------------------------------
     Copper has one job on this site: activity and craft — things moving,
     things being made, the parts a person did by hand. Cyan stays the system
     colour for links, focus, structure and primary buttons. Without that
     split the warm colour becomes a second accent competing with the first,
     which is how a colour someone likes turns into a mess.

     Two inks rather than one, because copper cannot be a single value: the
     light tone is legible on the dark sections and fails badly on white, and
     the dark tone does the reverse. Pick by ground, never by preference. */
  --copper-ink:      #f2b77a;   /* copper type on a dark ground  */
  --copper-ink-lite: #7a4a22;   /* copper type on a light one    */
  --copper-line:     rgba(201, 124, 58, 0.55);
  --copper-soft:     rgba(242, 183, 122, 0.55);
  --copper-wash:     rgba(201, 124, 58, 0.12);
  --copper-tint:     rgba(242, 183, 122, 0.16);
  --copper-glow:     0 0 26px rgba(242, 183, 122, 0.38);

  --brand-gradient: linear-gradient(to right, #002147, #1f56b5, #036bfc);

  /* ---- Package accents -------------------------------------------------
     Each package also gets a *-image value so anything that paints with a
     package colour (card stripe, tick marks, badge) can take a gradient
     without needing a different rule. Three of them are a flat colour
     expressed as a gradient; Trades is the real thing. */
  --pkg-landing: #89f336;
  --pkg-trade:   #ff825b;
  --pkg-pro:     #ff5e00;
  --pkg-premium: #ff00cc;

  --pkg-landing-image: linear-gradient(120deg, #89f336, #89f336);
  --pkg-pro-image:     linear-gradient(120deg, #ff5e00, #ff5e00);
  --pkg-premium-image: linear-gradient(120deg, #ff00cc, #ff00cc);
  --pkg-trade-image:   linear-gradient(120deg, #ff825b 0%, #e85cba 35%, #a546e9 65%, #7533ff 100%);

  /* ---- Hero photograph --------------------------------------------------
     twc-photo.js reads these at boot, so the picture and the strength of
     every effect are changeable from the control panel without touching a
     line of code. */
  --hero-image:  url("../../assets/img/wealdAONB.jpeg");
  --hero-flow:   1;
  --hero-ripple: 1;
  --hero-depth:  1;
  --hero-grade:  1;

  /* ---- Motion --------------------------------------------------------- */
  --motion-scale: 1;
}