/**
 * Perfect LHD — Design Tokens
 * ==================================
 * Source of truth for all brand colors, typography, spacing, and surface styles.
 * 3-tier architecture: Raw → Semantic → Component
 *
 * Version: 2.0 | Date: 2026-04-25
 * Owner: Perfect LHD | Applies to: all perfect-lhd projects
 *
 * Verified against brand assets (2026-04-25):
 *   plhd-logo-gradient.png  — 1958x1958
 *   plhd-logo-nobg.png     — 2000x2000
 *   plhd-name-banner.png   — 6000x2400
 *   plhd-whatsapp-cover.png — 851x315
 *
 * How to use in child project globals.css:
 *   @import "../../perfect-lhd/design-system/tokens.css";
 *
 * Do NOT redefine token values in child projects.
 */

/* ══════════════════════════════════════════
   TIER 1 — RAW BRAND TOKENS
   (Source of truth. Never use directly in components.)
   ══════════════════════════════════════════ */

:root {

  /* ── Primary Red ─────────────────────────── */
  /* Logo cross, primary accent, CTAs, links, active states */
  /* Verified from plhd-logo-gradient.png: #D21E0F → #d02010 */
  --plhd-red:             #d02010;
  --plhd-red-dark:        #b01a0c;   /* Hover state */
  --plhd-red-tint:        rgba(208, 32, 16, 0.12);  /* Subtle bg tint */

  /* ── Primary Gold ────────────────────────── */
  /* Logo circle, brand mark, special hero CTAs */
  /* Verified from plhd-logo-gradient.png: #F0D20F → #f0d010 */
  --plhd-gold:            #f0d010;
  --plhd-gold-light:      #fdf4dc;   /* Notice / pending backgrounds */
  --plhd-gold-bright:     #f0e040;   /* WhatsApp / social covers */
  --plhd-gold-hover:      #d4bc0e;   /* Hover state */

  /* ── Navy (Secondary Brand) ──────────────── */
  /* 'LAB / HEALTHCARE / DIAGNOSTICS' text in name banner */
  /* Verified from plhd-name-banner.png: #2D1E78 */
  --plhd-navy:            #2d1e78;
  --plhd-navy-light:       #3d2e98;   /* Lighter variant */

  /* ── Pure Black ──────────────────────────── */
  /* Name banner background, logo text — NOT charcoal */
  --plhd-black:            #000000;

  /* ── Charcoal Palette ────────────────────── */
  /* UI dark surfaces — navbar, sidebar, hero */
  --plhd-charcoal:        #1a1a1a;
  --plhd-charcoal-light:  #2a2a2a;   /* Hover states */

  /* ── Surfaces ────────────────────────────── */
  --plhd-white:           #ffffff;
  --plhd-off-white:        #f5f4ef;   /* Page background */
  --plhd-border:           #e8e4dc;   /* Card borders, dividers */

  /* ── Text Colors ─────────────────────────── */
  --plhd-text-dark:        #1a1a1a;   /* Primary text on white/off-white */
  --plhd-text-mid:         #4a4a4a;   /* Secondary text, labels */
  --plhd-text-muted:       #6a6a6a;   /* Tertiary text, metadata */
  --plhd-text-white:       rgba(255, 255, 255, 0.9);
  --plhd-text-white-muted: rgba(255, 255, 255, 0.45);
  --plhd-text-navy:        #2d1e78;   /* Text on light bg using navy */

  /* ── Status Colors ───────────────────────── */
  /* Semantic only — never use as primary accent */
  --plhd-success:          #15803d;
  --plhd-success-bg:       #dcfce7;
  --plhd-critical:         #991b1b;
  --plhd-critical-bg:      #fee2e2;
  --plhd-warning:          #854d0e;
  --plhd-warning-bg:       #fdf4dc;
  --plhd-info:             #1e40af;
  --plhd-info-bg:          #dbeafe;

}


/* ══════════════════════════════════════════
   TIER 2 — SEMANTIC TOKENS
   (Intent-based. Change the raw value here, all components update.)
   ══════════════════════════════════════════ */

:root {

  /* ── Brand ───────────────────────────────── */
  --plhd-color-primary:           var(--plhd-gold);
  --plhd-color-primary-hover:     var(--plhd-gold-hover);
  --plhd-color-primary-light:     var(--plhd-gold-light);
  --plhd-color-accent:            var(--plhd-red);
  --plhd-color-accent-hover:      var(--plhd-red-dark);
  --plhd-color-secondary:          var(--plhd-navy);

  /* ── Surfaces ────────────────────────────── */
  --plhd-surface-background:      var(--plhd-off-white);
  --plhd-surface-card:            var(--plhd-white);
  --plhd-surface-elevated:        var(--plhd-white);
  --plhd-surface-dark:            var(--plhd-charcoal);

  /* ── Text ───────────────────────────────── */
  --plhd-text-primary:           var(--plhd-text-dark);
  --plhd-text-secondary:          var(--plhd-text-mid);
  --plhd-text-tertiary:          var(--plhd-text-muted);
  --plhd-text-inverse:           var(--plhd-text-white);
  --plhd-text-inverse-muted:     var(--plhd-text-white-muted);
  --plhd-text-link:              var(--plhd-red);
  --plhd-text-link-hover:        var(--plhd-red-dark);

  /* ── Border ──────────────────────────────── */
  --plhd-border-color:            var(--plhd-border);
  --plhd-border-dark:             var(--plhd-charcoal-light);

  /* ── Focus ──────────────────────────────── */
  --plhd-ring:                    var(--plhd-gold);

}


/* ══════════════════════════════════════════
   TIER 3 — COMPONENT TOKENS
   (Component-specific. Use in component CSS only.)
   ══════════════════════════════════════════ */

/* ── Buttons ─────────────────────────────────── */

  /* Primary Button — Red fill */
  --plhd-btn-primary-bg:          var(--plhd-color-accent);
  --plhd-btn-primary-bg-hover:    var(--plhd-color-accent-hover);
  --plhd-btn-primary-text:       var(--plhd-white);
  --plhd-btn-primary-radius:     8px;
  --plhd-btn-primary-padding:    9px 22px;
  --plhd-btn-primary-font-size:  13px;

  /* Gold CTA — Hero sections only */
  --plhd-btn-gold-bg:            var(--plhd-color-primary);
  --plhd-btn-gold-bg-hover:      var(--plhd-color-primary-hover);
  --plhd-btn-gold-text:          var(--plhd-text-dark);
  --plhd-btn-gold-radius:        8px;
  --plhd-btn-gold-padding:       9px 22px;
  --plhd-btn-gold-font-size:     13px;

  /* Secondary Button — Light surfaces */
  --plhd-btn-secondary-bg:       transparent;
  --plhd-btn-secondary-border:   var(--plhd-border-color);
  --plhd-btn-secondary-text:     var(--plhd-text-dark);
  --plhd-btn-secondary-radius:   8px;

  /* Ghost Button — Dark surfaces */
  --plhd-btn-ghost-border:       rgba(255, 255, 255, 0.3);
  --plhd-btn-ghost-text:         var(--plhd-text-inverse);

/* ── Sidebar / Navigation ─────────────────────── */

  --plhd-sidebar-bg:             var(--plhd-charcoal);
  --plhd-sidebar-border:          var(--plhd-charcoal-light);
  --plhd-sidebar-hover:          var(--plhd-charcoal-light);
  --plhd-sidebar-text:           var(--plhd-text-inverse);
  --plhd-sidebar-muted:          var(--plhd-text-inverse-muted);
  --plhd-nav-active-bg:          rgba(208, 32, 16, 0.15);
  --plhd-nav-active-text:        var(--plhd-red);
  --plhd-nav-hover-bg:           rgba(255, 255, 255, 0.06);
  --plhd-nav-hover-text:         var(--plhd-text-inverse);

/* ── Cards ───────────────────────────────────── */

  --plhd-card-bg:                var(--plhd-white);
  --plhd-card-border:             var(--plhd-border-color);
  --plhd-card-radius:             12px;
  --plhd-card-padding-x:          20px;
  --plhd-card-padding-y:          18px;
  --plhd-card-shadow:             0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);

/* ── KPI Card ────────────────────────────────── */

  --plhd-kpi-strip-color:        var(--plhd-red);
  --plhd-kpi-strip-height:       3px;

/* ── Inputs ──────────────────────────────────── */

  --plhd-input-bg:                var(--plhd-white);
  --plhd-input-border:            var(--plhd-border-color);
  --plhd-input-text:              var(--plhd-text-dark);
  --plhd-input-placeholder:        var(--plhd-text-muted);
  --plhd-input-radius:            8px;
  --plhd-input-focus-ring:        var(--plhd-gold);

/* ── Badges ──────────────────────────────────── */

  --plhd-badge-nabl-bg:           rgba(208, 32, 16, 0.1);
  --plhd-badge-nabl-text:         #991b1b;
  --plhd-badge-nabl-border:       rgba(208, 32, 16, 0.25);
  --plhd-badge-nabl-radius:       9999px;


/* ══════════════════════════════════════════
   TYPOGRAPHY
   ══════════════════════════════════════════ */

:root {

  /* Font stack — system sans-serif (no Google Fonts dependency) */
  --plhd-font:              Arial, Helvetica, sans-serif;
  --plhd-font-mono:         'JetBrains Mono', 'Courier New', monospace;

  /* Type Scale */
  --plhd-text-xs:           11px;
  --plhd-text-sm:           12px;
  --plhd-text-base:         14px;
  --plhd-text-md:           16px;
  --plhd-text-lg:           18px;
  --plhd-text-xl:           20px;
  --plhd-text-2xl:          24px;
  --plhd-text-3xl:         32px;
  --plhd-text-4xl:         48px;

  /* Font Weights */
  --plhd-font-regular:      400;
  --plhd-font-medium:       500;
  --plhd-font-semibold:     600;
  --plhd-font-bold:         700;
  --plhd-font-extrabold:    800;

  /* Line Heights */
  --plhd-leading-tight:     1.1;
  --plhd-leading-snug:      1.2;
  --plhd-leading-normal:    1.5;
  --plhd-leading-relaxed:  1.6;

}


/* ══════════════════════════════════════════
   SPACING
   ══════════════════════════════════════════ */

:root {

  /* Base 4px grid */
  --plhd-space-0:          0px;
  --plhd-space-xs:         4px;
  --plhd-space-sm:         8px;
  --plhd-space-md:         12px;
  --plhd-space-lg:         16px;
  --plhd-space-xl:         20px;
  --plhd-space-2xl:        24px;
  --plhd-space-3xl:        32px;
  --plhd-space-4xl:        48px;

  /* Component-specific */
  --plhd-section-padding:   48px;
  --plhd-section-padding-mobile: 32px;

}


/* ══════════════════════════════════════════
   BORDER RADIUS
   ══════════════════════════════════════════ */

:root {

  --plhd-radius-sm:        4px;
  --plhd-radius:           8px;      /* Buttons */
  --plhd-radius-md:        10px;     /* KPI icons */
  --plhd-radius-lg:        12px;     /* Cards */
  --plhd-radius-xl:        16px;     /* Large cards / modals */
  --plhd-radius-pill:      9999px;   /* Badges / pills */

}


/* ══════════════════════════════════════════
   SHADOWS
   ══════════════════════════════════════════ */

:root {

  /* Standard card — lab = precise, not floating */
  --plhd-shadow-card:      0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);

  /* Elevated / modal */
  --plhd-shadow-md:        0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --plhd-shadow-lg:        0 10px 25px rgba(0, 0, 0, 0.12), 0 4px 10px rgba(0, 0, 0, 0.06);

  /* No shadow on: sidebar, hero sections, full-bleed backgrounds */

}