/* ============================================================
   variables.css — Design Tokens for jonsinghlaw.ca
   All CSS custom properties. Never write raw values elsewhere;
   always reference a token from this file.
   ============================================================ */

:root {

  /* ── Brand Colors ──────────────────────────────────────────── */
  --color-primary:         #185FA5;   /* CTA buttons, links, accents */
  --color-primary-dark:    #0C447C;   /* Hover state for primary */
  --color-secondary:       #0F6E56;   /* Hover states, secondary CTAs */
  --color-secondary-dark:  #0A5040;   /* Hover state for secondary */
  --color-navy:            #042C53;   /* Headers, strong text, footer bg */
  --color-navy-light:      #0D3F73;   /* Slightly lighter navy for gradients */
  --color-gold:            #B8972E;   /* Premium accent — decorative use */

  /* ── Surface Colors ────────────────────────────────────────── */
  --color-white:           #FFFFFF;
  --color-off-white:       #FAFAF8;   /* Page background */
  --color-light-gray:      #F1EFE8;   /* Card backgrounds, alternate sections */
  --color-border:          #D3D1C7;   /* Card borders, dividers, input borders */

  /* ── Text Colors ───────────────────────────────────────────── */
  --color-text:            #2C2C2A;   /* Body text, high contrast */
  --color-text-muted:      #5F5E5A;   /* Muted text, metadata */
  --color-text-light:      #888780;   /* Disabled, hints, placeholders */
  --color-text-inverse:    #FAFAF8;   /* Text on dark backgrounds */

  /* ── Status Colors ─────────────────────────────────────────── */
  --color-success:         #639922;   /* Confirmation, positive indicators */
  --color-success-bg:      #EEF5E3;
  --color-error:           #C0392B;   /* Errors, destructive actions */
  --color-error-bg:        #FDEDEB;
  --color-warning:         #D68910;
  --color-warning-bg:      #FEF9E7;

  /* ── Spacing (8px base unit) ───────────────────────────────── */
  --spacing-xs:    4px;
  --spacing-sm:    8px;
  --spacing-md:   16px;
  --spacing-lg:   24px;
  --spacing-xl:   32px;
  --spacing-2xl:  48px;
  --spacing-3xl:  64px;
  --spacing-4xl:  80px;
  --spacing-5xl: 120px;

  /* ── Typography ─────────────────────────────────────────────── */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                 Helvetica, Arial, sans-serif;
  --font-family-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;

  /* Font sizes */
  --font-size-xs:   12px;
  --font-size-sm:   14px;
  --font-size-base: 16px;
  --font-size-md:   18px;
  --font-size-lg:   20px;
  --font-size-xl:   24px;
  --font-size-2xl:  32px;
  --font-size-3xl:  52px;

  /* Line heights */
  --line-height-tight:   1.2;
  --line-height-snug:    1.3;
  --line-height-normal:  1.4;
  --line-height-relaxed: 1.6;

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

  /* ── Border Radius ──────────────────────────────────────────── */
  --radius-xs:   2px;
  --radius-sm:   4px;    /* Inputs, buttons */
  --radius-md:   8px;    /* Cards */
  --radius-lg:  12px;    /* Hero, modal */
  --radius-full: 9999px; /* Pills */

  /* ── Shadows ────────────────────────────────────────────────── */
  --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-card:   0 8px 24px rgba(0, 0, 0, 0.15);
  --shadow-nav:    0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-focus:  0 0 0 3px rgba(24, 95, 165, 0.25);

  /* ── Layout ─────────────────────────────────────────────────── */
  --container-max:  1200px;
  --container-wide: 1440px;
  --nav-height:       72px;

  /* ── Transitions ─────────────────────────────────────────────  */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;

  /* ── Z-index Scale ──────────────────────────────────────────── */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  500;
  --z-modal:   1000;

}