/* Young Marketers — colour.
   Sampled from the supplied assets, not invented:
   --ym-red        #EC2227  the logo red, measured off YoungMarketers_Logo.png. THE brand red.
   --ym-red-deep   #BF1E2E  measured off the S15 posters + declared --red in the Registration Guide.
                            Used for LARGE fills (bars, stat blocks, page furniture) where the logo
                            red would vibrate against black.
   --ym-red-dark   #8C1622  declared --deep in the Registration Guide. Shadow diamonds, pressed states.
   --ym-ink        #231F20  the logo ink. Type and rules on paper.
   --ym-black      #000000  the poster ground. Only ever a full-bleed background, never type. */

:root {
  /* ---- base: red ---- */
  --ym-red: #EC2227;
  --ym-red-deep: #BF1E2E;
  --ym-red-dark: #8C1622;
  --ym-red-light: #FF5561;

  /* ---- base: neutral ---- */
  --ym-black: #000000;
  --ym-ink: #231F20;
  --ym-graphite: #2A2A2A;
  --ym-mute: #7A7A7A;
  --ym-mute-aa: #6B6B6B;   /* 4.52:1 on paper. Use for muted type BELOW 18.66px — #7A7A7A is
                              4.29:1, which passes only as large text. */
  --ym-rule: #DCDCDC;
  --ym-tint: #F5F2F2;
  --ym-paper: #FFFFFF;

  /* ---- on-dark alpha ladder (white over black) ---- */
  --ym-on-dark-100: #FFFFFF;
  --ym-on-dark-82: rgba(255, 255, 255, 0.82);
  --ym-on-dark-60: rgba(255, 255, 255, 0.60);
  --ym-on-dark-55: rgba(255, 255, 255, 0.55);
  --ym-on-dark-28: rgba(255, 255, 255, 0.28);
  --ym-on-dark-25: rgba(255, 255, 255, 0.25);
  --ym-on-dark-12: rgba(255, 255, 255, 0.12);

  /* ---- semantic: text ---- */
  --ym-text-primary: var(--ym-ink);
  --ym-text-secondary: var(--ym-graphite);
  --ym-text-muted: var(--ym-mute-aa);
  --ym-text-muted-large: var(--ym-mute);   /* 18.66px and up, or 14px semibold */
  --ym-text-accent: var(--ym-red-deep);
  --ym-text-on-red: var(--ym-paper);
  --ym-text-on-dark: var(--ym-on-dark-100);
  --ym-text-on-dark-secondary: var(--ym-on-dark-82);
  --ym-text-on-dark-muted: var(--ym-on-dark-60);
  --ym-text-accent-on-dark: var(--ym-red-light);

  /* ---- semantic: surface ---- */
  --ym-surface-page: var(--ym-paper);
  --ym-surface-tint: var(--ym-tint);
  --ym-surface-ink: var(--ym-ink);
  --ym-surface-dark: var(--ym-black);
  --ym-surface-red: var(--ym-red-deep);

  /* ---- semantic: border ---- */
  --ym-border-hair: var(--ym-rule);
  --ym-border-strong: var(--ym-ink);
  --ym-border-hair-on-dark: var(--ym-on-dark-25);
  --ym-border-strong-on-dark: var(--ym-on-dark-100);

  /* ---- data ramp — charts and exhibits ----
     One red, then a neutral descent. Two reds in one exhibit is two arguments. */
  --ym-data-1: #BF1E2E;
  --ym-data-2: #231F20;
  --ym-data-3: #7A7A7A;
  --ym-data-4: #B0B0B0;
  --ym-data-5: #DCDCDC;
  --ym-data-6: #EFEFEF;
  /* inverted for the dark ground */
  --ym-data-dark-1: #FF5561;
  --ym-data-dark-2: #FFFFFF;
  --ym-data-dark-3: rgba(255,255,255,.62);
  --ym-data-dark-4: rgba(255,255,255,.42);
  --ym-data-dark-5: rgba(255,255,255,.26);
  --ym-data-dark-6: rgba(255,255,255,.14);

  /* ---- links ---- */
  --ym-link: var(--ym-red-deep);
  --ym-link-hover: var(--ym-ink);
  --ym-link-on-dark: var(--ym-red-light);
  --ym-link-on-dark-hover: var(--ym-paper);

  /* ---- the signature dark ground ----
     black + rotated red diamonds + a 105deg black veil. Recipe, not a gradient background. */
  --ym-veil-dark: linear-gradient(105deg, #000 0%, #000 46%, rgba(0, 0, 0, 0.72) 66%, rgba(0, 0, 0, 0.55) 100%); /* @kind color */
}

/* Links must never fall back to browser blue. */
a { color: var(--ym-link); }
a:hover { color: var(--ym-link-hover); }
.ym-dark a { color: var(--ym-link-on-dark); }
.ym-dark a:hover { color: var(--ym-link-on-dark-hover); }