/* =========================================================================
   DTA Collectibles — design tokens, for the theme.

   The :root block below is copied VERBATIM from tokens.css, which is owned by
   Tyler and is not edited by anyone porting it. No value is changed. If the
   source file changes, re-copy this block rather than hand-patching it.

   Only the tokens are here. The rest of tokens.css — .site-header, .brand,
   .site-nav and the footer — belongs to header.php and the footer template,
   which are a separate port; duplicating them here would style a header this
   page does not render.
   ====================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Archivo+Narrow:wght@400;600&display=swap');


:root {

  /* ---------------------------------------------------------------------
     COLOUR — inherited, do not extend
     ------------------------------------------------------------------ */

  /* Accent. Live primary/hover pair. */
  --c-accent:          #fe5252;
  --c-accent-hover:    #d14242;

  /* Warm darks. Page header and footer on the live site. */
  --c-dark:            #322b2b;
  --c-darker:          #221d1d;
  --c-dark-mid:        #5b4f4f;

  /* Neutrals. */
  --c-text:            #666666;
  --c-text-strong:     #322b2b;   /* headings; reuses the warm dark */
  --c-text-invert:     #ffffff;
  --c-muted:           #efefef;

  --c-border:          #ececec;
  --c-border-focus:    #dddddd;

  --c-surface:         #ffffff;
  --c-surface-sunk:    #fafafa;   /* derived: neutral tint for table stripes */

  /* Semantic. Derived from the accent family rather than added hues. */
  --c-instock:         #322b2b;
  --c-soldout:         #999999;

  /* ---------------------------------------------------------------------
     TYPE
     ------------------------------------------------------------------ */

  --f-sans:            'Archivo', system-ui, -apple-system, sans-serif;
  --f-narrow:          'Archivo Narrow', 'Archivo', system-ui, sans-serif;

  /* Modular scale, 1.25 from a 16px base. Restrained on purpose: a catalogue
     page needs clear rank, not dramatic contrast. */
  --t-xs:              0.8125rem;  /* 13px — attribute labels, meta */
  --t-sm:              0.875rem;   /* 14px — secondary */
  --t-base:            1rem;       /* 16px — body */
  --t-md:              1.25rem;    /* 20px — price, sub-heads */
  --t-lg:              1.5625rem;  /* 25px — product heading, mobile */
  --t-xl:              1.9375rem;  /* 31px — product heading, desktop */
  --t-2xl:             2.4375rem;  /* 39px — page titles */

  --w-regular:         400;
  --w-medium:          500;
  --w-semibold:        600;
  --w-bold:            700;

  --lh-tight:          1.15;       /* headings */
  --lh-snug:           1.35;       /* short blocks, table cells */
  --lh-body:           1.6;        /* running text */

  /* Numerals are the workhorse here. Applied wherever figures line up in a
     column — attribute tables, price, grade, cert. */
  --num-tabular:       "tnum" 1, "lnum" 1;

  /* ---------------------------------------------------------------------
     SPACE — 4px base
     ------------------------------------------------------------------ */

  --s-1:               0.25rem;
  --s-2:               0.5rem;
  --s-3:               0.75rem;
  --s-4:               1rem;
  --s-5:               1.5rem;
  --s-6:               2rem;
  --s-7:               3rem;
  --s-8:               4rem;

  /* ---------------------------------------------------------------------
     STRUCTURE
     ------------------------------------------------------------------ */

  --radius:            2px;        /* near-square; these are flat paper goods */
  --radius-none:       0;

  --rule:              1px solid var(--c-border);
  --rule-strong:       1px solid var(--c-border-focus);

  --measure:           68ch;       /* max line length for running text */
  --page-max:          1200px;

  --focus-ring:        2px solid var(--c-accent);
  --focus-offset:      2px;
}