/* tokens.css — Caliber Metal design tokens.
 * Components reference SEMANTIC tokens (--brand-*, --text-*) only.
 * Raw palette values exist solely as targets for the semantic aliases below.
 *
 * To re-theme the site (e.g. swap green ↔ red), change ONLY the
 * `--brand-*` aliases at the bottom of this file. Do not edit
 * components.
 */
:root {
    /* ---- Raw palette ---- */
    --green-700: #14582A;
    --green-600: #1F7A3A;
    --green-500: #2A9648;
    --green-100: #E2F1E7;

    --red-700:   #9B1F1F;
    --red-600:   #C62828;
    --red-500:   #E53935;
    --red-100:   #FCE6E6;

    --black:     #0F1011;
    --gray-900:  #1A1C1E;
    --gray-700:  #3D4044;
    --gray-500:  #6E7378;
    --gray-300:  #C7CACE;
    --gray-200:  #E2E4E7;
    --gray-100:  #F4F5F6;
    --white:     #FFFFFF;

    /* ---- Semantic aliases (THE THEME SWAP POINT) ---- */
    --brand-primary:        var(--green-600);
    --brand-primary-dark:   var(--green-700);
    --brand-primary-light:  var(--green-500);
    --brand-primary-tint:   var(--green-100);
    --brand-on-primary:     var(--white);
    --brand-accent:         var(--black);

    --text-strong:    var(--black);
    --text-heading:   var(--gray-900);  /* section titles — slightly softer than --text-strong */
    --text-body:      var(--gray-700);
    --text-muted:     var(--gray-500);
    --text-on-dark:   var(--white);
    --text-muted-on-dark: var(--gray-300);
    --text-link:      var(--brand-primary-dark);

    --bg-page:        var(--white);
    --bg-soft:        var(--gray-100);
    --bg-dark:        var(--gray-900);
    --bg-darker:      var(--black);
    --bg-section-dark: #1B1D20; /* Warmer dark for the services section bg */

    --surface-placeholder: var(--gray-200);

    --border-subtle:  var(--gray-200);
    --border-strong:  var(--gray-300);

    --error:          var(--red-600);
    --error-tint:     var(--red-100);

    /* ---- Typography ---- */
    --font-heading: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-body:    'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --fs-xs:   0.75rem;   /* 12 */
    --fs-sm:   0.875rem;  /* 14 */
    --fs-base: 1rem;      /* 16 */
    --fs-md:   1.125rem;  /* 18 */
    --fs-lg:   1.375rem;  /* 22 */
    --fs-xl:   1.875rem;  /* 30 */
    --fs-2xl:  2.5rem;    /* 40 */
    --fs-3xl:  3.25rem;   /* 52 */

    --lh-tight: 1.15;
    --lh-snug:  1.35;
    --lh-body:  1.6;

    --fw-regular: 400;
    --fw-medium:  500;
    --fw-semibold:600;
    --fw-bold:    700;
    --fw-black:   800;

    /* ---- Spacing scale (4px base) ---- */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* ---- Layout ---- */
    --container: 1240px;
    --container-narrow: 920px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 14px;

    /* ---- Effects ---- */
    --shadow-sm: 0 1px 2px rgba(15,16,17,0.06);
    --shadow-md: 0 6px 18px rgba(15,16,17,0.08);
    --shadow-lg: 0 16px 40px rgba(15,16,17,0.12);
    --transition: 200ms ease;
}