/* ==========================================================================
   TechRentalHub — Design Tokens
   Single source of truth for color, type, spacing, radius and shadow.
   Consumed by reset.css, main.css, components.css, responsive.css.
   ========================================================================== */

:root {

  /* -- Color: brand -------------------------------------------------------
     Ink Navy    = primary brand / headings / dark surfaces
     Steel Slate = secondary text / borders / muted UI
     Signal Amber= CTA + asset-tag accent (pair with navy text)
     Uptime Green= availability / success states ONLY
     Cloud Grey  = page background / section alternation
     Asset White = card + form surface
  -------------------------------------------------------------------------- */
  --color-ink-navy: #101E33;
  --color-ink-navy-rgb: 16, 30, 51;
  --color-steel-slate: #47536B;
  --color-signal-amber: #E8963B;
  --color-signal-amber-dark: #9B5E1A;
  --color-uptime-green: #2E9563;
  --color-uptime-green-dark: #217249;
  --color-cloud-grey: #F3F5F8;
  --color-asset-white: #FFFFFF;

  /* -- Color: semantic aliases ---------------------------------------------
     Reference these in components, not the raw palette above, so a future
     re-theme (or WordPress customizer wiring) only touches this block. */
  --color-bg: var(--color-cloud-grey);
  --color-surface: var(--color-asset-white);
  --color-text: var(--color-ink-navy);
  --color-text-muted: var(--color-steel-slate);
  --color-border: #DCE1E9;
  /* Stronger border for interactive components (form fields) — WCAG 1.4.11
     Non-text Contrast requires 3:1 for UI-component boundaries; the subtle
     --color-border above is for decorative dividers/cards only and is
     exempt as non-essential. */
  --color-border-strong: #7B8EAC;
  --color-link: var(--color-ink-navy);
  --color-accent: var(--color-signal-amber);
  --color-accent-hover: var(--color-signal-amber-dark);
  /* Button hover background only — darkened just enough to read as a
     "pressed" state while keeping navy label text at 4.5:1. Deliberately
     lighter than --color-accent-hover, which is tuned for amber-as-text
     use (links, badges, wordmark) and is too dark for this purpose. */
  --color-accent-pressed: #C37217;
  --color-success: var(--color-uptime-green);
  --color-success-hover: var(--color-uptime-green-dark);
  --color-inverse-bg: var(--color-ink-navy);
  --color-inverse-text: var(--color-asset-white);

  /* -- Typography: font stacks ---------------------------------------------
     Display: Oswald (headings only, used with restraint)
     Body:    Inter (body copy, forms, UI, data-dense specs) */
  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* -- Typography: scale ----------------------------------------------------
     Mobile-first values; clamp() carries each token to its desktop size
     without separate breakpoint overrides. */
  --text-display: clamp(2rem, 1.6rem + 2vw, 3.25rem);
  --text-h1: clamp(1.75rem, 1.45rem + 1.5vw, 2.75rem);
  --text-h2: clamp(1.5rem, 1.3rem + 1vw, 2.125rem);
  --text-h3: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --text-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-micro: 0.75rem;

  /* -- Typography: weights -------------------------------------------------- */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* -- Typography: line-heights ---------------------------------------------- */
  --leading-display: 1.1;
  --leading-h1: 1.15;
  --leading-h2: 1.2;
  --leading-h3: 1.3;
  --leading-lead: 1.6;
  --leading-body: 1.6;
  --leading-small: 1.5;
  --leading-micro: 1.4;

  /* -- Spacing scale (4px base) ---------------------------------------------- */
  --space-1: 0.25rem;   /* 4px  */
  --space-2: 0.5rem;    /* 8px  */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-7: 3rem;      /* 48px */
  --space-8: 4rem;      /* 64px */
  --space-9: 6rem;      /* 96px */

  /* -- Radius ------------------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* -- Shadow (navy-tinted, not pure black) -------------------------------- */
  --shadow-sm: 0 1px 2px rgba(var(--color-ink-navy-rgb), 0.08),
               0 1px 1px rgba(var(--color-ink-navy-rgb), 0.06);
  --shadow-md: 0 4px 10px rgba(var(--color-ink-navy-rgb), 0.10),
               0 2px 4px rgba(var(--color-ink-navy-rgb), 0.08);
  --shadow-lg: 0 12px 28px rgba(var(--color-ink-navy-rgb), 0.16),
               0 4px 10px rgba(var(--color-ink-navy-rgb), 0.10);

  /* -- Signature element: Asset Tag Corner ---------------------------------
     Consumed by .card / .product-card modifiers to cut a die-cut notch and
     size the status dot. Values only — no content lives here. */
  --tag-notch-size: 14px;
  --tag-dot-size: 10px;

  /* -- Breakpoints (reference only — media queries can't read custom
     properties, so responsive.css must hardcode these values, but they're
     documented here as the single source of truth) --------------------------
     480px  — large phones
     768px  — tablets
     1024px — small desktop / landscape tablet
     1280px — desktop
  -------------------------------------------------------------------------- */
}