/* coreservices.shop | design tokens
   Every value is taken from a cs script. cs_banking draws in px at 1080p, so
   its numbers are used as they are. Change the theme in the three --accent
   lines, everything else follows from them. */

@font-face { font-family: "Gilroy"; font-weight: 400; font-display: swap; src: url("../assets/fonts/gilroy-400.woff2") format("woff2"); }
@font-face { font-family: "Gilroy"; font-weight: 500; font-display: swap; src: url("../assets/fonts/gilroy-500.woff2") format("woff2"); }
@font-face { font-family: "Gilroy"; font-weight: 600; font-display: swap; src: url("../assets/fonts/gilroy-600.woff2") format("woff2"); }
@font-face { font-family: "Gilroy"; font-weight: 800; font-display: swap; src: url("../assets/fonts/gilroy-800.woff2") format("woff2"); }
/* Brothership lists ä ö ü Ä Ö Ü but their outlines are empty, so a word with
   an umlaut loses the letter. Those six are cut out here, and cs.js draws the
   base letter with two dots over it. */
@font-face { font-family: "Brothership"; font-weight: 400; font-display: swap; src: url("../assets/fonts/brothership.woff2") format("woff2");
  unicode-range: U+0000-00C3, U+00C5-00D5, U+00D7-00DB, U+00DD-00E3, U+00E5-00F5, U+00F7-00FB, U+00FD-FFFF; }

:root {
  color-scheme: dark;

  /* theme, Config.Theme = '#1A96CF' */
  --accent: #1A96CF;
  --accent-deep: #134F6B;
  --accent-line: #1B9AD5;

  /* the accent alpha ladder every script uses */
  --accent-12: rgb(26 150 207 / .12);
  --accent-20: rgb(26 150 207 / .20);
  --accent-26: rgb(26 150 207 / .26);
  --accent-40: rgb(26 150 207 / .40);
  --accent-55: rgb(26 150 207 / .55);

  /* ground. The scripts draw their panels over the game at 96%, lit by two
     soft lights, so what a player sees is a mid teal, not black. The page is
     that lit panel. */
  --ground-top: #0F3A4A;
  --ground-mid: #0A2A37;
  --ground-end: #061B24;
  --ground: #08222D;
  --panel: radial-gradient(100% 100% at 50% 0%, rgb(17 62 79 / .97) 0%, rgb(7 32 42 / .97) 100%);
  --panel-deep: radial-gradient(100% 100% at 50% 0%, rgb(9 41 53 / .97) 0%, rgb(3 20 27 / .97) 100%);
  --sunk: rgb(0 0 0 / .28);

  /* text */
  --text: #FFFFFF;
  --text-body: rgb(255 255 255 / .72);
  --text-soft: rgb(255 255 255 / .55);
  --text-faint: rgb(255 255 255 / .30);
  --text-silver: radial-gradient(70.24% 70.24% at 50% 50%, #FFFFFF 0%, #696969 100%);
  --text-accent: radial-gradient(70.24% 70.24% at 50% 50%, #1B98D1 0%, #145573 100%);

  /* lines */
  --rule: rgb(255 255 255 / .15);
  --hair: rgb(255 255 255 / .08);
  --hairline: max(1px, .0625rem);

  /* surfaces, cs_banking */
  --surface-row: radial-gradient(141.05% 2978.01% at 0% 11.46%, rgb(255 255 255 / .10) 0%, rgb(255 255 255 / .03) 100%);
  --surface-tile: radial-gradient(168.34% 126.46% at 50% 0%, rgb(255 255 255 / .15) 0%, rgb(255 255 255 / 0) 100%);
  --surface-rest: radial-gradient(88.26% 88.26% at 50% 50%, rgb(208 208 208 / .16) 0%, rgb(185 185 185 / .07) 100%);
  --surface-lit: radial-gradient(70% 70% at 50% 50%, rgb(28 154 211 / .25) 0%, rgb(19 81 109 / .25) 100%);

  /* the ring every outlined box wears, cs_config .edge */
  --stroke: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 100 100'%3E%3Cdefs%3E%3CradialGradient id='g' cx='0' cy='0' r='1' gradientTransform='matrix(.17027 1.56757 -1.56757 4.25676 .5 .5)'%3E%3Cstop stop-color='%23D9D9D9' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23D9D9D9' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='100' height='100' fill='url(%23g)'/%3E%3C/svg%3E");
  --stroke-lit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 100 100'%3E%3Cdefs%3E%3CradialGradient id='g' cx='0' cy='0' r='1' gradientTransform='matrix(.17027 1.56757 -1.56757 4.25676 .5 .5)'%3E%3Cstop stop-color='%231A96CF'/%3E%3Cstop offset='1' stop-color='%231A96CF' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='100' height='100' fill='url(%23g)'/%3E%3C/svg%3E");

  /* meaning, one set for the whole site */
  --good: #46C77E;
  --bad: #E4606D;
  --warn: #E0A93B;
  --close: #FF4848;
  --close-deep: #241313;
  --cancel: rgb(207 26 26);

  /* type */
  --font: "Gilroy", system-ui, -apple-system, "Segoe UI", sans-serif;
  --script: "Brothership", "Gilroy", cursive;
  --mono: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;

  /* The script word is set about as big as the name. The scripts set it 20%
     smaller, but their names are in capitals, which stand taller. */
  --fs-display: clamp(40px, 2.4rem + 2.2vw, 64px);
  --fs-display-acc: clamp(38px, 2.3rem + 2.1vw, 62px);
  --fs-h2: clamp(30px, 1.6rem + 1.4vw, 44px);
  --fs-h2-acc: clamp(29px, 1.55rem + 1.35vw, 42px);
  --fs-h3: 20px;
  --fs-body: clamp(16px, .95rem + .1vw, 17px);
  --fs-small: 14px;
  --fs-label: 12px;

  /* radii, cs_config scale in px */
  --r-chip: 3px;
  --r-row: 5px;
  --r-ctl: 6px;
  --r-card: 10px;
  --r-win: 18px;
  --r-panel: 26px;

  /* space */
  --gut: clamp(16px, 4vw, 56px);
  --max: 1200px;
  --sec: clamp(72px, 9vw, 128px);

  /* motion, the pair every cs window opens and closes on */
  --ease-in: cubic-bezier(.16, 1, .3, 1);
  --ease-out: cubic-bezier(.4, 0, 1, 1);
}