/* =========================================================================
   GALAXIA CONCRETE — DESIGN TOKENS
   The single source of truth for the visual language.

   Design direction: "Industrial Modern"
   - Concrete-inspired warm neutrals form the calm, tactile base.
   - The brand blue is the confident, single accent (CTAs, links, highlights).
   - Real project photography is the hero of the brand.

   HOW TO ITERATE:
   Change a value here and it propagates across every page + component.
   Never hard-code a color/size in component CSS — reference a token instead.
   See DESIGN-SYSTEM.md for documentation and usage guidance.
   ========================================================================= */

:root {
  /* ---------------------------------------------------------------------
     1. COLOR — Concrete neutrals (warm greys, like cured concrete)
     --------------------------------------------------------------------- */
  --c-concrete-50:  #f7f6f3;   /* page background / fresh concrete */
  --c-concrete-100: #efedE8;   /* subtle section fill */
  --c-concrete-200: #e2dfd8;   /* hairlines, dividers */
  --c-concrete-300: #c8c4ba;   /* borders, disabled */
  --c-concrete-400: #a29d91;   /* placeholder text */
  --c-concrete-500: #6f6a5f;   /* secondary text (WCAG AA on light) */
  --c-concrete-600: #5c574e;   /* body text on light */
  --c-concrete-700: #423e37;   /* strong text */
  --c-concrete-800: #2b2822;   /* headings */
  --c-concrete-900: #1a1713;   /* near-black / dark sections */

  /* ---------------------------------------------------------------------
     2. COLOR — Brand blue (from the Galaxia logo). The primary accent.
     --------------------------------------------------------------------- */
  --c-brand-50:  #eef6fb;
  --c-brand-100: #d6e9f6;
  --c-brand-200: #aed2ec;
  --c-brand-300: #7bb4dc;
  --c-brand-400: #4a93c6;
  --c-brand-500: #2b7fb0;   /* primary brand blue */
  --c-brand-600: #1f6894;   /* hover / active */
  --c-brand-700: #1a5478;   /* deep brand teal-blue */
  --c-brand-800: #16435e;
  --c-brand-900: #123549;

  /* ---------------------------------------------------------------------
     3. COLOR — Signal (used sparingly: ratings, urgency, accents)
     --------------------------------------------------------------------- */
  --c-signal-400: #f2b14e;   /* warm amber */
  --c-signal-500: #e29524;
  --c-success-500: #2f9e6d;
  --c-danger-500:  #cf4436;

  /* Semantic aliases (use these in components) */
  --color-bg:          var(--c-concrete-50);
  --color-surface:     #ffffff;
  --color-surface-alt: var(--c-concrete-100);
  --color-text:        var(--c-concrete-600);
  --color-heading:     var(--c-concrete-800);
  --color-muted:       var(--c-concrete-500);
  --color-border:      var(--c-concrete-200);
  --color-accent:      var(--c-brand-500);
  --color-accent-ink:  var(--c-brand-700);
  --color-on-accent:   #ffffff;
  --color-dark:        var(--c-concrete-900);
  --color-on-dark:     #f4f2ee;

  /* ---------------------------------------------------------------------
     4. TYPOGRAPHY
     --------------------------------------------------------------------- */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Fluid type scale (clamps between mobile & desktop) */
  --text-xs:   0.78rem;
  --text-sm:   0.9rem;
  --text-base: 1.0625rem;   /* 17px */
  --text-lg:   1.1875rem;
  --text-xl:   1.375rem;
  --text-2xl:  clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  --text-3xl:  clamp(1.9rem, 1.55rem + 1.5vw, 2.65rem);
  --text-4xl:  clamp(2.35rem, 1.75rem + 2.6vw, 3.6rem);
  --text-5xl:  clamp(2.9rem, 1.9rem + 4.2vw, 5rem);

  --leading-tight: 1.08;
  --leading-snug: 1.22;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-caps: 0.14em;   /* for eyebrow labels */

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---------------------------------------------------------------------
     5. SPACING (4px base grid)
     --------------------------------------------------------------------- */
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 2.75rem;   /* 44 */
  --space-8: 4rem;      /* 64 */
  --space-9: 5.5rem;    /* 88 */
  --space-10: 7.5rem;   /* 120 */

  /* Section rhythm */
  --section-pad-y: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);

  /* ---------------------------------------------------------------------
     6. LAYOUT
     --------------------------------------------------------------------- */
  --container-max: 1200px;
  --container-narrow: 760px;
  --container-pad: clamp(1.15rem, 0.85rem + 1.6vw, 2.5rem);
  --header-h: 74px;

  /* ---------------------------------------------------------------------
     7. RADII
     --------------------------------------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-pill: 999px;

  /* ---------------------------------------------------------------------
     8. SHADOWS (soft, layered elevation)
     --------------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(26, 23, 19, 0.06);
  --shadow-sm: 0 2px 8px rgba(26, 23, 19, 0.07);
  --shadow-md: 0 10px 26px -10px rgba(26, 23, 19, 0.16);
  --shadow-lg: 0 24px 50px -18px rgba(26, 23, 19, 0.24);
  --shadow-xl: 0 40px 80px -24px rgba(26, 23, 19, 0.32);
  --shadow-accent: 0 14px 30px -12px rgba(31, 104, 148, 0.5);

  /* ---------------------------------------------------------------------
     9. MOTION
     --------------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 140ms;
  --duration-base: 240ms;
  --duration-slow: 500ms;

  /* ---------------------------------------------------------------------
     10. Z-INDEX
     --------------------------------------------------------------------- */
  --z-base: 0;
  --z-sticky: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;
}