/* Every design value of the signup and account screens, and the only place one is
   written (docs/ui-rules.md, Chris 2026-10-14). app.css and the templates use these
   variables only; scripts/ui_lint.py fails CI on a raw color, size or space anywhere
   else. The brand matches flozit.com. */
:root {
  /* Colors */
  --color-cream: #f8f5f0;        /* page background */
  --color-white: #ffffff;        /* card, fields, image frames */
  --color-panel: #fcfbf8;        /* a soft panel inside the card */
  --color-gold: #c4a46e;         /* brand gold: the primary button, progress, accents */
  --color-gold-light: #e0c48f;   /* gold on hover */
  --color-gold-text: #7d6334;    /* gold for small text (AA on white) */
  --color-black: #101010;        /* text */
  --color-muted: #4f5a60;        /* secondary text (AA on white) */
  --color-slate: #68767d;        /* Required and Optional, the secondary button's border */
  --color-placeholder: #b3b9bd;  /* clearly lighter than typed text */
  --color-line: #e4ded3;         /* card border and dividers */
  --color-field: #cfc8bb;        /* field borders, the switch when off */
  --color-note-bg: #fbf6ec;
  --color-note-line: #ead9b6;
  --color-error-bg: #fdf1ef;
  --color-error-line: #e7b9b0;
  --color-error-text: #8a2b1b;
  --color-ok: #2f6b3f;
  --color-ok-bg: #e8f2ea;
  --color-paused-bg: #f6ecd6;
  --color-neutral-bg: #e9ecee;
  --color-focus-ring: rgba(196, 164, 110, .28);
  --shadow-card: 0 1px 2px rgba(16, 16, 16, .04), 0 8px 24px rgba(16, 16, 16, .06);
  --shadow-knob: 0 1px 3px rgba(16, 16, 16, .25);
  --icon-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2368767d' stroke-width='1.6'/%3E%3C/svg%3E");

  /* Type: two families, three weights, eight sizes */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fs-xs: .75rem;      /* 12px: progress step names */
  --fs-sm: .8125rem;    /* 13px: Required and Optional, the step count, badges, small icons */
  --fs-md: .9375rem;    /* 15px: field labels, secondary text, Back, links, the footer */
  --fs-base: 1rem;      /* 16px: body text, inputs, buttons */
  --fs-lg: 1.0625rem;   /* 17px: lead text, section headings */
  --fs-xl: 1.25rem;     /* 20px: the FAQ plus sign */
  --fs-2xl: 1.5rem;     /* 24px: the wordmark, h1 on a phone */
  --fs-3xl: 1.75rem;    /* 28px: h1 */
  --lh-none: 1;
  --lh-tight: 1.3;
  --lh-body: 1.6;
  --tracking-caps: .06em;

  /* Spacing: a 4px scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-10: 40px;
  --space-14: 56px;

  /* Corners */
  --radius-control: 8px;   /* buttons, fields, the info note */
  --radius-box: 12px;      /* card, panels, notes, errors, image frames */
  --radius-pill: 999px;
  --radius-round: 50%;

  /* Sizes */
  --content-max: 40rem;    /* 640px: the card column */
  --header-max: 72rem;     /* header and footer rows */
  --header-height: 72px;
  --footer-height: 64px;
  --control-height: 48px;  /* buttons and fields */
  --tap-min: 44px;         /* the smallest tap target */
  --icon: 24px;            /* the info button's circle, guide step numbers */
  --check: 20px;           /* checkboxes */
  --bar: 4px;              /* progress bar and note accent */
  /* Breakpoint: phone up to 560px, desktop above. Media queries cannot read a
     variable, so app.css writes 560px; ui_lint allows no other width. */
}