/* Shopfront Studios design tokens
   Fonts self-hosted from Google Fonts (latin variable subsets):
   Bricolage Grotesque  https://fonts.google.com/specimen/Bricolage+Grotesque
   DM Sans              https://fonts.google.com/specimen/DM+Sans
   JetBrains Mono       https://fonts.google.com/specimen/JetBrains+Mono
   Both are licensed under the SIL Open Font License 1.1. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-var.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dmsans-var.woff2") format("woff2-variations");
  font-weight: 100 1000;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-var.woff2") format("woff2-variations");
  font-weight: 100 800;
  font-display: swap;
}

/* Metric-matched fallbacks. The swap from fallback to webfont must not reflow the
   page: size-adjust is the measured advance-width ratio, and the ascent/descent
   overrides are the webfont's own metrics divided by that ratio (overrides scale
   with size-adjust). Re-measure with canvas measureText if a font is replaced. */
@font-face {
  font-family: "Bricolage Fallback";
  src: local("Trebuchet MS"), local("TrebuchetMS");
  size-adjust: 93.38%;
  ascent-override: 99.59%;
  descent-override: 28.91%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "DM Sans Fallback";
  src: local("Segoe UI"), local("SegoeUI");
  size-adjust: 94.39%;
  ascent-override: 104.88%;
  descent-override: 32.84%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "JetBrains Mono Fallback";
  src: local("Consolas");
  size-adjust: 109.13%;
  ascent-override: 93.47%;
  descent-override: 27.49%;
  line-gap-override: 0%;
}

/* Theme.
   `color-scheme` switches the native controls and tells `light-dark()` which
   side of each pair to use. The plain line above each pair is the fallback for
   browsers without light-dark(): they keep the light theme exactly as shipped.
   An explicit `data-theme` on <html> (restored before first paint) pins the
   choice; without one the OS decides, and keeps deciding if the OS changes. */
:root {
  color-scheme: light dark;

  /* Brand. The comments name the job, not the colour: --color-ink is the text
     colour, --color-white the brightest surface in the current theme. */
  --color-ink: #060A16;
  --color-ink: light-dark(#060A16, #EDEFF7);
  --color-paper: #FBFAFF;
  --color-paper: light-dark(#FBFAFF, #0B0E18);
  --color-paper-2: #F4F2FB;
  --color-paper-2: light-dark(#F4F2FB, #121622);
  --color-white: #FFFFFF;
  --color-white: light-dark(#FFFFFF, #161A27);
  --color-violet: #7C5CFF;
  --color-violet: light-dark(#7C5CFF, #7C5CFF);
  --color-violet-deep: #5B3BE0;
  --color-violet-deep: light-dark(#5B3BE0, #A896FF);
  --color-violet-soft: #A896FF;
  --color-violet-soft: light-dark(#A896FF, #A896FF);
  --color-lime: #C6FF3D;
  --color-lime: light-dark(#C6FF3D, #C6FF3D);
  --color-cyan: #4FD8FF;
  --color-cyan: light-dark(#4FD8FF, #4FD8FF);
  --color-muted: #5A5770;
  --color-muted: light-dark(#5A5770, #A9ADC2);
  --color-line: #E3DFF2;
  --color-line: light-dark(#E3DFF2, #262B3B);

  /* Surfaces and fills that must not follow --color-ink: a dark panel stays
     dark while text goes light, and a label on lime stays ink. */
  --color-surface-deep: #060A16;
  --color-surface-deep: light-dark(#060A16, #151928);
  --color-on-deep: #FBFAFF;
  --color-on-deep: light-dark(#FBFAFF, #EDEFF7);
  --color-action: #5B3BE0;
  --color-action: light-dark(#5B3BE0, #6B4BF0);
  --color-action-text: #FFFFFF;
  --color-action-text: light-dark(#FFFFFF, #FFFFFF);
  --color-on-bright: #060A16;
  --color-on-bright: light-dark(#060A16, #060A16);

  /* Details: a hairline on media, a scrim over photography, and the glow that
     frames light artwork in a dark room (transparent in light, so no new ring). */
  --color-hairline: rgba(6, 10, 22, 0.08);
  --color-hairline: light-dark(rgba(6, 10, 22, 0.08), rgba(255, 255, 255, 0.14));
  --color-scrim: rgba(6, 10, 22, 0.74);
  --color-scrim: light-dark(rgba(6, 10, 22, 0.74), rgba(6, 10, 22, 0.74));
  --glow-tint: transparent;
  --glow-tint: light-dark(transparent, rgba(124, 92, 255, 0.45));
  --ring-media: transparent;
  --ring-media: light-dark(transparent, rgba(255, 255, 255, 0.14));

  /* Type */
  --font-display: "Bricolage Grotesque", "Bricolage Fallback", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "DM Sans", "DM Sans Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, "Cascadia Mono", monospace;

  --text-display: clamp(2.75rem, 8vw, 10rem);
  --text-h1: clamp(2.25rem, 5vw, 4.5rem);
  --text-h2: clamp(1.75rem, 3.4vw, 3rem);
  --text-h3: clamp(1.25rem, 2vw, 1.625rem);
  --text-body: 1.0625rem;
  --text-small: 0.9375rem;
  --text-label: 0.75rem;

  --leading-tight: 0.95;
  --leading-snug: 1.15;
  --leading-body: 1.6;

  /* Space: 4px base, 8pt rhythm */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 5rem;
  --space-10: 6rem;
  --space-11: 8rem;
  --space-12: 10rem;

  /* Shape */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Elevation. In a dark room a shadow is almost invisible, so dark leans on
     the hairline and the glow instead; the geometry stays identical. */
  --shadow-card: 0 1px 0 var(--color-line);
  --shadow-lift: 0 18px 40px -28px light-dark(rgba(6, 10, 22, 0.4), rgba(0, 0, 0, 0.55));
  --shadow-header: 0 1px 0 var(--color-line),
    0 12px 30px -24px light-dark(rgba(6, 10, 22, 0.35), rgba(0, 0, 0, 0.6));
  --shadow-action: 0 10px 24px -14px light-dark(rgba(91, 59, 224, 0.7), rgba(91, 59, 224, 0.55));
  --color-violet-wash: rgba(124, 92, 255, 0.1);
  --color-violet-wash: light-dark(rgba(124, 92, 255, 0.1), rgba(124, 92, 255, 0.18));

  /* Motion */
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 480ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Layout */
  --wrap: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --header-h: 76px;
  --header-h-scrolled: 64px;
  --section-y: clamp(4rem, 9vw, 9rem);
}

/* An explicit choice pins color-scheme, and every light-dark() pair follows it.
   The light selector is not redundant: it must beat the OS preference. */
:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}