/* ============================================================
   DESIGN TOKENS — every shared value lives here.
   Swap fonts and colours here first.
   ============================================================ */

/* Two fonts on the whole page: Dalfitra for headlines, Ortica for everything else.
   Ortica ships Light and Bold only, so 400 and below draw Light, 500 and above draw Bold. */
@font-face {
  font-family: 'Ortica';                 /* SIL OFL, see assets/fonts/Ortica-OFL.txt */
  src: url('../assets/fonts/Ortica-Light.otf') format('opentype');
  font-weight: 100 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ortica';
  src: url('../assets/fonts/Ortica-Bold.otf') format('opentype');
  font-weight: 500 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Dalfitra';               /* Free for commercial use, see assets/fonts/Dalfitra-readme.txt */
  src: url('../assets/fonts/Dalfitra.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ease-btn: cubic-bezier(0.25, 0, 0.25, 1);   /* every button: hover, press */
  /* Velvet: light and dark fibres, laid over the velvet colour in the hero arch, the wall's slots and the kit's tray */
  --velvet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='a' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.25' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 .86  0 0 0 0 .7  .5 0 0 0 -.22'/%3E%3C/filter%3E%3Cfilter id='b' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' seed='29' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 .9 0 0 -.33'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");
  /* Walnut: long stretched grain, laid in alpha over a near-black ground (the dark timber bands) */
  --walnut: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='1000'%3E%3Cfilter id='w' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0028 .0055' numOctaves='2' seed='5' result='b'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0018 .12' numOctaves='4' seed='23' result='g'/%3E%3CfeDisplacementMap in='g' in2='b' scale='90' xChannelSelector='R' yChannelSelector='G'/%3E%3CfeColorMatrix values='0 0 0 0 .2  0 0 0 0 .118  0 0 0 0 .064  .62 0 0 0 -.2'/%3E%3C/filter%3E%3Crect width='1920' height='1000' filter='url(%23w)'/%3E%3C/svg%3E");
  /* ---------- Typography ----------
     Headline: Dalfitra, for titles and large display type only. Its contrast is too fine for small sizes.
     Everything else: Ortica. The three tokens below stay so each role can be changed on its own later. */
  --font-body:    'Ortica', Georgia, 'Times New Roman', serif;
  --font-display: var(--font-body);
  --font-ui:      var(--font-body);
  --font-headline: 'Dalfitra', var(--font-body);
  --headline-track: 0.02em;      /* headlines are set in capitals; Dalfitra needs air so its N stays readable */

  --text-xs:   clamp(0.75rem,  1.2vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 1.4vw, 1rem);
  --text-base: clamp(1rem,     1.6vw, 1.125rem);

  /* ---------- Colour (dark only) ---------- */
  color-scheme: dark;
  --color-bg:       #0a0705;
  --color-text:     #f2e6d3;
  --color-line:     rgba(201, 154, 91, 0.3);
  --color-muted:    rgba(242, 230, 211, 0.64);
  --color-accent:   #f2e6d3;
  --color-raised:   #110b07;   /* a band a shade above the ground */
  --color-card:     #17100b;   /* cards on the ground */
  --color-gold:     #d3a566;   /* buttons, marks, rules */
  --color-gold-hi:  #efd3a0;   /* gold type, and buttons on hover */
  --color-paper:    #efdcc0;   /* real paper only: the Recognition Card */

  /* MALSON brass, from the blueprint logo colours */
  --color-brand:     #c99a5b;
  --color-brand-ink: #14100b;
  /* The hero's black leather: used by its doors and the footer */
  --felt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeDiffuseLighting lighting-color='%23fff' surfaceScale='1.6'%3E%3CfeDistantLight azimuth='235' elevation='55'/%3E%3C/feDiffuseLighting%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.1 0 0 0 -.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --felt-pit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='d' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.4 0 0 0 .62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23d)'/%3E%3C/svg%3E");
  --mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800'%3E%3Cfilter id='m' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.008' numOctaves='3' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .62 0 0 0 0 .14 0 0 0 0 .1 .5 0 0 0 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  /* Champagne through copper to deep umber and back. Runs left to right on the solid button, top to bottom on Our Story. */
  --grad-stops: #e6d3b0 0%, #c98d5a 6%, #a86a42 12%, #8c5a3b 18%, #734f38 24%, #5f4836 31%, #554534 40%, #4e4233 52%, #554535 60%, #6b4e39 69%, #865a3c 78%, #8f5e3e 84%, #a8714a 89%, #d0a974 95%, #e6d3b0 100%;

  /* Engraving finishes used by the tester */
  --finish-brass:  linear-gradient(180deg, #f3dca6 0%, #c9a46a 45%, #8a6a35 100%);
  --finish-silver: linear-gradient(180deg, #ffffff 0%, #c9ccd1 45%, #7d8187 100%);
  --finish-bronze: linear-gradient(180deg, #f0c09a 0%, #b07445 45%, #6e3f1e 100%);

  /* ---------- Spacing ---------- */
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;

  /* ---------- Layout ---------- */
  --container-gutter: clamp(1rem, 4vw, 5rem);
  --grid-gap: clamp(0.75rem, 2vw, 1.5rem);
  --nav-height: 72px;

  /* ---------- Motion ---------- */
  --duration-fast:  150ms;
  --duration-base:  300ms;
  --duration-slow:  600ms;
  --duration-xslow: 1000ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --radius-sm: 4px;
}