:root {

  /* Global tokens */

  --color-alert-100: #ffd1d1;
  --color-alert-200: #ffa3a3;
  --color-alert-300: #ff7575;
  --color-alert-400: #ff4747;
  --color-alert-500: #e51717;
  --color-alert-500-op70: #e51717b2;
  --color-alert-600: #b80000;
  --color-alert-600-op70: #b80000b2;
  --color-alert-700: #8a0000;
  --color-alert-800: #5c0000;
  --color-alert-900: #2e0000;
  --color-neutral-50: #fafafa;
  --color-neutral-100: #e6e6e6;
  --color-neutral-200: #cccccc;
  --color-neutral-300: #b3b3b3;
  --color-neutral-400: #999999;
  --color-neutral-500: #808080;
  --color-neutral-600: #666666;
  --color-neutral-700: #4d4d4d;
  --color-neutral-800: #232323;
  --color-neutral-800-op70: #232323b2;
  --color-neutral-900: #1a1a1a;
  --color-neutral-900-op70: #1a1a1ab2;
  --color-primary-100: #ffdbcc;
  --color-primary-200: #ffb899;
  --color-primary-300: #ff9565;
  --color-primary-400: #ff7334;
  --color-primary-500: #ff4d01;
  --color-primary-500-op70: #ff4d01b2;
  --color-primary-600: #cd3d00;
  --color-primary-600-op70: #cd3d00b2;
  --color-primary-700: #9a2e00;
  --color-primary-800: #671f00;
  --color-primary-900: #330f00;
  --color-secondary-100: #e6e2e0;
  --color-secondary-200: #cfc7c4;
  --color-secondary-300: #b6aaa5;
  --color-secondary-400: #9d8d86;
  --color-secondary-500: #82716a;
  --color-secondary-500-op70: #82716ab2;
  --color-secondary-600: #685a55;
  --color-secondary-600-op70: #685a55b2;
  --color-secondary-700: #4f4440;
  --color-secondary-800: #2e2826;
  --color-secondary-900: #191615;
  --color-success-100: #deffcf;
  --color-success-200: #bdff9e;
  --color-success-300: #94f268;
  --color-success-400: #6fe538;
  --color-success-500: #47cc0a;
  --color-success-500-op70: #47cc0ab2;
  --color-success-600: #3aa308;
  --color-success-700: #277a00;
  --color-success-800: #1a5200;
  --color-success-900: #0d2900;
  --color-warning-100: #fff4cc;
  --color-warning-200: #ffe998;
  --color-warning-300: #ffdd65;
  --color-warning-400: #f7cc32;
  --color-warning-500: #f2bd00;
  --color-warning-500-op70: #f2bd00b2;
  --color-warning-600: #c29700;
  --color-warning-700: #917100;
  --color-warning-800: #614c00;
  --color-warning-900: #302600;
  --color-facebook-200: #91bbf2;
  --color-facebook-500: #1877f2;
  --color-facebook-500-op70: #1877f2b2;
  --color-facebook-600: #005ac2;
  --color-facebook-600-op70: #005ac2b2;
  --color-facebook-800: #0a3266;

  --size-0: 0rem;
  --size-2: 0.125rem;
  --size-3: 0.1875rem;
  --size-4: 0.25rem;
  --size-6: 0.375rem;
  --size-8: 0.5rem;
  --size-10: 0.625rem;
  --size-12: 0.75rem;
  --size-14: 0.875rem;
  --size-16: 1rem;
  --size-18: 1.125rem;
  --size-20: 1.25rem;
  --size-22: 1.375rem;
  --size-24: 1.5rem;
  --size-26: 1.625rem;
  --size-28: 1.75rem;
  --size-32: 2rem;
  --size-36: 2.25rem;
  --size-40: 2.5rem;

/* Alias */

  --bg-alert: var(--color-alert-500-op70);
  --bg-alert-dark: var(--color-alert-600-op70);
  --bg-neutral-dark: var(--color-neutral-900-op70);
  --bg-neutral-dark-op100: var(--color-neutral-900);
  --bg-neutral-light: var(--color-neutral-800-op70);
  --bg-primary: var(--color-primary-500-op70);
  --bg-primary-dark: var(--color-primary-600-op70);
  --bg-primary-dark-op100: var(--color-primary-600);
  --bg-secondary: var(--color-secondary-500-op70);
  --bg-secondary-dark: var(--color-secondary-600-op70);
  --bg-success: var(--color-success-500-op70);
  --bg-warning: var(--color-warning-500-op70);
  --bg-white: var(--color-neutral-50);
  --bg-facebook: var(--color-facebook-500-op70);
  --bg-facebook-dark: var(--color-facebook-600-op70);

  --border-alert: var(--color-alert-500);
  --border-alert-dark: var(--color-alert-600);
  --border-alert-light: var(--color-alert-200);
  --border-neutral: var(--color-neutral-900);
  --border-primary: var(--color-primary-500);
  --border-primary-dark: var(--color-primary-600);
  --border-primary-light: var(--color-primary-200);
  --border-secondary: var(--color-secondary-500);
  --border-secondary-dark: var(--color-secondary-600);
  --border-secondary-light: var(--color-secondary-200);
  --border-success: var(--color-success-500);
  --border-warning: var(--color-warning-500);
  --border-facebook: var(--color-facebook-500);
  --border-facebook-dark: var(--color-facebook-600);
  --border-facebook-light: var(--color-facebook-200);

  --icon-disabled: var(--color-neutral-700);
  --icon-primary: var(--color-primary-500);
  --icon-white: var(--color-neutral-50);

  --text-alert: var(--color-alert-500);
  --text-black: var(--color-neutral-900);
  --text-disabled: var(--color-neutral-700);
  --text-grey: var(--color-neutral-300);
  --text-placeholder: var(--color-neutral-500);
  --text-primary: var(--color-primary-500);
  --text-white: var(--color-neutral-50);

  --radius-0: var(--size-0);
  --radius-8: var(--size-8);
  --radius-10: var(--size-10);
  --radius-12: var(--size-12);
  --radius-14: var(--size-14);
  --radius-16: var(--size-16);
  --radius-18: var(--size-18);
  --radius-22: var(--size-22);
  --radius-24: var(--size-24);
  --radius-26: var(--size-26);
  --radius-max: 624.9375rem;

  --sizing-12: var(--size-12);
  --sizing-14: var(--size-14);
  --sizing-16: var(--size-16);
  --sizing-18: var(--size-18);
  --sizing-24: var(--size-24);
  --sizing-28: var(--size-28);

  --spacing-0: var(--size-0);
  --spacing-2: var(--size-2);
  --spacing-3: var(--size-3);
  --spacing-4: var(--size-4);
  --spacing-6: var(--size-6);
  --spacing-8: var(--size-8);
  --spacing-10: var(--size-10);
  --spacing-12: var(--size-12);
  --spacing-14: var(--size-14);
  --spacing-16: var(--size-16);
  --spacing-18: var(--size-18);
  --spacing-20: var(--size-20);
  --spacing-22: var(--size-22);
  --spacing-24: var(--size-24);
  --spacing-26: var(--size-26);
  --spacing-28: var(--size-28);
  --spacing-32: var(--size-32);

/* Component-spesific */

  --btn-alert-bg-default: var(--bg-alert);
  --btn-alert-bg-disabled: var(--bg-alert);
  --btn-alert-bg-focus: var(--bg-alert);
  --btn-alert-bg-hover: var(--bg-alert);
  --btn-alert-bg-pressed: var(--bg-alert-dark);
  --btn-alert-border-default: var(--border-alert);
  --btn-alert-border-disabled: var(--border-alert);
  --btn-alert-border-focus: var(--border-alert-light);
  --btn-alert-border-hover: var(--border-alert);
  --btn-alert-border-pressed: var(--border-alert-dark);
  --btn-primary-bg-default: var(--bg-primary);
  --btn-primary-bg-default-op100: var(--bg-primary-dark-op100);
  --btn-primary-bg-disabled: var(--bg-primary);
  --btn-primary-bg-focus: var(--bg-primary);
  --btn-primary-bg-hover: var(--bg-primary);
  --btn-primary-bg-pressed: var(--bg-primary-dark);
  --btn-primary-border-default: var(--border-primary);
  --btn-primary-border-disabled: var(--border-primary);
  --btn-primary-border-focus: var(--border-primary-light);
  --btn-primary-border-hover: var(--border-primary);
  --btn-primary-border-pressed: var(--border-primary-dark);
  --btn-secondary-bg-default: var(--bg-secondary);
  --btn-secondary-bg-disabled: var(--bg-secondary);
  --btn-secondary-bg-focus: var(--bg-secondary);
  --btn-secondary-bg-hover: var(--bg-secondary);
  --btn-secondary-bg-pressed: var(--bg-secondary-dark);
  --btn-secondary-border-default: var(--border-secondary);
  --btn-secondary-border-disabled: var(--border-secondary);
  --btn-secondary-border-focus: var(--border-secondary-light);
  --btn-secondary-border-hover: var(--border-secondary);
  --btn-secondary-border-pressed: var(--border-secondary-dark);
  --btn-radius-sm: var(--radius-16);
  --btn-radius-md: var(--radius-18);
  --btn-radius-lg: var(--radius-22);
  --btn-radius-xl: var(--radius-24);
  --btn-v-padding-sm: var(--spacing-16);
  --btn-h-padding-sm: var(--spacing-20);
  --btn-v-padding-md: var(--spacing-20);
  --btn-h-padding-md: var(--spacing-24);
  --btn-v-padding-lg: var(--spacing-24);
  --btn-h-padding-lg: var(--spacing-28);
  --btn-v-padding-xl: var(--spacing-28);
  --btn-h-padding-xl: var(--spacing-32);
  --btn-facebook-bg-default: var(--bg-facebook);
  --btn-facebook-bg-disabled: var(--bg-facebook);
  --btn-facebook-bg-focus: var(--bg-facebook);
  --btn-facebook-bg-hover: var(--bg-facebook);
  --btn-facebook-bg-pressed: var(--bg-facebook-dark);
  --btn-facebook-border-default: var(--border-facebook);
  --btn-facebook-border-disabled: var(--border-facebook);
  --btn-facebook-border-focus: var(--border-facebook-light);
  --btn-facebook-border-hover: var(--border-facebook);
  --btn-facebook-border-pressed: var(--border-facebook-dark);

  --input-bg-alert: var(--bg-neutral-dark);
  --input-bg-default: var(--bg-neutral-dark);
  --input-bg-disabled: var(--bg-neutral-light);
  --input-bg-selected: var(--bg-neutral-dark);
  --input-border-alert: var(--border-alert);
  --input-border-default: var(--border-neutral);
  --input-border-disabled: var(--border-neutral);
  --input-border-selected: var(--border-primary);
  --input-radius-sm: var(--radius-10);
  --input-radius-lg: var(--radius-18);
  --input-h-padding-sm: var(--spacing-16);
  --input-v-padding-sm: var(--spacing-16);
  --input-h-padding-lg: var(--spacing-18);
  --input-v-padding-lg: var(--spacing-18);
 
  --info-bg-default: var(--bg-neutral-dark);
  --info-bg-alert: var(--bg-alert);
  --info-radius-sm: var(--radius-10);
  --info-radius-lg: var(--radius-12);
  --info-gap-sm: var(--spacing-8);
  --info-h-padding-sm: var(--spacing-10);
  --info-v-padding-sm: var(--spacing-10);
  --info-gap-lg: var(--spacing-12);
  --info-h-padding-lg: var(--spacing-14);
  --info-v-padding-lg: var(--spacing-14);
  --info-icon-sm: var(--sizing-12);
  --info-icon-lg: var(--sizing-16);

  --counter-bg: var(--bg-primary);
  --counter-radius-max: var(--radius-max);
  --counter-sm: var(--sizing-18);
  --counter-lg: var(--sizing-24);

  --opponent-score-bg-dark: var(--bg-neutral-dark);
  --opponent-score-bg-default: var(--bg-primary);
  --opponent-score-radius-max: var(--radius-max);
  --opponent-score-v-padding-sm: var(--spacing-4);
  --opponent-score-h-padding-sm: var(--spacing-6);
  --opponent-score-v-padding-lg: var(--spacing-6);
  --opponent-score-h-padding-lg: var(--spacing-8);

  --player-score-bg: var(--bg-white);
  --player-score-radius-max: var(--radius-max);
  --player-score-h-padding-lg: var(--spacing-8);
  --player-score-v-padding-lg: var(--spacing-8);
  --player-score-height-lg: var(--sizing-28);
  --player-score-h-padding-sm: var(--spacing-4);
  --player-score-v-padding-sm: var(--spacing-4);
  --player-score-height-sm: var(--sizing-16);

  --facebook-color: var(--color-primary-500);
  --facebook-color-hover: var(--color-primary-600);
  --facebook-color-pressed: var(--color-primary-700);
  --facebook-color-disabled: var(--color-neutral-200);
  --facebook-color-text: var(--color-neutral-50);
  --facebook-color-text-hover: var(--color-neutral-50);
  --facebook-color-text-pressed: var(--color-neutral-50);
  --facebook-color-text-disabled: var(--color-neutral-200);
  --facebook-radius: var(--radius-8);
  --facebook-padding: var(--spacing-12);
  --facebook-icon-size: var(--sizing-16);
  --facebook-icon-margin: var(--spacing-4);
}