/* JMU Painting — design tokens. Edit values here to change site-wide. */

/* JMU Painting — theme styles
   Pixel-match rebuild of jmupainting.com.

   Design tokens are defined in the :root block below. Component rules
   throughout this file currently use raw values; future edits should
   prefer var(--token) references so site-wide changes are a one-line edit
   here. Legacy --jmu-* names are preserved as aliases for compatibility. */

:root {
	/* ============================================================
	   1. COLOR PALETTE
	   ============================================================ */

	/* Brand */
	--brand-red:           #a00810;
	--brand-red-dark:      #7a0008;
	--brand-charcoal:      #202020;
	--brand-charcoal-soft: #383838;
	--brand-silver:        #c0c0c0;
	--brand-silver-dark:   #8a8d91;
	--brand-silver-light:  #e3e5e8;
	--accent-silver:       var(--brand-silver);
	--white:               #ffffff;
	--black:               #000000;

	--color-primary:       var(--brand-red);       /* CTAs, links, active states */
	--color-primary-hover: var(--brand-red-dark);
	--color-primary-deep:  var(--brand-red-dark);
	--color-primary-alt:   var(--brand-red);
	--color-secondary:     var(--accent-silver);   /* decorative accents */
	--color-secondary-alt: var(--brand-silver-dark);

	/* Text */
	--text-main:    var(--brand-charcoal);       /* body copy */
	--text-strong:  var(--brand-charcoal);       /* headings */
	--text-body:    var(--text-main);
	--text-muted:   var(--brand-charcoal-soft);  /* secondary text and dark surfaces */
	--text-subtle:  #5f6368;
	--text-inverse: var(--white);                /* text on dark backgrounds */

	/* Backgrounds */
	--bg-base:     var(--white);       /* page background */
	--bg-surface:  var(--white);       /* cards, modals */
	--bg-muted:    #f5f6f7;            /* subtle section bg */
	--bg-soft:     #f5f6f7;
	--bg-tint:     #f5f6f7;
	--bg-warm:     #fbf7f1;            /* warmer editorial service sections */
	--bg-warm-strong: #f1e8dc;         /* warm panels and inset surfaces */
	--bg-dark:     var(--brand-charcoal);  /* footer, dark sections */

	/* Borders */
	--border-color:        var(--brand-silver);
	--border-color-strong: var(--brand-silver-dark);
	--border-color-muted:  var(--brand-silver-light);

	/* Semantic / state */
	--color-success: #6fd36f;
	--color-error:   var(--brand-red);
	--color-warning: var(--brand-charcoal-soft);
	--color-info:    #4285f4;

	/* External brand colors (used on social icons) */
	--brand-google:   #4285f4;
	--brand-google-green: #34a853;
	--brand-google-yellow: #fbbc05;
	--brand-google-star: #ffbb29;
	--brand-google-red: #ea4335;
	--brand-facebook: #1877f2;
	--brand-instagram: radial-gradient(circle at 30% 105%, #fdf497 0 8%, #fd5949 43%, #d6249f 63%, #285aeb 100%);
	--brand-review-1: #d987d7;
	--brand-review-2: #8d29a7;
	--brand-review-border: #dba3df;
	--color-rating-star: var(--brand-google-star);
	--gradient-stars: linear-gradient(90deg, var(--brand-red) 0%, var(--brand-silver) 100%);

	/* ============================================================
	   2. TYPOGRAPHY
	   ============================================================ */

	--font-sans:    var(--wp--preset--font-family--sans);
	--font-serif:   var(--wp--preset--font-family--display);
	--font-display: var(--font-serif);
	--font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* Modular scale (base 16px, ratio ~1.2) */
	--text-xs:   0.75rem;    /* 12px */
	--text-sm:   0.875rem;   /* 14px */
	--text-base: 1rem;       /* 16px */
	--text-md:   1.0625rem;  /* 17px — body */
	--text-lg:   1.125rem;   /* 18px */
	--text-xl:   1.25rem;    /* 20px */
	--text-2xl:  1.5rem;     /* 24px */
	--text-3xl:  1.875rem;   /* 30px */
	--text-4xl:  2.25rem;    /* 36px — section headings */
	--text-5xl:  3rem;       /* 48px — hero headings */

	--font-weight-light:    300;
	--font-weight-regular:  400;
	--font-weight-medium:   500;
	--font-weight-semibold: 600;
	--font-weight-bold:     700;
	--font-weight-extrabold: 800;
	--font-weight-black:     900;

	--letter-spacing-brand-wide: 0.08em;
	--letter-spacing-eyebrow:    0.12em;

	--line-height-tight:   1.15;  /* headings */
	--line-height-snug:    1.3;
	--line-height-normal:  1.5;
	--line-height-relaxed: 1.6;   /* body */

	/* ============================================================
	   3. SPACING (4px scale)
	   ============================================================ */

	--space-3xs: 0.25rem;  /* 4px */
	--space-2xs: 0.5rem;   /* 8px */
	--space-xs:  0.75rem;  /* 12px */
	--space-sm:  1rem;     /* 16px */
	--space-md:  1.5rem;   /* 24px */
	--space-lg:  2rem;     /* 32px */
	--space-xl:  3rem;     /* 48px */
	--space-2xl: 4rem;     /* 64px */
	--space-3xl: 6rem;     /* 96px */

	/* ============================================================
	   4. BORDERS & GEOMETRY
	   ============================================================ */

	--radius-sm:   4px;
	--radius-md:   8px;
	--radius-lg:   14px;   /* matches legacy --jmu-radius */
	--radius-xl:   20px;
	--radius-full: 9999px;

	--border-width:    1px;
	--border-width-md: 2px;
	--border-width-lg: 4px;

	/* ============================================================
	   5. SHADOWS & ELEVATION
	   ============================================================ */

	--shadow-sm: 0 1px 2px color-mix(in srgb, var(--black) 6%, transparent);
	--shadow-md: 0 6px 24px color-mix(in srgb, var(--black) 10%, transparent);
	--shadow-lg: 0 18px 60px color-mix(in srgb, var(--black) 22%, transparent);
	--shadow-xl: 0 30px 80px color-mix(in srgb, var(--black) 28%, transparent);

	/* Z-index scale */
	--z-base:     1;
	--z-dropdown: 10;
	--z-sticky:   100;
	--z-fixed:    200;
	--z-overlay:  500;
	--z-modal:    1000;
	--z-toast:    1100;

	/* ============================================================
	   6. BREAKPOINTS (for reference; @media uses literal values)
	   ============================================================ */

	--breakpoint-sm: 640px;
	--breakpoint-md: 768px;
	--breakpoint-lg: 1024px;
	--breakpoint-xl: 1280px;

	/* ============================================================
	   7. TRANSITIONS & MOTION
	   ============================================================ */

	--duration-fast:   150ms;
	--duration-normal: 250ms;
	--duration-slow:   400ms;

	--ease-default: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-in:      cubic-bezier(0.4, 0, 1, 1);
	--ease-out:     cubic-bezier(0, 0, 0.2, 1);
	--ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);

	/* ============================================================
	   LEGACY ALIASES — keep existing rules working.
	   Prefer the canonical names above in new code.
	   ============================================================ */
	--jmu-red:        var(--color-primary);
	--jmu-red-deep:   var(--color-primary-hover);
	--jmu-red-darker: var(--color-primary-deep);
	--jmu-ink:        var(--text-main);
	--jmu-radius:     var(--radius-lg);
	--jmu-radius-sm:  10px;
	--jmu-shadow:     var(--shadow-md);
	--jmu-shadow-lg:  var(--shadow-lg);
	--jmu-transition: 180ms ease;
}