@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ==========================================================================
   SmartGaulle — DESIGN TOKENS
   "Night Drive" — deep blue night, electric blue and neon red.

   Single theme. No dark mode toggle.

   Colour roles — fixed on every page:
     BLUE   primary action, navigation, links, selected state
     RED    danger, overdue, destructive, live/urgent
     The blue-to-red gradient is the brand signature and appears in
     exactly four places (see custom.css section 12).
     AMBER  warning only. GREEN success only.
   ========================================================================== */

:root {

  /* ---------------------------------------------------------------
     1. GROUND — white, cooled with blue. Never a flat neutral grey:
        every step carries a little of the brand blue so the page reads
        as one temperature.
     --------------------------------------------------------------- */
  --sg-bg:        #F3F6FC;
  --sg-surface:   #FFFFFF;
  --sg-surface-2: #EDF2FB;
  --sg-surface-3: #E1E9F7;

  --sg-line:      #DEE6F3;
  --sg-line-soft: #EBF0F9;
  --sg-line-firm: #C2D0E7;

  --sg-heading:  #101A2E;
  --sg-text:     #4C5872;
  --sg-text-dim: #7D89A4;
  --sg-on-color: #FFFFFF;

  /* ---------------------------------------------------------------
     2. BRAND — the two colours the interface is built from
     --------------------------------------------------------------- */

  /* BLUE — primary. Deep enough to hold as text and as a filled button
     on white; the neon version only survives on a dark ground. */
  --sg-blue:       #2563EB;
  --sg-blue-hover: #1D4ED8;
  --sg-blue-press: #1E40AF;
  --sg-blue-soft:  #E9F0FE;
  --sg-blue-line:  #BED3FB;
  --sg-blue-ink:   #1D4ED8;
  --sg-blue-glow:  rgba(37, 99, 235, .26);

  /* RED — danger and urgency. */
  --sg-red:       #E11D48;
  --sg-red-hover: #BE123C;
  --sg-red-press: #9F1239;
  --sg-red-soft:  #FDECF1;
  --sg-red-line:  #F8C7D5;
  --sg-red-ink:   #9F1239;
  --sg-red-glow:  rgba(225, 29, 72, .24);

  /* AMBER — warning only. Darkened so it passes on white. */
  --sg-amber:      #B45309;
  --sg-amber-hover:#96450A;
  --sg-amber-press:#7C3A08;
  --sg-amber-soft: #FDF2E3;
  --sg-amber-line: #F3D8AE;
  --sg-amber-ink:  #8A4308;

  /* GREEN — success only. */
  --sg-green:      #047857;
  --sg-green-hover:#036349;
  --sg-green-soft: #E5F5EF;
  --sg-green-line: #B6E2D2;
  --sg-green-ink:  #065F46;

  /* Signature: blue into red. Used sparingly — see section 12. */
  --sg-signature: linear-gradient(100deg, var(--sg-blue) 0%, #7A4BFF 48%, var(--sg-red) 100%);

  /* ---------------------------------------------------------------
     3. SPACING SCALE
     --------------------------------------------------------------- */
  --sg-space-1: 4px;
  --sg-space-2: 8px;
  --sg-space-3: 12px;
  --sg-space-4: 16px;
  --sg-space-5: 24px;
  --sg-space-6: 32px;
  --sg-space-7: 48px;
  --sg-space-8: 64px;
  --sg-space-9: 96px;
  --sg-section: 88px;

  /* ---------------------------------------------------------------
     4. LAYOUT GRID
     --------------------------------------------------------------- */
  --sg-container: 1180px;
  --sg-gutter: 24px;
  --sg-grid-gap: 24px;

  /* ---------------------------------------------------------------
     5. RADII
     --------------------------------------------------------------- */
  --sg-radius-sm: 8px;
  --sg-radius:    12px;
  --sg-radius-lg: 16px;
  --sg-radius-pill: 999px;

  /* ---------------------------------------------------------------
     6. COMPONENT METRICS
     --------------------------------------------------------------- */
  --sg-control-h:    44px;
  --sg-control-h-sm: 34px;
  --sg-control-px:   20px;
  --sg-card-pad:     24px;
  --sg-header-h:     68px;

  /* ---------------------------------------------------------------
     7. TYPE
        Jakarta carries the interface; Chakra Petch — a squared techno
        face — is reserved for display headings and figures.
     --------------------------------------------------------------- */
  --sg-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont,
             'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --sg-font-display: 'Chakra Petch', var(--sg-font);

  --sg-text-h1: clamp(2.125rem, 1.5rem + 2.5vw, 3.375rem);
  --sg-text-h2: clamp(1.55rem, 1.3rem + 1.1vw, 2.125rem);
  --sg-text-h3: 1.3125rem;
  --sg-text-h4: 1.0625rem;
  --sg-text-h5: 0.9375rem;
  --sg-text-body: 0.9375rem;
  --sg-text-lead: 1.0625rem;
  --sg-text-sm: 0.8125rem;
  --sg-text-label: 0.6875rem;

  --sg-leading-tight: 1.08;
  --sg-leading-snug: 1.32;
  --sg-leading: 1.65;

  /* ---------------------------------------------------------------
     8. ELEVATION & MOTION
        Dark ground: depth comes from black shadow plus a lit top edge.
     --------------------------------------------------------------- */
  /* Blue-tinted, never black or neutral grey — the shadow has to belong to
     the same temperature as the ground it falls on. */
  --sg-shadow-sm: 0 1px 2px rgba(23, 42, 84, .06);
  --sg-shadow:    0 2px 4px rgba(23, 42, 84, .04),
                  0 10px 24px -10px rgba(23, 42, 84, .12);
  --sg-shadow-md: 0 4px 10px rgba(23, 42, 84, .06),
                  0 18px 40px -14px rgba(23, 42, 84, .16);
  --sg-shadow-lg: 0 28px 64px -22px rgba(23, 42, 84, .24);
  --sg-scrim:     rgba(16, 26, 48, .48);
  --sg-wash:      rgba(243, 246, 252, .88);
  --sg-ring:      0 0 0 3px var(--sg-blue-soft);

  --sg-ease: cubic-bezier(.22,.61,.36,1);
  --sg-fast: .14s;
  --sg-base: .22s;

  /* ---------------------------------------------------------------
     9. LEGACY BRIDGE — theme.css and WHMCS templates use these names
     --------------------------------------------------------------- */
  --primary:        var(--sg-blue);
  --primary-dark:   var(--sg-blue-hover);
  --primary-darker: var(--sg-blue-press);
  --primary-light:  var(--sg-blue-soft);

  --danger:        var(--sg-red);
  --danger-light:  var(--sg-red-soft);
  --info:          var(--sg-blue);
  --worning:       var(--sg-amber);
  --warning-light: var(--sg-amber-soft);
  --success:       var(--sg-green);
  --success-light: var(--sg-green-soft);

  --gray:       var(--sg-text-dim);
  --gray-light: var(--sg-surface-2);
  --dark:       var(--sg-surface);
  --white:      var(--sg-surface);

  --body-color:    var(--sg-text);
  --heading-color: var(--sg-heading);
  --border-color:  var(--sg-line);
  --border-dark-color: var(--sg-line-firm);
  --border-primary-light: var(--sg-blue-line);

  --custom-radius: var(--sg-radius);
  --font-family-sans-serif: var(--sg-font);
  --font-family-monospace:  var(--sg-font-display);
}