/* ==========================================================================
   ServiceLine — Design Tokens
   --------------------------------------------------------------------------
   Single source of truth for color, spacing, layout, motion, and z-index
   values, derived directly from the ServiceLine Visual Foundation
   (VISUAL_FOUNDATION.txt). Do not hardcode raw color/spacing/motion values
   anywhere else in the project — reference these custom properties.

   Exact hex values below are a first-pass, implementable interpretation of
   the Foundation's written descriptions (Obsidian "near-black, not flat",
   Concrete as a tonal range, etc). They are easy to refine centrally once
   real brand color references exist — see project report for this note.
   ========================================================================== */

:root {

  /* ------------------------------------------------------------------
     COLOR — Obsidian / Charcoal / Concrete / Mineral White / Industrial Amber
     ------------------------------------------------------------------ */

  /* Obsidian — primary dark background. Near-black, subtle depth. */
  --color-obsidian:        #0a0a0b;
  --color-obsidian-raised: #0e0e10;

  /* Charcoal — secondary dark surface, a distinct material from Obsidian */
  --color-charcoal:        #1c1c1e;
  --color-charcoal-raised: #232326;

  /* Concrete — primary material neutral, a tonal range, not one grey */
  --color-concrete-900:    #2e2e30; /* dark graphite */
  --color-concrete-700:    #4d4d4f;
  --color-concrete-500:    #7a7a7c; /* cool concrete */
  --color-concrete-300:    #a8a8a6; /* mineral grey */
  --color-concrete-100:    #d8d6d1;

  /* Mineral White — primary light text, slightly warm/mineral, not #fff */
  --color-mineral-white:   #f2f0ec;

  /* Brand accents — aligned to the ServiceLine logo (see
     public/assets/images/brand/ + resources/components/logo-mark.php).
     Orange is the primary accent (nav state, progress, CTA highlight,
     micro-interactions — sparing use, never a surface fill). Blue is
     the secondary, used ONLY for plan/blueprint moments and small
     structural details. */
  --color-amber:           #f15a29; /* brand orange (name kept for compatibility) */
  --color-amber-dim:       #b23f1a;
  --color-brand-blue:      #0872b9;
  --color-brand-blue-dim:  #0a577f;

  /* Logo facet colors (consumed by resources/components/logo-mark.php) */
  --logo-orange: #f15a29;
  --logo-s:      #363639;
  --logo-blue:   #0872b9;

  /* Semantic aliases — components should reference these, not the raw
     color tokens above, so the material mapping stays adjustable in
     one place. */
  --surface-primary:   var(--color-obsidian);
  --surface-secondary: var(--color-charcoal);
  --surface-material:  var(--color-concrete-900);
  --surface-light:     var(--color-concrete-100);

  --text-primary:   var(--color-mineral-white);
  --text-muted:     var(--color-concrete-300);
  --text-on-light:  var(--color-concrete-900);

  --accent:     var(--color-amber);
  --accent-dim: var(--color-amber-dim);


  /* ------------------------------------------------------------------
     SPACING 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;
  --space-10: 8rem;
  --space-11: 12rem;


  /* ------------------------------------------------------------------
     LAYOUT / CONTAINER WIDTHS
     ------------------------------------------------------------------ */

  --container-standard: 1200px;
  --container-wide:     1600px;
  --container-gutter:   1.5rem;


  /* ------------------------------------------------------------------
     Z-INDEX LAYERS
     ------------------------------------------------------------------ */

  --z-base:       1;
  --z-content:    10;
  --z-overlay:    100;
  --z-nav:        200;
  --z-transition: 300; /* reserved: future page-transition layer */
  --z-cursor:     400; /* reserved: future custom cursor layer */


  /* ------------------------------------------------------------------
     BORDER / LINE VALUES
     ------------------------------------------------------------------ */

  --line-hairline: 1px;
  --line-thin:     1px solid var(--color-concrete-700);
  --line-accent:   1px solid var(--accent);
  --radius-none:   0;
  --radius-soft:   2px; /* only when a hard edge would be unreadable, e.g. small tags */


  /* ------------------------------------------------------------------
     STAGE ATMOSPHERE — RAW / PLAN / BUILD / FINISH
     The visual language the homepage journey (and any other stage-
     tagged content — services.php capabilities, about.php process)
     evolves through. Each stage has a background, foreground, and
     accent-intensity so a single section can re-skin itself per stage
     via a data-stage="raw|plan|build|finish" attribute rather than
     four hand-built sections. Grounded in the existing color tokens
     above — these are combinations, not new raw colors.
     ------------------------------------------------------------------ */

  --stage-raw-bg:     var(--color-obsidian);
  --stage-raw-fg:     var(--text-primary);
  --stage-raw-line:   var(--color-concrete-700);

  --stage-plan-bg:    var(--color-charcoal);
  --stage-plan-fg:    var(--text-primary);
  --stage-plan-line:  var(--color-brand-blue); /* blueprints are blue — logo secondary */

  --stage-build-bg:   var(--color-concrete-900);
  --stage-build-fg:   var(--text-primary);
  --stage-build-line: var(--accent);

  --stage-finish-bg:  var(--color-mineral-white);
  --stage-finish-fg:  var(--color-concrete-900);
  --stage-finish-line: var(--color-concrete-500);


  /* ------------------------------------------------------------------
     MOTION — DURATION
     Maps to the Foundation's three motion levels.
     ------------------------------------------------------------------ */

  --duration-micro:      150ms;  /* button hover, cursor, nav indicator */
  --duration-section:    600ms;  /* headline reveals, scroll-triggered transitions */
  --duration-experience: 1200ms; /* hero transformation, phase changes, page transitions */


  /* ------------------------------------------------------------------
     MOTION — EASING
     No bounce/elastic/back curves — heavy, precise, or controlled only.
     ------------------------------------------------------------------ */

  --ease-precise: cubic-bezier(0.4, 0, 0.2, 1);   /* fast, exact UI motion */
  --ease-reveal:  cubic-bezier(0.16, 1, 0.3, 1);   /* controlled text/section reveals */
  --ease-heavy:   cubic-bezier(0.65, 0, 0.35, 1);  /* large material objects, experience-level motion */
}

/* ------------------------------------------------------------------
   Reduced motion — tokens collapse toward-instant rather than
   disappearing. Whether to skip an animation entirely is a per
   component decision made later; the timing scale stays honest
   either way.
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-micro:      1ms;
    --duration-section:    1ms;
    --duration-experience: 1ms;
  }
}

/* Site-owner motion policy: the 'force-motion' class (set before first
   paint in resources/layouts/partials/meta.php) restores the real
   durations regardless of the OS reduced-motion setting — see the
   RESPECT_OS_REDUCED_MOTION note in js/animations/core/motion-utils.js.
   Remove that class line to honor the OS preference again. */
:root.force-motion {
  --duration-micro:      150ms;
  --duration-section:    600ms;
  --duration-experience: 1200ms;
}