/* ============================================================================
   variables.css — RoofDatum website design tokens
   ----------------------------------------------------------------------------
   Derived from the RoofDatum desktop application's own design language:
     · the dark charcoal workspace tokens (--rd-* in src/renderer/global.css)
     · the navy application header gradient + 2px blue accent line
     · RoofDatum electric blue #0B84FF and its lighter text tone #60B4FF
     · uppercase, letter-spaced micro-labels and tabular monospaced figures

   The website deepens the app's charcoal towards navy/near-black for a marketing
   surface, but every accent, border weight, radius and label treatment traces
   back to the application. Nothing here modifies the application.
   ========================================================================= */

:root {
  /* ── Surfaces: deep navy → near-black ────────────────────────────────── */
  --c-base:          #070b12;   /* page canvas — near-black with a navy cast  */
  --c-base-2:        #0a1018;   /* alternating band                           */
  --c-navy:          #0a1628;   /* app header navy (exact, from global.css)   */
  --c-navy-2:        #0d1f3c;   /* app header navy highlight (exact)          */
  --c-surface:       #101722;   /* cards / panels                             */
  --c-surface-2:     #151d2a;   /* raised rows, card headers                  */
  --c-surface-3:     #1b2534;   /* neutral button                             */
  --c-surface-hover: #223045;   /* button / row hover                         */

  /* ── Lines ───────────────────────────────────────────────────────────── */
  --c-border:        #1d2735;
  --c-border-2:      #2a3646;
  --c-border-hover:  #3b4a5e;

  /* ── Text: cool silver and grey ──────────────────────────────────────── */
  --c-text:          #e6ecf3;
  --c-text-2:        #a2b1c3;
  --c-text-3:        #6d7d90;
  --c-text-4:        #4d5b6b;
  --c-wordmark-roof: #c8d6e8;   /* exact app wordmark silver                  */

  /* ── RoofDatum electric blue ─────────────────────────────────────────── */
  --c-accent:        #0b84ff;   /* exact --rd-accent                          */
  --c-accent-hi:     #60b4ff;   /* exact --rd-accent-2                        */
  --c-accent-deep:   #0a2a4a;   /* exact --rd-accent-bg                       */
  --c-accent-deep-2: #0d3a65;   /* exact --rd-accent-bg-hi                    */
  --c-accent-soft:   rgba(11, 132, 255, 0.10);
  --c-accent-line:   rgba(11, 132, 255, 0.28);

  /* ── Supporting status tones (from the app palette) ──────────────────── */
  --c-green:         #22c55e;
  --c-amber:         #d4860a;
  --c-danger:        #ef4444;

  /* ── Restrained gradients ────────────────────────────────────────────── */
  --g-header:  linear-gradient(135deg, #0a1628 0%, #0d1f3c 60%, #0a1628 100%);
  --g-hero:    radial-gradient(1100px 620px at 50% -12%, rgba(13, 41, 82, 0.85) 0%, rgba(7, 11, 18, 0) 70%);
  --g-panel:   linear-gradient(180deg, rgba(255,255,255,0.028) 0%, rgba(255,255,255,0) 100%);
  --g-rule:    linear-gradient(90deg, transparent, var(--c-accent-line), transparent);

  /* ── Depth (subtle only) ─────────────────────────────────────────────── */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.40);
  --shadow-2: 0 6px 22px rgba(0,0,0,0.42);
  --shadow-3: 0 18px 52px rgba(0,0,0,0.55);
  --ring:     0 0 0 1px rgba(255,255,255,0.045) inset;

  /* ── Spacing (app scale, extended for page rhythm) ───────────────────── */
  --sp-1:  4px;   --sp-2:  8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;   --sp-6: 24px;   --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px;  --sp-16: 64px;  --sp-20: 80px; --sp-24: 96px; --sp-32: 128px;

  /* ── Radius (app scale) ──────────────────────────────────────────────── */
  --r-sm: 4px;  --r-md: 6px;  --r-lg: 10px;  --r-xl: 14px;  --r-2xl: 20px;

  /* ── Typography — LOCAL SYSTEM STACKS ONLY, no remote fonts ──────────── */
  --f-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Segoe UI Variable Text",
            Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --f-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
            "Liberation Mono", "Courier New", monospace;

  --fs-micro: 11px;   /* uppercase eyebrow labels — app convention */
  --fs-xs:    12.5px;
  --fs-sm:    14px;
  --fs-base:  15.5px;
  --fs-md:    17px;
  --fs-lg:    20px;
  --fs-xl:    26px;
  --fs-2xl:   34px;
  --fs-3xl:   44px;
  --fs-4xl:   58px;

  --lh-tight: 1.12;
  --lh-snug:  1.3;
  --lh-body:  1.62;

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --wrap:      1200px;
  --wrap-wide: 1360px;
  --wrap-text: 760px;
  /* 76px so a 48px brand mark has real breathing room above and below it.
     Anything under ~72px and the brand starts to feel jammed against the
     electric-blue border. responsive.css drops it for narrow screens. */
  --header-h:  76px;

  /* ── Motion (respect reduced motion — see base.css) ──────────────────── */
  --t-fast: 120ms;
  --t-med:  200ms;
  --ease:   cubic-bezier(0.4, 0, 0.2, 1);
}