/* ==========================================================================
   variables.css — Design tokens
   GeoMaarga Engineering Survey Solutions
   Ref: Project Bible §69-73, §217 | Developer Handbook §86-91
   Every reusable value lives here. Never hardcode these elsewhere.
   ========================================================================== */

:root {

  /* ---------- Colour ---------------------------------------------------
     Semantic names only. Never --green, --darkblue, --red2. (Handbook §87)
     --------------------------------------------------------------------- */

  --color-primary:            #114B45;   /* Engineering Green */
  --color-primary-dark:       #0A332F;
  --color-primary-light:      #1C6A61;
  --color-primary-tint:       #E7EFEE;

  --color-secondary:          #475569;   /* Slate Gray */
  --color-secondary-dark:     #334155;

  --color-accent:             #C97A2B;   /* Engineering Gold — use sparingly */
  --color-accent-dark:        #A9631F;
  --color-accent-tint:        #FBF1E6;

  --color-background:         #F8FAFC;
  --color-surface:            #FFFFFF;
  --color-surface-alt:        #F1F5F9;

  --color-border:             #E5E7EB;
  --color-border-strong:      #CBD5E1;

  --color-text:               #1E293B;
  --color-text-secondary:     #475569;
  --color-text-muted:         #64748B;
  --color-text-inverse:       #FFFFFF;
  --color-text-inverse-muted: #C3D3D1;

  --color-success:            #15803D;
  --color-success-tint:       #ECFDF3;
  --color-warning:            #B45309;
  --color-warning-tint:       #FFFAEB;
  --color-danger:             #B42318;
  --color-danger-tint:        #FEF3F2;
  --color-info:               #175CD3;
  --color-info-tint:          #EFF8FF;

  --color-focus:              #C97A2B;


  /* ---------- Typography -----------------------------------------------
     Manrope primary, Inter/Arial fallback. (Bible §70)
     --------------------------------------------------------------------- */

  --font-primary: "Manrope", "Inter", Arial, -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, sans-serif;
  --font-heading: var(--font-primary);
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Fluid scale — clamp() keeps the ratios intact from 360px to 1440px.
     Bible §70 heading scale: H1 48-60, H2 36-42, H3 28-32, H4 22-24,
     body 18, small 16, caption 14. */
  /* Retuned down from the Bible's literal figures (§70: 18px body, 48-60px H1).
     Those sizes were set for a wider measure; at a 1320px container with real
     copy they read oversized and push too few words per line. Ratios and
     hierarchy are unchanged — everything is roughly one step smaller. */
  --font-size-xs:    0.8125rem;                             /* 13 — caption   */
  --font-size-sm:    0.9375rem;                             /* 15 — small     */
  --font-size-base:  1rem;                                  /* 16 — body      */
  --font-size-lg:    clamp(1.0625rem, 0.3vw + 1rem, 1.1875rem);
  --font-size-h4:    1.125rem;                                    /* 18    */
  --font-size-h3:    clamp(1.1875rem, 0.6vw + 1.05rem, 1.4375rem);/* 19-23 */
  --font-size-h2:    clamp(1.4375rem, 1.3vw + 1.1rem, 2.0625rem); /* 23-33 */
  --font-size-h1:    clamp(1.875rem, 2.4vw + 1.15rem, 2.875rem);  /* 30-46 */

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-extra:    800;

  --line-height-tight:  1.18;
  --line-height-snug:   1.35;
  --line-height-base:   1.62;
  --line-height-loose:  1.75;

  --letter-spacing-tight: -0.011em;
  --letter-spacing-wide:   0.09em;


  /* ---------- Spacing — 8-point grid (Bible §72) ------------------------ */

  --space-1:  0.5rem;    /*   8 */
  --space-2:  1rem;      /*  16 */
  --space-3:  1.5rem;    /*  24 */
  --space-4:  2rem;      /*  32 */
  --space-5:  3rem;      /*  48 */
  --space-6:  4rem;      /*  64 */
  --space-8:  5rem;      /*  80 */
  --space-10: 6rem;      /*  96 */
  --space-12: 8rem;      /* 128 */

  /* Section rhythm — 96px desktop, 64px mobile (Bible §73) */
  --section-spacing:        var(--space-10);
  --section-spacing-mobile: var(--space-6);


  /* ---------- Layout ---------------------------------------------------- */

  --container-width:  1320px;   /* Bible §72 */
  --container-narrow: 820px;    /* prose measure */
  --container-gutter: var(--space-3);

  /* Bible §91 sets 80/72. Raised slightly to give the wider logo lockup
     room to breathe without crowding the nav. */
  --header-height:        88px;
  --header-height-mobile: 76px;


  /* ---------- Radius (Handbook §90) ------------------------------------- */

  --radius-sm:   6px;
  --radius-md:  10px;   /* buttons — Bible §74 */
  --radius-lg:  12px;   /* cards   — Bible §75 */
  --radius-xl:  20px;
  --radius-pill: 999px;


  /* ---------- Elevation (Handbook §91) ---------------------------------- */

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 2px 6px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 10px 24px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
  --shadow-xl: 0 20px 44px rgba(15, 23, 42, 0.10), 0 4px 10px rgba(15, 23, 42, 0.05);


  /* ---------- Motion (Bible §81, §115) ----------------------------------
     Duration 200-350ms. Fade / slide / scale only. No bounce or spin.
     --------------------------------------------------------------------- */

  --transition-fast:  160ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:  240ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:  340ms cubic-bezier(0.4, 0, 0.2, 1);


  /* ---------- Z-index (Handbook §103) ------------------------------------ */

  --z-base:      1;
  --z-sticky:   100;
  --z-header:   200;
  --z-drawer:   300;
  --z-overlay:  400;
  --z-modal:    500;
  --z-toast:    600;
  --z-skiplink: 700;


  /* ---------- Form controls --------------------------------------------- */

  --input-height:  48px;   /* Bible §80 */
  --button-height: 50px;   /* Bible §74 — 48-52px */
  --touch-target:  48px;   /* Bible §114 */
}


/* Respect the user's motion preference. Accessibility beats decoration. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 1ms;
    --transition-base: 1ms;
    --transition-slow: 1ms;
  }
}