/* ===========================================================================
   K.J.R.Creations — design tokens
   ---------------------------------------------------------------------------
   Every colour, size, radius, shadow and duration used anywhere on this site
   is declared here and nowhere else. No stylesheet and no page carries a raw
   hex value. To restyle the site, change a value here and every page follows.
   =========================================================================== */

:root {
  color-scheme: light;

  /* --- Palette ----------------------------------------------------------- */
  --color-brand: #0057ff;          /* deep electric blue — primary actions */
  --color-brand-600: #0049d6;      /* hover */
  --color-brand-700: #003bad;      /* active */
  --color-brand-50: #eef3ff;       /* tinted panels */

  --color-charcoal: #181818;       /* dark sections and the footer */
  --color-charcoal-800: #232323;
  --color-charcoal-700: #2e2e2e;

  --color-accent: #32d74b;         /* electric green — WhatsApp, confirmations */
  --color-accent-600: #22b23a;

  --color-paper: #ffffff;          /* page ground */
  --color-mist: #f5f6f8;           /* alternate section ground */
  --color-ink: #111111;            /* body text */
  --color-muted: #5c5f66;          /* secondary text — passes AA on paper */
  --color-line: #e6e8ec;           /* hairlines */
  --color-line-strong: #d3d6dd;    /* outlined controls */

  --color-star: #f5a524;           /* rating stars */
  --color-star-off: #dcdfe5;       /* the unearned part of a rating */
  --color-warn: #a15c00;           /* something needs looking at */
  --color-warn-50: #fff6e8;
  --color-danger: #c02626;         /* something went wrong */
  --color-danger-50: #fdf0f0;
  --color-accent-tint: rgb(50 215 75 / 0.14);  /* confirmed states */
  --color-veil: rgb(17 17 17 / 0.55);          /* over photographs */

  /* --- Type -------------------------------------------------------------- */
  --font-sans: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --text-display: 4.25rem;         /* 68px — hero headline, desktop */
  --text-display-mobile: 2.5rem;   /* 40px */
  --text-h1: 3rem;
  --text-h1-mobile: 2rem;
  --text-h2: 2.25rem;
  --text-h2-mobile: 1.625rem;
  --text-h3: 1.375rem;
  --text-lead: 1.375rem;           /* 22px — hero subheading */
  --text-lead-mobile: 1.125rem;
  --text-body: 1.0625rem;          /* 17px */
  --text-small: 0.875rem;
  --text-eyebrow: 0.75rem;

  --leading-display: 1.03;
  --leading-heading: 1.12;
  --leading-body: 1.65;

  --tracking-display: -0.035em;
  --tracking-heading: -0.025em;
  --tracking-eyebrow: 0.14em;

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

  /* --- Spacing ----------------------------------------------------------- */
  --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;

  --section-y: 5rem;               /* vertical rhythm between sections */
  --section-y-lg: 6.5rem;
  --container: 80rem;              /* standard content width */
  --container-narrow: 52rem;       /* prose width */
  --gutter: 1.25rem;
  --gutter-lg: 2rem;
  --header-h: 4.5rem;              /* sticky header height */

  /* --- Shape and depth --------------------------------------------------- */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-card: 1.25rem;
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgb(17 17 17 / 0.04), 0 8px 24px -12px rgb(17 17 17 / 0.12);
  --shadow-lift: 0 2px 4px rgb(17 17 17 / 0.05), 0 24px 48px -20px rgb(17 17 17 / 0.22);
  --shadow-nav: 0 1px 0 rgb(17 17 17 / 0.06), 0 8px 32px -24px rgb(17 17 17 / 0.35);

  /* --- Motion ------------------------------------------------------------ */
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 200ms;
  --duration-base: 300ms;
  --duration-slow: 700ms;

  /* --- Layers ------------------------------------------------------------ */
  --z-bar: 70;                     /* mobile bottom bar */
  --z-header: 80;
  --z-drawer: 90;
  --z-overlay: 95;                 /* search */
  --z-modal: 100;                  /* quick view */

  /* --- The dashboard ------------------------------------------------------ */
  --color-side: #14161a;           /* sidebar ground */
  --color-side-raised: #1d2026;    /* the item under the cursor */
  --color-side-line: rgb(255 255 255 / 0.10);
  --color-side-text: rgb(255 255 255 / 0.92);
  --color-side-dim: rgb(255 255 255 / 0.55);
  --adm-side: 16.5rem;             /* sidebar width */
  --adm-gutter: 1.5rem;            /* padding inside the working area */
}