/* ==========================================================================
   CRservice PHP — Design Tokens v2
   ========================================================================== */

:root {
  /* ── Brand colours ── */
  --color-primary:       #0d7d57;
  --color-primary-light: #14a271;
  --color-primary-dark:  #073f2c;
  --color-primary-50:    #edfdf5;
  --color-primary-100:   #d1fae5;
  --color-primary-200:   #a7f3d0;

  --color-accent:        #d79800;
  --color-accent-dark:   #a87700;

  /* ── Neutrals ── */
  --color-neutral-50:  #fafafa;
  --color-neutral-100: #f5f5f5;
  --color-neutral-200: #e5e5e5;
  --color-neutral-300: #d4d4d4;
  --color-neutral-400: #a3a3a3;
  --color-neutral-500: #737373;
  --color-neutral-600: #525252;
  --color-neutral-700: #404040;
  --color-neutral-800: #262626;
  --color-neutral-900: #0f0f0f;

  /* ── Semantic roles ── */
  --color-bg:             #ffffff;
  --color-bg-alt:         #f8fbf9;
  --color-bg-dark:        #0f0f0f;
  --color-text:           #111827;
  --color-text-muted:     #6b7280;
  --color-text-on-primary:#ffffff;
  --color-text-on-dark:   #ffffff;
  --color-border:         #e8f5ee;
  --color-border-neutral: #e5e5e5;
  --color-border-dark:    rgba(255,255,255,.08);
  --color-success:        #16a34a;
  --color-error:          #dc2626;
  --color-focus:          var(--color-primary);

  /* ── Typography ── */
  --font-display: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --font-body:    "DM Sans", system-ui, -apple-system, sans-serif;

  /* ── Type scale (clamp: mobile → desktop) ── */
  --text-xs:   clamp(0.75rem,  1.5vw,  0.8125rem);
  --text-sm:   clamp(0.875rem, 1.6vw,  0.9375rem);
  --text-base: clamp(1rem,     1.8vw,  1.0625rem);
  --text-lg:   clamp(1.0625rem,2vw,    1.1875rem);
  --text-xl:   clamp(1.1875rem,2.4vw,  1.375rem);
  --text-2xl:  clamp(1.375rem, 3vw,    1.75rem);
  --text-3xl:  clamp(1.75rem,  4vw,    2.5rem);
  --text-4xl:  clamp(2.25rem,  5.5vw,  3.5rem);
  --text-hero: clamp(2.5rem,   7vw,    5rem);

  /* ── Line heights ── */
  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  /* ── Font weights ── */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* ── Spacing ── */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 6rem;
  --space-5xl: 9rem;

  /* ── Layout ── */
  --container-max:     1280px;
  --container-narrow:  800px;
  --container-padding: clamp(1.25rem, 5vw, 2.5rem);
  --section-spacing:   clamp(4rem, 9vw, 7rem);
  --header-h:          72px;

  /* ── Border radius ── */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   28px;
  --radius-2xl:  40px;
  --radius-pill: 9999px;

  /* ── Shadows ── */
  --shadow-xs:      0 1px 2px rgba(0,0,0,.05);
  --shadow-sm:      0 2px 8px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
  --shadow-md:      0 6px 20px rgba(0,0,0,.07), 0 2px 8px rgba(0,0,0,.04);
  --shadow-lg:      0 16px 40px rgba(0,0,0,.09), 0 4px 14px rgba(0,0,0,.04);
  --shadow-xl:      0 28px 64px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.06);

  --shadow-green-sm: 0 4px 16px rgba(13,125,87,.18);
  --shadow-green-md: 0 8px 32px rgba(13,125,87,.22);
  --shadow-green-lg: 0 16px 48px rgba(13,125,87,.28);

  /* ── Gradients ── */
  --gradient-primary: linear-gradient(135deg, #073f2c 0%, #0d7d57 100%);
  --gradient-hero:    linear-gradient(140deg, #041a10 0%, #063524 45%, #0b5e40 100%);
  --gradient-hero-overlay: linear-gradient(140deg, rgba(4,26,16,.92) 0%, rgba(6,53,36,.8) 100%);
  --gradient-btn:     linear-gradient(135deg, #0d7d57 0%, #14a271 100%);

  /* ── Transitions ── */
  --transition-fast: 150ms ease;
  --transition-base: 260ms ease;
  --transition-slow: 500ms cubic-bezier(0.16,1,0.3,1);

  /* ── Z-index ── */
  --z-header:   100;
  --z-mobile:   200;
  --z-modal:    300;
  --z-toast:    400;
}