/* $primary: #ff886c; */
$breakpoint0: 540px;
$breakpoint: 720px;
$breakpoint2: 900px;
$breakpoint3: 1200px;
$breakpoint4: 1500px;
$primary: #ff6c88;

$background: #fff;
$background-dim: #fafafa;
$text: #222;
$text-contrast: #fff;

$shadow: rgba(0, 0, 0, .5);
$shadow-extreme: rgba(0, 0, 0, .9);
$shadow-strong: rgba(0, 0, 0, .7);
$shadow-weak: rgba(0, 0, 0, .2);
$shadow-hint: rgba(0, 0, 0, .1);

$highlight: rgba(255, 255, 255, .5);
$highlight-extreme: rgba(255, 255, 255, .9);
$highlight-strong: rgba(255, 255, 255, .7);
$highlight-weak: rgba(255, 255, 255, .2);
$highlight-hint: rgba(255, 255, 255, .075);

$logo-shadow: drop-shadow(1px 0 0 var(--shadow-weak)) drop-shadow(-1px 0 0 var(--shadow-weak)) drop-shadow(0 1px 0 var(--shadow-weak)) drop-shadow(0 -1px 0 var(--shadow-weak));
$logo-highlight: drop-shadow(0 0 1px var(--highlight));

$profile: #222;
$tile: #2a2a2a;

$link: #dd6688;
$empty: #333;

$male: #0af;
$female: #f0a;

:root {
    --primary: #ff6c88;

    --text-dark: #222;
    --text-light: #fff;

    --darken: rgba(0, 0, 0, .5);
    --darken-strong: rgba(0, 0, 0, .7);
    --darken-extreme: rgba(0, 0, 0, .9);
    --darken-weak: rgba(0, 0, 0, .2);
    --darken-hint: rgba(0, 0, 0, .1);

    --lighten: rgba(255, 255, 255, .5);
    --lighten-strong: rgba(255, 255, 255, .7);
    --lighten-extreme: rgba(255, 255, 255, .9);
    --lighten-weak: rgba(255, 255, 255, .2);
    --lighten-hint: rgba(255, 255, 255, .1);

    --logo-shadow: drop-shadow(1px 0 0 $shadow-weak) drop-shadow(-1px 0 0 $shadow-weak) drop-shadow(0 1px 0 $shadow-weak) drop-shadow(0 -1px 0 $shadow-weak);
    --logo-highlight: drop-shadow(0 0 1px $highlight);
}

.light {
    --text: #222;
    --text-contrast: #fff;

    --background: #fff;
    --background-dim: #fafafa;

    --profile: #222;
    --tile: #2a2a2a;

    --link: #dd6688;
    --empty: #333;

    --male: #0af;
    --female: #f0a;

    --shadow: rgba(0, 0, 0, .5);
    --shadow-extreme: rgba(0, 0, 0, .9);
    --shadow-strong: rgba(0, 0, 0, .7);
    --shadow-weak: rgba(0, 0, 0, .2);
    --shadow-hint: rgba(0, 0, 0, .1);

    --highlight: rgba(255, 255, 255, .5);
    --highlight-extreme: rgba(255, 255, 255, .9);
    --highlight-strong: rgba(255, 255, 255, .7);
    --highlight-weak: rgba(255, 255, 255, .2);
    --highlight-hint: rgba(255, 255, 255, .075);
}

.dark {
    --text: #fff;
    --text-contrast: #222;

    --background: #222;
    --background-dim: #181818;

    --profile: #222;
    --tile: #2a2a2a;

    --link: #dd6688;
    --empty: #333;

    --male: #0af;
    --female: #f0a;

    --shadow: rgba(255, 255, 255, .5);
    --shadow-extreme: rgba(255, 255, 255, .9);
    --shadow-strong: rgba(255, 255, 255, .7);
    --shadow-weak: rgba(255, 255, 255, .2);
    --shadow-hint: rgba(255, 255, 255, .075);

    --highlight: rgba(0, 0, 0, .5);
    --highlight-extreme: rgba(0, 0, 0, .9);
    --highlight-strong: rgba(0, 0, 0, .7);
    --highlight-weak: rgba(0, 0, 0, .2);
    --highlight-hint: rgba(0, 0, 0, .1);
}