/* CreatStrat brand tokens.
   The only stylesheet that holds color values. Every other file reads these
   custom properties. Load order: fonts.css, brand.css, site.css, one page file. */

:root {
  /* Core palette */
  --paper: #f7f6f2;
  --white: #fff;
  --ink: #0b0a12;
  --ink-2: #24212c;
  --ink-3: #15131d;
  --ink-4: #1d1a28;
  --muted: #625e6b;
  --line: #dedbe3;
  --violet: #6437ff;
  --violet-dark: #4d23dc;
  --violet-soft: #eee9ff;
  --violet-bright: #8a66ff;
  --lime: #b8ff38;
  --lime-soft: #eaffbd;

  /* Channel values for translucent layers: rgb(var(--ink-rgb) / 5%) */
  --ink-rgb: 11 10 18;
  --violet-rgb: 100 55 255;
  --violet-dark-rgb: 77 35 220;
  --lime-rgb: 184 255 56;
  --paper-rgb: 247 246 242;
  --white-rgb: 255 255 255;
  --black-rgb: 0 0 0;

  /* Supporting neutrals */
  --field: #fbfaf8;
  --placeholder: #9a96a3;
  --mist: #efedf2;
  --mist-2: #e9e6ee;
  --mist-line: #c9c5d1;
  --track: #f0eef3;

  /* Text and rules on dark and violet grounds */
  --on-dark: #b8b3c6;
  --on-dark-2: #c9c5d6;
  --on-dark-3: #d6d2e0;
  --on-dark-faint: #8a8499;
  --on-violet: #e4dcff;
  --line-dark: #2c2937;
  --line-dark-2: #3a3550;
  --ring: #4b4760;
  --tab-on: #221d33;
  --night: #07070b;
  --night-2: #16131f;
  --night-line: #1f1c29;

  /* Signals */
  --note: #fff6b8;
  --doc: #4a86ff;
  --ok: #3b8a12;
  --star: #f5b301;
  --error: #c42a4a;
  --error-on-dark: #ff9cac;
  --warn: #8a4b00;
  --warn-soft: #fff1d9;
  --warn-line: #f5d9a8;
  --lime-strong: #7fcf12;

  /* NORTHLINE, the app's demo brand. Only its HTML ads in the product-page
     illustrations use these. */
  --nl-teal: #194b5f;
  --nl-deep: #0f3342;
  --nl-cream: #f4eee2;
  --nl-orange: #f28c38;
  --nl-sky: #bfe3ea;
  --nl-aqua: #4bb7c5;
  --nl-sand: #e7e0d2;

  /* Type */
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-h1: 80px;
  --fs-h2: 62px;
  --fs-h3: 30px;
  --fs-lead: 19px;
  --fs-body: 16px;
  --fs-small: 14px;
  --track-h1: -0.062em;
  --track-h2: -0.055em;
  --track-h3: -0.04em;

  /* Space and layout */
  --wrap: 1240px;
  --gutter: 24px;
  --section-y: 128px;
  --nav-h: 76px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Radius */
  --r-xs: 5px;
  --r-sm: 7px;
  --r: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 22px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* Shadow */
  --shadow-card: 0 24px 50px -30px rgb(var(--ink-rgb) / 35%);
  --shadow-lift: 0 40px 70px -30px rgb(var(--ink-rgb) / 60%);
  --shadow-tile: 0 18px 30px -18px rgb(var(--black-rgb) / 60%);

  /* Motion */
  --ease-out: cubic-bezier(.2, .9, .3, 1);
  --ease-pop: cubic-bezier(.2, 1.4, .4, 1);
  --ease-draw: cubic-bezier(.6, 0, .2, 1);
  --dur-fast: 160ms;
  --dur-reveal: 700ms;
  --stage-dwell: 5.5s;
}

@media (max-width: 700px) {
  :root {
    --fs-h1: 50px;
    --fs-h2: 40px;
    --fs-lead: 17px;
    --gutter: 18px;
    --section-y: 80px;
    --nav-h: 62px;
  }
}