/* Fitast brand: the fonts, the colors and the measures of its design system.
   Archivo and Archivo Expanded, by Omnibus-Type (SIL Open Font License 1.1).
   Add to the <head> of any page:
   <link rel="stylesheet" href="https://assets.fitast.app/fonts/font.css">
   To self-host instead, keep this file next to the two .woff2 files and OFL.txt.
   Each file has its width fixed and every weight from 100 to 900.

   The colors follow the system theme, light or dark. A page that wants one of
   them always sets it on <html>: data-theme="light" or data-theme="dark".
*/

@font-face {
  font-family: "Archivo";
  src: url("Archivo-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Archivo Expanded";
  src: url("ArchivoExpanded-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* surfaces and text */
  --ft-giz: #F3F4F1;               /* page background */
  --ft-surface: #FFFFFF;           /* cards, sheets and lists on giz */
  --ft-surface-sunken: #E9EBE7;    /* inputs and the editable cells of the sets */
  --ft-track: #E3E5E1;             /* the empty track of bars and plates, never text */
  --ft-line: #DADDD8;              /* thin dividers between list rows */
  --ft-line-strong: #868B92;       /* borders of controls */
  --ft-ferro: #17191C;             /* main text, and the fill of the main button */
  --ft-ferro-muted: #5E636B;       /* secondary text */
  --ft-on-ferro: #F3F4F1;          /* text and icons on ferro */

  /* the plates: each macro has a fill, a text and a soft background */
  --ft-proteina: #E23B2E;
  --ft-proteina-texto: #B9271C;
  --ft-proteina-suave: #FCE3E0;
  --ft-carbo: #2A5BD7;
  --ft-carbo-texto: #2A5BD7;
  --ft-carbo-suave: #E1E9FB;
  --ft-gordura: #F2B416;           /* never as text: 1.9:1 on white */
  --ft-gordura-texto: #8A5D00;
  --ft-gordura-suave: #FDF1CF;
  --ft-treino: #1F9D5C;            /* done: a set, a record, a goal; always with an icon or a word */
  --ft-treino-texto: #16794A;
  --ft-treino-suave: #DDF2E6;
  --ft-on-treino: #17191C;
  --ft-erro: #C0163F;              /* failures of the system only, never a diet */
  --ft-focus: var(--ft-carbo);

  --ft-shadow-sm: 0 1px 2px #17191C0F;
  --ft-shadow-lg: 0 8px 24px -4px #17191C29;
  --ft-focus-ring: 0 0 0 2px #F3F4F1, 0 0 0 4px #2A5BD7;

  /* the measures, the same in both themes */
  --ft-space-1: 4px;
  --ft-space-2: 8px;
  --ft-space-3: 12px;
  --ft-space-4: 16px;              /* side margin of a screen, padding of a card */
  --ft-space-5: 20px;
  --ft-space-6: 24px;
  --ft-space-8: 32px;
  --ft-space-10: 40px;
  --ft-radius-sm: 6px;             /* chips, badges, the cells of the sets */
  --ft-radius-md: 10px;            /* buttons, inputs, steppers */
  --ft-radius-lg: 16px;            /* cards */
  --ft-radius-xl: 24px;            /* sheets */
  --ft-radius-full: 9999px;        /* bars and the center button of the tab bar */

  --ft-font-display: "Archivo Expanded", "Archivo", system-ui, sans-serif;
  --ft-font-text: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ft-giz: #121417;
    --ft-surface: #1C1F23;
    --ft-surface-sunken: #25292E;
    --ft-track: #2A2E33;
    --ft-line: #2E3238;
    --ft-line-strong: #6E747C;
    --ft-ferro: #ECEDEA;
    --ft-ferro-muted: #9A9FA6;
    --ft-on-ferro: #17191C;
    --ft-proteina: #FF5B4C;
    --ft-proteina-texto: #FF5B4C;
    --ft-proteina-suave: #3A1A17;
    --ft-carbo: #6B93FF;
    --ft-carbo-texto: #6B93FF;
    --ft-carbo-suave: #18264A;
    --ft-gordura: #FFC83A;
    --ft-gordura-texto: #FFC83A;
    --ft-gordura-suave: #3A2E0E;
    --ft-treino: #3CC982;
    --ft-treino-texto: #3CC982;
    --ft-treino-suave: #12321F;
    --ft-on-treino: #0E1A13;
    --ft-erro: #FF6B8A;
    --ft-shadow-sm: 0 1px 2px #00000080;
    --ft-shadow-lg: 0 12px 32px -4px #000000CC;
    --ft-focus-ring: 0 0 0 2px #121417, 0 0 0 4px #6B93FF;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ft-giz: #121417;
  --ft-surface: #1C1F23;
  --ft-surface-sunken: #25292E;
  --ft-track: #2A2E33;
  --ft-line: #2E3238;
  --ft-line-strong: #6E747C;
  --ft-ferro: #ECEDEA;
  --ft-ferro-muted: #9A9FA6;
  --ft-on-ferro: #17191C;
  --ft-proteina: #FF5B4C;
  --ft-proteina-texto: #FF5B4C;
  --ft-proteina-suave: #3A1A17;
  --ft-carbo: #6B93FF;
  --ft-carbo-texto: #6B93FF;
  --ft-carbo-suave: #18264A;
  --ft-gordura: #FFC83A;
  --ft-gordura-texto: #FFC83A;
  --ft-gordura-suave: #3A2E0E;
  --ft-treino: #3CC982;
  --ft-treino-texto: #3CC982;
  --ft-treino-suave: #12321F;
  --ft-on-treino: #0E1A13;
  --ft-erro: #FF6B8A;
  --ft-shadow-sm: 0 1px 2px #00000080;
  --ft-shadow-lg: 0 12px 32px -4px #000000CC;
  --ft-focus-ring: 0 0 0 2px #121417, 0 0 0 4px #6B93FF;
}

body {
  font-family: var(--ft-font-text);
  font-weight: 400;
  color: var(--ft-ferro);
  background: var(--ft-giz);
}

/* the type styles. Archivo Expanded, the voice of a gym sign, only for screen
   titles and big numbers; Archivo for everything else */
.ft-display-xl { font-family: var(--ft-font-display); font-size: 56px; line-height: 56px; font-weight: 800; letter-spacing: -0.035em; }
.ft-display { font-family: var(--ft-font-display); font-size: 36px; line-height: 40px; font-weight: 800; letter-spacing: -0.03em; }
.ft-title { font-family: var(--ft-font-display); font-size: 24px; line-height: 28px; font-weight: 800; letter-spacing: -0.02em; }
.ft-numeral { font-family: var(--ft-font-display); font-size: 28px; line-height: 32px; font-weight: 700; letter-spacing: -0.02em; }
.ft-heading { font-family: var(--ft-font-text); font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: -0.01em; }
.ft-body { font-family: var(--ft-font-text); font-size: 16px; line-height: 24px; font-weight: 400; }
.ft-body-strong { font-family: var(--ft-font-text); font-size: 16px; line-height: 24px; font-weight: 600; }
.ft-data { font-family: var(--ft-font-text); font-size: 15px; line-height: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ft-label { font-family: var(--ft-font-text); font-size: 14px; line-height: 20px; font-weight: 500; }
.ft-caption { font-family: var(--ft-font-text); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.01em; }

/* every number compared with another (grams, kcal, kg, reps, time) */
.ft-num { font-variant-numeric: tabular-nums; }