/* Design tokens — light theme only (no dark mode by design). */

/* Fallback with Inter's proportions, shown until the web font loads (avoids layout shift) */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  ascent-override: 90.49%;
  descent-override: 22.56%;
  line-gap-override: 0%;
  size-adjust: 107.06%;
}
:root {
  color-scheme: light;

  /* Colors */
  --color-bg:          #FFFFFF;
  --color-surface:     #F4F6F8;   /* card and section backgrounds */
  --color-paper:       #FAFBFC;   /* technical drawing paper tone */
  --color-primary:     #0F2A44;   /* deep navy — headings, primary buttons */
  --color-primary-2:   #1D4A73;   /* hover, emphasis */
  --color-accent:      #1F6FB2;   /* links, active category, drawing lines (5.3:1 on white) */
  --color-text:        #17202B;
  --color-text-muted:  #56616E;
  --color-border:      #D3D9E0;
  --color-grid:        #ECEFF3;   /* background grid lines */
  --color-grid-minor:  rgba(236, 239, 243, 0.5);
  --color-success:     #2E7D5B;
  --color-link:        var(--color-accent);

  /* Typography */
  --font-sans: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --fs-xs:   0.75rem;   /* 12px */
  --fs-sm:   0.875rem;  /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-lg:   1.125rem;  /* 18px */
  --fs-xl:   1.375rem;  /* 22px */
  --fs-2xl:  1.75rem;   /* 28px */
  --fs-3xl:  clamp(2rem, 5vw + 1rem, 3.25rem);

  --lh-body:  1.6;
  --lh-tight: 1.2;

  /* Spacing (4px scale) */
  --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: 6rem;

  /* Layout */
  --container-max: 1200px;
  --gutter: 1rem;
  --header-h: 64px;
  --tap-min: 44px;

  /* Surfaces */
  --radius-sm: 4px;
  --radius-md: 6px;
  --shadow-sm: 0 1px 2px rgba(15, 42, 68, 0.05), 0 1px 3px rgba(15, 42, 68, 0.07);
  --shadow-md: 0 6px 16px rgba(15, 42, 68, 0.09);

  /* Motion */
  --dur-fast: 200ms;
  --dur-base: 300ms;
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}

@media (min-width: 640px) {
  :root { --gutter: 1.5rem; }
}

@media (min-width: 960px) {
  :root { --gutter: 2rem; --header-h: 72px; }
}