/* -æ--------- Fonts ---------- */

/* Self-hosted so no visitor data is sent to Google, and swap shows text in a fallback font while the file loads */
@font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/barlow-condensed-700.woff2') format('woff2');
}

@font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('/assets/fonts/barlow-condensed-800.woff2') format('woff2');
}

/* Variable fonts: one file covers every weight from 100 to 1000 */
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 100 1000;
    font-display: swap;
    src: url('/assets/fonts/dm-sans.woff2') format('woff2');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url('/assets/fonts/jetbrains-mono.woff2') format('woff2');
}

/* ---------- Tokens ---------- */

:root,
[data-theme="dark"] {
    /* Makes scrollbars, date pickers and select lists follow the theme */
    color-scheme: dark;

    --color-bg:             #0F0F0C;
    --color-surface:        #181815;
    --color-surface-raised: #222220;

    --color-border:        #2C2C28;
    --color-border-subtle: #3A3A36;

    --color-text:          hsl(44, 18%, 90%);
    --color-text-muted:    hsl(40, 10%, 58%);
    --color-text-disabled: hsl(40, 5%, 32%);
    --color-text-placeholder: hsl(40, 7%, 54%);

    --color-accent:        hsl(18, 100%, 58%);
    --color-accent-subtle: hsla(18, 100%, 58%, 0.15);
    --color-on-accent:     hsl(30, 14%, 6%);
    /* Where the accent is a surface (a filled switch, a bar, a plate) and not text, so it may be brighter than text can be */
    --color-accent-fill:    var(--color-accent);
    --color-on-accent-fill: var(--color-on-accent);

    --color-success: hsl(122, 39%, 49%);
    --color-warning: hsl(47, 96%, 53%);
    --color-danger:  hsl(0, 73%, 60%);
    --color-danger-subtle: hsla(0, 73%, 60%, 0.15);
    --color-danger-border: hsla(0, 73%, 60%, 0.35);

    --color-badge-beginner-bg:       hsl(120, 35%, 17%);
    --color-badge-beginner-text:     hsl(120, 61%, 66%);
    --color-badge-intermediate-bg:   hsl(48, 65%, 12%);
    --color-badge-intermediate-text: hsl(48, 75%, 58%);
    --color-badge-advanced-bg:       hsl(0, 65%, 15%);
    --color-badge-advanced-text:     hsl(0, 100%, 73%);

    --color-set-warmup:     var(--color-warning);
    --color-set-warmup-bg:  hsla(47, 96%, 53%, 0.15);
    --color-set-drop:       var(--color-accent);
    --color-set-drop-bg:    var(--color-accent-subtle);
    --color-set-failure:    hsl(0, 100%, 73%);
    --color-set-failure-bg: hsla(0, 73%, 60%, 0.15);

    --color-pr:        var(--color-accent);
    --color-pr-bg:     var(--color-accent-subtle);
    --color-logged:    var(--color-success);
    --color-logged-bg: hsla(122, 39%, 49%, 0.12);

    /* Muscle map: level 0 is an untrained muscle, level 4 the most trained */
    --color-muscle-0:    #33332E;
    --color-muscle-1:    hsla(18, 100%, 58%, 0.28);
    --color-muscle-2:    hsla(18, 100%, 58%, 0.50);
    --color-muscle-3:    hsla(18, 100%, 58%, 0.75);
    --color-muscle-4:    var(--color-accent);
    --color-muscle-body: var(--color-surface-raised);

    --shadow-sm: 0 1px 3px hsla(0, 0%, 0%, 0.42);
    --shadow-md: 0 4px 16px hsla(0, 0%, 0%, 0.52), 0 1px 4px hsla(0, 0%, 0%, 0.28);
    --shadow-lg: 0 8px 32px hsla(0, 0%, 0%, 0.62), 0 2px 8px hsla(0, 0%, 0%, 0.28);
}

[data-theme="light"] {
    color-scheme: light;

    --color-bg:             #FFFFFF;
    --color-surface:        #F4F6F8;
    --color-surface-raised: #E8ECF0;

    --color-border:        #D9DEE4;
    --color-border-subtle: #B3BAC4;

    --color-text:          hsl(220, 16%, 9%);
    --color-text-muted:    hsl(220, 9%, 35%);
    --color-text-disabled: hsl(220, 6%, 60%);
    --color-text-placeholder: hsl(220, 9%, 35%);

    --color-accent:        hsl(18, 91%, 39%);
    --color-accent-subtle: hsla(18, 91%, 39%, 0.10);
    --color-on-accent:     #FFFFFF;
    --color-accent-fill:    hsl(18, 100%, 50%);
    --color-on-accent-fill: hsl(220, 20%, 8%);

    --color-success: hsl(140, 44%, 30%);
    --color-warning: hsl(36, 88%, 34%);
    --color-danger:  hsl(4, 66%, 44%);
    --color-danger-subtle: hsla(4, 66%, 44%, 0.12);
    --color-danger-border: hsla(4, 66%, 44%, 0.35);

    --color-badge-beginner-bg:       hsla(140, 44%, 30%, 0.12);
    --color-badge-beginner-text:     hsl(140, 44%, 24%);
    --color-badge-intermediate-bg:   hsla(36, 88%, 34%, 0.12);
    --color-badge-intermediate-text: hsl(30, 72%, 26%);
    --color-badge-advanced-bg:       hsla(4, 66%, 44%, 0.12);
    --color-badge-advanced-text:     hsl(4, 66%, 36%);

    --color-set-warmup:     hsl(30, 72%, 26%);
    --color-set-warmup-bg:  hsla(36, 88%, 34%, 0.12);
    --color-set-failure:    var(--color-danger);
    --color-set-failure-bg: hsla(4, 66%, 44%, 0.12);

    --color-logged-bg: hsla(140, 44%, 30%, 0.10);

    --color-muscle-0: #D3D8DF;
    --color-muscle-1: hsla(18, 100%, 50%, 0.28);
    --color-muscle-2: hsla(18, 100%, 50%, 0.46);
    --color-muscle-3: hsla(18, 100%, 50%, 0.72);
    --color-muscle-4: var(--color-accent-fill);

    --shadow-sm: 0 1px 3px hsla(220, 20%, 10%, 0.08);
    --shadow-md: 0 4px 16px hsla(220, 20%, 10%, 0.10), 0 1px 4px hsla(220, 20%, 10%, 0.06);
    --shadow-lg: 0 8px 32px hsla(220, 20%, 10%, 0.12), 0 2px 8px hsla(220, 20%, 10%, 0.06);
}

:root {
    --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --font-body:    'DM Sans', system-ui, sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, monospace;

    --tracking-snug:   -0.01em;
    --tracking-tight:  -0.02em;
    --tracking-tighter: -0.03em;
    --tracking-open:   0.02em;
    --tracking-brand:  0.04em;
    --tracking-normal: 0.06em;
    --tracking-wide:   0.08em;
    --tracking-wider:  0.14em;

    --gutter:            24px;
    --max-width:         1280px;
    --side-column:       380px;
    --list-column:       420px;
    --header-height:     60px;
    --bottom-nav-height: 56px;
    --touch-target:      44px;

    --radius-sharp:   0;
    --radius-btn:     3px;
    --radius-overlay: 8px;
    --radius-pill:    999px;
    --radius-round:   50%;

    /* Dark on photos and behind sheets in both themes, so it is not a theme colour */
    --color-scrim:    hsla(0, 0%, 0%, 0.6);
    --color-on-scrim: #fff;

    /* Media queries cannot read variables, so the three widths are written out where they are used:
       phone below 768px, tablet from 768px, desktop with a side column from 900px. */

    --transition:        120ms ease-out;
    --transition-medium: 180ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Two shadows: the first matches the background to fake a gap, the second is the visible ring */
    --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent);

    --z-dropdown:    20;
    --z-bottom-bars: 90;
    --z-header:      100;
    --z-overlay:     1000;
}

/* ---------- Reset ---------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body,
h1, h2, h3, h4,
p,
ul, ol,
figure,
blockquote {
    margin: 0;
}

ul,
ol {
    padding: 0;
}

img,
svg,
video {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

/* Taller only, a wider box would push out of its card */
textarea {
    resize: vertical;
}

button {
    cursor: pointer;
}

a {
    color: inherit;
}

/* Number fields hold typed values like kg and reps, the native spinners can't be themed and phones never show them */
input[type="number"] {
    appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ---------- Base ---------- */

body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* box-shadow instead of outline, so the ring can have the background-coloured gap from --focus-ring */
:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* Headings and main get focus from the router after navigation, a ring around them would look like a bug */
[tabindex="-1"]:focus {
    outline: none;
    box-shadow: none;
}

::selection {
    background: var(--color-accent-fill);
    color: var(--color-on-accent-fill);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.icon {
    display: block;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}