/*
 * Module: Design Tokens
 * Owns: :root custom properties (colors, type scale, spacing) for The Spagnola Law Firm.
 * Depends on: nothing (loaded first, after child style.css).
 *
 * Source: SMBTeam Client Websites design system (colors_and_type.css),
 * with the 8 client color slots + fonts populated for Spagnola.
 * Only custom properties live here — actual h1/body/button rendering is
 * handled by Astra global settings + module CSS. Never hard-code hex in blocks;
 * reference these vars instead.
 */

:root {
  /* --- 8 Client Color Slots (Spagnola) --- */
  --color-brand:       #5b0807;   /* oxblood — primary identity / headings */
  --color-alt-brand:   #a51512;   /* red — section backgrounds */
  --color-primary:     #eeeeee;   /* supporting light gray */
  --color-secondary:   #f6f1e7;   /* cream */
  --color-headings:    #5b0807;   /* headings H1–H6 */
  --color-body:        #535353;   /* body copy */
  --color-background:  #ffffff;   /* page background */
  --color-accent:      #f5c31c;   /* gold — CTA / action */
  --color-hero-fade:     #e1e7f0;      /* hero left-side fade (grey-blue, not white) */
  --color-hero-fade-rgb: 225, 231, 240; /* RGB triplet for the hero fade's transparent stops */

  /* --- Semantic aliases --- */
  --text-heading:      var(--color-headings);
  --text-body:         var(--color-body);
  --text-nav:          var(--color-headings);
  --text-cta:          #5b0807;              /* dark text on gold CTA */
  --bg-page:           var(--color-background);
  --bg-section-alt:    #f6f1e7;              /* cream alt section */
  --bg-section-red:    var(--color-brand);   /* oxblood feature sections */
  --bg-card:           #ffffff;
  --bg-form:           #ffffff;
  --bg-footer:         #f6f1e7;
  --cta-bg:            var(--color-accent);
  --cta-hover-bg:      color-mix(in srgb, var(--color-accent) 88%, black);
  --border-color:      var(--color-brand);
  --frame-color:       var(--color-accent);  /* gold offset image frame */
  --star-color:        #f5c31c;
  --link-color:        var(--color-alt-brand);
  --link-hover:        var(--color-brand);

  /* --- Neutral Scale --- */
  --gray-50:  #f8f8f8;
  --gray-100: #f0f0f0;
  --gray-200: #e0e0e0;
  --gray-300: #cccccc;
  --gray-400: #aaaaaa;
  --gray-500: #888888;
  --gray-600: #666666;
  --gray-700: #444444;
  --gray-800: #2a2a2a;
  --gray-900: #1a1a1a;
  --white:    #ffffff;
  --black:    #000000;

  /* --- Fonts --- */
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Lato', 'Source Sans 3', system-ui, sans-serif;
  --font-nav:     var(--font-body);
  --font-button:  var(--font-body);

  /* --- Font Weights --- */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* --- Type Scale: Desktop --- */
  --text-h1: 64px;  --lh-h1: 1.2;
  --text-h2: 48px;  --lh-h2: 1.25;
  --text-h3: 34px;  --lh-h3: 1.3;
  --text-h4: 28px;  --lh-h4: 1.2;
  --text-h5: 24px;  --lh-h5: 1.2;
  --text-h6: 20px;  --lh-h6: 1.3;
  --text-subheading: 16px; --lh-subheading: 1.4;  /* ALL CAPS eyebrow */
  --text-body-lg: 18px; --lh-body-lg: 1.6;
  --text-body:    18px; --lh-body:    1.6;
  --text-button:  18px; --lh-button:  1.4;
  --text-nav:     18px; --lh-nav:     1.4;
  --text-small:   16px; --lh-small:   1.5;
  --text-caption: 14px; --lh-caption: 1.4;

  /* --- Letter Spacing --- */
  --tracking-subheading: 0.14em;
  --tracking-nav:        0.01em;
  --tracking-normal:     0;

  /* --- Container / Layout --- */
  --container-max:        1200px;
  --container-padding:    40px;
  --container-padding-sm: 20px;
  --section-padding-y:    80px;
  --section-padding-y-sm: 48px;
  --gap-card:             28px;
  --gap-section-title:    32px;

  /* --- Radius / Shadow / Motion --- */
  --radius-none:   0px;
  --radius-sm:     2px;
  --radius-md:     4px;
  --radius-pill:   999px;
  --radius-circle: 50%;
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.10);
  --shadow-card: 0 10px 30px rgba(0,0,0,0.08);
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;
}