settings.pcss

/*
Custom media queries
Use as @media (--medium) { … }
*/
@custom-media --extra-small (width < 480px);
@custom-media --small (width >= 480px);
@custom-media --medium (width >= 768px);
@custom-media --large (width >= 960px);
@custom-media --extra-large (width >= 1100px);
@custom-media --only-small (480px < width <= 768px);
@custom-media --only-medium (768px < width <= 960px);
@custom-media --only-large (960px < width <= 1100px);

:root {
  /* Font size for small devices */
  --font-size: 16px;

  /* Font size for large devices */
  --font-size-large: 18px;

  /* Space between characters */
  --letter-spacing: 0.05em;

  /* Type scale ratio
      Suggested values:
      minor-second:     1.067
      major-second:     1.125
      minor-third:      1.200
      major-third:      1.250
      perfect-fourth:   1.333
      augmented-fourth: 1.414
      perfect-fifth:    1.500
      golden-ratio:     1.618
  */
  --type-ratio: 1.2;

  /* Enable margins to all the elements except the first one in each nesting level */
  --automargin: 1lh;

  /* Font families */
  --font-primary: "Helvetica", "Arial", sans-serif;
  --font-secondary: "Helvetica", "Arial", sans-serif;
  --font-mono: "Consolas", monospace;
  --font-print-primary: "Georgia", "Times New Roman", "Times", serif;
  --font-print-secondary: "Georgia", "Times New Roman", "Times", serif;

  /* Transitions */
  --transition-duration: 150ms;

  /* Spacing */
  --spacing-xs: 0.5lh;
  --spacing-s: 1lh;
  --spacing-m: 2lh;
  --spacing-l: 3lh;
  --spacing-xl: 4lh;

  /* Color palette */
  --color-base-primary: #C65146;
  --color-base-selection: #EBE1D3;
  --color-base-lines: #DCDCDC;

  --color-text-primary: #444444;
  --color-text-secondary: #777777;
  --color-text-heading: #222222;
  --color-text-inverted: white;

  --color-background-dark: #32373d;
  --color-background-light: #f5f5f5;
  --color-background-body: white;

  --color-state-muted: #eeeeee;
  --color-state-success: #10a887;
  --color-state-warning: #F17F42;
  --color-state-error: #da3c3c;

  --color-blue-darker: #1573b6;
  --color-blue-dark: #1e80c6;
  --color-blue-base: #2b90d9;
  --color-blue-light: #3fa2e9;
  --color-blue-lighter: #4eb1f9;

  --color-green-darker: #089073;
  --color-green-dark: #0b9d7d;
  --color-green-base: #10a887;
  --color-green-light: #1eb896;
  --color-green-lighter: #28ceaa;

  --color-red-darker: #653131;
  --color-red-dark: #b73333;
  --color-red-base: #da3c3c;
  --color-red-light: #f25a5a;
  --color-red-lighter: #fa8181;

  --color-gray-darker: #333333;
  --color-gray-dark: #4d4d4d;
  --color-gray-base: #666666;
  --color-gray-light: #808080;
  --color-gray-lighter: #999999;
}