/*
 * Tachyons config
 *
 * Don't add new variables or change variable names,
 * but you can change the values.
 *
 * I don't like the naming here, so for some of these
 * I'm using custom variables as the value (so that the
 * better-named ones can be used in the rest of the CSS
 * instead of these ones).
 *
 * Eg. $spacing-extra-extra-extra-large: $sp7;
 */

// Typography

$sans-serif: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, helvetica,
  'helvetica neue', ubuntu, roboto, noto, 'segoe ui', arial, sans-serif;
$serif: georgia, serif;
$code: consolas, monaco, monospace;
$font-size-headline: $f00;
$font-size-subheadline: $f0;
$font-size-1: $f1;
$font-size-2: $f2;
$font-size-3: $f3;
$font-size-4: $f4;
$font-size-5: $f5;
$font-size-6: $f6;
$font-size-7: $f7;
$letter-spacing-tight: -0.05em;
$letter-spacing-1: 0.1em;
$letter-spacing-2: 0.25em;
$line-height-solid: 1;
$line-height-title: 1.25;
$line-height-copy: 1.5;

// Spacing

$measure: 30em;
$measure-narrow: 20em;
$measure-wide: 34em;
$spacing-none: 0;
$spacing-extra-small: $sp1;
$spacing-small: $sp2;
$spacing-medium: $sp3;
$spacing-large: $sp4;
$spacing-extra-large: $sp5;
$spacing-extra-extra-large: $sp6;
$spacing-extra-extra-extra-large: $sp7;
$spacing-copy-separator: 1.5em;

// Dimensions

$height-1: 1rem;
$height-2: 2rem;
$height-3: 4rem;
$height-4: 8rem;
$height-5: 16rem;
$width-1: 1rem;
$width-2: 2rem;
$width-3: 4rem;
$width-4: 8rem;
$width-5: 16rem;

$max-width-1: 1rem;
$max-width-2: 2rem;
$max-width-3: 4rem;
$max-width-4: 8rem;
$max-width-5: 16rem;
$max-width-6: 32rem;
$max-width-7: 48rem;
$max-width-8: 64rem;
$max-width-9: 96rem;

// Border

$border-radius-none: 0;
$border-radius-1: 0.125rem;
$border-radius-2: 0.25rem;
$border-radius-3: 0.5rem;
$border-radius-4: 1rem;
$border-radius-circle: 100%;
$border-radius-pill: 9999px;
$border-width-none: 0;
$border-width-1: 0.125rem;
$border-width-2: 0.25rem;
$border-width-3: 0.5rem;
$border-width-4: 1rem;
$border-width-5: 2rem;

// Box shadow

$box-shadow-1: 0px 0px 4px 2px rgba(0, 0, 0, 0.2);
$box-shadow-2: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
$box-shadow-3: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
$box-shadow-4: 2px 2px 8px 0px rgba(0, 0, 0, 0.2);
$box-shadow-5: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);

// Colors

$black: #000;
$near-black: #111;
$dark-gray: #333;
$mid-gray: #555;
$gray: #777;
$silver: #999;
$light-silver: rgba(0, 0, 0, 0.12);

$moon-gray: #ccc;
$light-gray: #eee;
$near-white: #fafafa;
$white: #fff;
$transparent: transparent;

$black-90: rgba(0, 0, 0, 0.9);
$black-80: rgba(0, 0, 0, 0.8);
$black-70: rgba(0, 0, 0, 0.7);
$black-60: rgba(0, 0, 0, 0.6);
$black-50: rgba(0, 0, 0, 0.5);
$black-40: rgba(0, 0, 0, 0.4);
$black-30: rgba(0, 0, 0, 0.3);
$black-20: rgba(0, 0, 0, 0.2);
$black-10: rgba(0, 0, 0, 0.1);
$black-05: rgba(0, 0, 0, 0.05);
$black-025: rgba(0, 0, 0, 0.025);
$black-0125: rgba(0, 0, 0, 0.0125);

$white-90: rgba(255, 255, 255, 0.9);
$white-80: rgba(255, 255, 255, 0.8);
$white-70: rgba(255, 255, 255, 0.7);
$white-60: rgba(255, 255, 255, 0.6);
$white-50: rgba(255, 255, 255, 0.5);
$white-40: rgba(255, 255, 255, 0.4);
$white-30: rgba(255, 255, 255, 0.3);
$white-20: rgba(255, 255, 255, 0.2);
$white-10: rgba(255, 255, 255, 0.1);
$white-05: rgba(255, 255, 255, 0.05);
$white-025: rgba(255, 255, 255, 0.025);
$white-0125: rgba(255, 255, 255, 0.0125);

$dark-red: #e7040f;
$red: #ff4136;
$light-red: #ff725c;
$orange: #ff6300;
$gold: #ffb700;
$yellow: #ffd700;
$light-yellow: #fbf1a9;
$purple: #5e2ca5;
$light-purple: #a463f2;
$dark-pink: #d5008f;
$hot-pink: #ff41b4;
$pink: #ff80cc;
$light-pink: #ffa3d7;
$dark-green: #137752;
$green: #19a974;
$light-green: #9eebcf;
$navy: #001b44;
$dark-blue: #00449e;
$blue: #357edd;
$light-blue: #96ccff;
$lightest-blue: #cdecff;
$washed-blue: #f6fffe;
$washed-green: #e8fdf5;
$washed-yellow: #fffceb;
$washed-red: #ffdfdf;

// Breakpoints
$breakpoint-not-small: $screen-min-ns;
$breakpoint-medium: $screen-min-m;
$breakpoint-large: $screen-min-l;

.pa-default {
  padding: 0.75rem;
}
