/* ============================================================
   DMC Solutions - design tokens
   One accent (ember), one neutral family (cool graphite),
   one radius system. Change values here, never inline.
   ============================================================ */

:root {
  /* ---- Type ---------------------------------------------- */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Fluid scale, 360px to 1440px viewport */
  --t-display: clamp(2.75rem, 1.6rem + 5.1vw, 5.5rem);
  --t-h1:      clamp(2.25rem, 1.45rem + 3.6vw, 4rem);
  --t-h2:      clamp(1.75rem, 1.25rem + 2.2vw, 2.875rem);
  --t-h3:      clamp(1.25rem, 1.05rem + 0.9vw, 1.625rem);
  --t-lead:    clamp(1.0625rem, 0.98rem + 0.4vw, 1.25rem);
  --t-body:    1rem;
  --t-sm:      0.9375rem;
  --t-xs:      0.8125rem;
  --t-micro:   0.6875rem;

  /* ---- Space --------------------------------------------- */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8rem;

  --section-y: clamp(4.5rem, 3rem + 7vw, 9rem);
  --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3rem);
  --measure: 62ch;
  --maxw: 1360px;
  --header-h: 68px;

  /* ---- Radius (documented rule, applied everywhere) -------
     Panels and media: --r-lg | Controls and inputs: --r-md
     Chips and pills:  --r-full                             */
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-full: 999px;

  /* ---- Motion -------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur: 320ms;
  --dur-slow: 640ms;

  --z-grain: 90;
  --z-header: 60;
  --z-menu: 70;

  /* ============================================================
     Colour
     ------------------------------------------------------------
     These are the NIGHT values, and they are only the starting
     point. assets/js/theme.js recomputes every one of them from
     the brightness slider and writes the result as inline custom
     properties on the root element, which outrank anything here.

     Two consequences worth knowing:
       1. Editing a colour below changes the night end of the
          slider only. The day end lives in theme.js, in SURFACES.
       2. Inks are never hand-picked at intermediate positions.
          They are solved for a contrast target, so text stays
          readable at every point on the slide.

     Without JavaScript the page simply stays at night, which is
     a complete and readable design in its own right.
     ============================================================ */

  --bg:          #0C0D10;
  --bg-sunken:   #08090B;
  --surface:     #131519;
  --surface-2:   #191C21;
  --line:        rgb(237 238 240 / 0.13);
  --line-strong: rgb(237 238 240 / 0.24);

  --text:        #EDEEF0;
  --text-2:      #A0A5AE;
  --text-3:      #868C97;

  --accent:      #FF5A1F;  /* fills. Always paired with --accent-ink */
  --accent-ink:  #14100D;  /* 6.1:1 on --accent */
  --accent-text: #FF7A45;  /* accent-coloured text and links */
  --accent-soft: rgb(255 90 31 / 0.16);

  --focus:       #FF5A1F;

  /* The neon wordmark. Core is the letterform, glow is the halo
     colour as bare channels, strength fades the halo out as the
     page brightens so it never turns into a smear on white. */
  --neon-core:     #FFFFFF;
  --neon-glow:     255 255 255;
  --neon-strength: 1;

  --media-bright:    0.9;
  --shadow-strength: 0.42;
  --grain-opacity:   0.05;

  --media-filter: none;

  --shadow-1: 0 1px 2px rgb(0 0 0 / calc(var(--shadow-strength) * 0.9)),
              0 4px 14px rgb(0 0 0 / calc(var(--shadow-strength) * 0.7));
  --shadow-2: 0 2px 6px rgb(0 0 0 / var(--shadow-strength)),
              0 18px 50px rgb(0 0 0 / var(--shadow-strength));

  /* Procedural film grain. Inline SVG turbulence, no image request. */
  --grain-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");

  color-scheme: dark;
}

/* No-JavaScript courtesy: a visitor whose system asks for light
   gets the day end rather than being forced into night. Once the
   module boots it stamps inline values and this stops mattering. */
@media (prefers-color-scheme: light) {
  :root:not([data-regime]) {
    --bg:          #F7F7F8;
    --bg-sunken:   #EFEFF1;
    --surface:     #FFFFFF;
    --surface-2:   #F2F2F4;
    --line:        rgb(16 18 22 / 0.13);
    --line-strong: rgb(16 18 22 / 0.24);

    --text:        #101216;
    --text-2:      #4C525C;
    --text-3:      #666C75;
    --accent-text: #C33905;
    --accent-soft: rgb(255 90 31 / 0.12);

    --neon-core:     #101216;
    --neon-glow:     255 90 31;
    --neon-strength: 0.32;

    --media-bright:    1;
    --shadow-strength: 0.09;
    --grain-opacity:   0.028;

    color-scheme: light;
  }
}