/*
  FrancisCreation storefront design tokens.

  The register: precision tooling, not consumer software. These are machined aluminium parts and
  the software that drives them, sold by the person who designed them, to people who care about
  tolerances. So the page is quiet and the product is loud — near-black ink on white, a tight
  typographic scale, hairline rules, and one accent used sparingly enough that it still means
  something when it appears.

  Light only, deliberately. A retail surface lives or dies on product photography, and a palette
  that inverts under the visitor's system setting renders those photographs against a background
  they were never shot for. A dark mode here would be a second design, not a filter.
*/
:root {
  color-scheme: light;

  /* ---- Type -------------------------------------------------------------
     A system stack, tuned rather than imported. It paints on the first frame,
     adds no third-party request to a self-hosted store, and needs no CSP
     exception. Swapping in a self-hosted Inter later is a change to this line
     alone. */
  --fc-font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
                  "Helvetica Neue", Arial, sans-serif;
  --fc-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* A 1.25 scale from 16px, rounded to whole pixels so nothing lands half a pixel off. */
  --fc-text-2xs: 0.6875rem;  /* 11 — eyebrows, badges */
  --fc-text-xs:  0.75rem;    /* 12 — captions, meta */
  --fc-text-sm:  0.875rem;   /* 14 — secondary copy */
  --fc-text-base: 1rem;      /* 16 — body */
  --fc-text-lg:  1.125rem;   /* 18 — lead paragraphs */
  --fc-text-xl:  1.375rem;   /* 22 */
  --fc-text-2xl: 1.75rem;    /* 28 */
  --fc-text-3xl: 2.25rem;    /* 36 */
  --fc-text-4xl: 3rem;       /* 48 */
  --fc-text-5xl: 4rem;       /* 64 — hero only */

  /* Large type needs negative tracking to stop it looking loose; small type needs the opposite. */
  --fc-tracking-tight: -0.022em;
  --fc-tracking-snug: -0.012em;
  --fc-tracking-wide: 0.08em;

  --fc-leading-tight: 1.08;
  --fc-leading-snug: 1.25;
  --fc-leading-normal: 1.6;

  /* ---- Space ------------------------------------------------------------
     A 4px base. Everything on the page is a multiple, so vertical rhythm holds
     without anyone having to think about it. */
  --fc-space-1: 0.25rem;
  --fc-space-2: 0.5rem;
  --fc-space-3: 0.75rem;
  --fc-space-4: 1rem;
  --fc-space-5: 1.25rem;
  --fc-space-6: 1.5rem;
  --fc-space-8: 2rem;
  --fc-space-10: 2.5rem;
  --fc-space-12: 3rem;
  --fc-space-16: 4rem;
  --fc-space-20: 5rem;
  --fc-space-24: 6rem;
  --fc-space-32: 8rem;

  /* ---- Colour -----------------------------------------------------------
     White paper, near-black ink with a trace of blue so it reads as considered
     rather than default #000. */
  --fc-paper: #ffffff;
  --fc-paper-raised: #f7f7f5;   /* warm, so it sits under white without going cold */
  --fc-paper-sunken: #f0f0ed;
  --fc-ink: #111114;
  --fc-ink-soft: #3d3d44;
  --fc-ink-muted: #71717a;
  --fc-ink-faint: #a1a1aa;

  --fc-rule: #e4e4e0;           /* hairline, visible but never loud */
  --fc-rule-strong: #d0d0cb;

  /* Burnt orange. Anodised-tool territory rather than the default SaaS blue, and it holds its own
     against photographs of black and raw aluminium instead of fighting them. Used sparingly:
     eyebrows, focus, in-stock, a link underline. Never a large field. */
  --fc-accent: #b03a06;
  --fc-accent-hover: #8f2f05;
  --fc-accent-tint: #fdf3ee;

  /* Status. Deliberately desaturated — this is a storefront, not a dashboard. */
  --fc-instock: #1a6b46;
  --fc-preorder: #8a5a12;
  --fc-out: #71717a;
  --fc-sale: #b03a06;

  /* ---- Form -------------------------------------------------------------
     Small radii. Machined parts have crisp edges; soft pill shapes would fight
     the product. */
  --fc-radius-xs: 3px;
  --fc-radius-sm: 5px;
  --fc-radius-md: 8px;
  --fc-radius-lg: 14px;

  /* Shadows are almost absent. Separation is done with rules, which is quieter and sharper. */
  --fc-shadow-sm: 0 1px 2px rgb(17 17 20 / 0.05);
  --fc-shadow-md: 0 4px 16px -4px rgb(17 17 20 / 0.10);
  --fc-shadow-lg: 0 18px 48px -12px rgb(17 17 20 / 0.16);

  --fc-content: 74rem;   /* main column */
  --fc-prose: 42rem;     /* comfortable measure for running text */

  --fc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}