/**
 * InviteStudio Design Tokens
 * 
 * 2-Layer Token System:
 * 1. Primitives: Raw color palette definitions.
 * 2. Semantics: Purpose-driven tokens mapped to primitives.
 */

:root {
	/* ═══════════════════════════════════════════════════════════
	   LAYER 1: PRIMITIVES
	   ═══════════════════════════════════════════════════════════ */

	/* Base */
	--is-color-white: #ffffff;
	--is-color-black: #000000;

	/* Indigo (Brand Palette) */
	--is-color-indigo-50:  #eef2ff;
	--is-color-indigo-100: #e0e7ff;
	--is-color-indigo-200: #c7d2fe;
	--is-color-indigo-300: #a5b4fc;
	--is-color-indigo-400: #818cf8;
	--is-color-indigo-500: var(--is-color-primary);
	--is-color-indigo-600: #4f46e5;
	--is-color-indigo-700: #4338ca;
	--is-color-indigo-800: #3730a3;
	--is-color-indigo-900: #312e81;
	--is-color-indigo-950: #1e1b4b;

	/* Slate (Neutral & Surface Palette) */
	--is-color-slate-50:  #f8fafc;
	--is-color-slate-100: #f1f5f9;
	--is-color-slate-200: #e2e8f0;
	--is-color-slate-300: #cbd5e1;
	--is-color-slate-400: #94a3b8;
	--is-color-slate-500: #64748b;
	--is-color-slate-600: #475569;
	--is-color-slate-700: #334155;
	--is-color-slate-800: #1e293b;
	--is-color-slate-900: #0f172a;

	/* Emerald (Success Palette) */
	--is-color-emerald-50:  #ecfdf5;
	--is-color-emerald-100: #d1fae5;
	--is-color-emerald-200: #a7f3d0;
	--is-color-emerald-300: #6ee7b7;
	--is-color-emerald-400: #34d399;
	--is-color-emerald-500: #10b981;
	--is-color-emerald-600: #059669;
	--is-color-emerald-700: #047857;
	--is-color-emerald-800: #065f46;
	--is-color-emerald-900: #064e3b;

	/* Green Palette (Vibrant nature & cards) */
	--is-color-green-400: #4ade80;
	--is-color-green-500: #22c55e;
	--is-color-green-600: #16a34a;
	--is-color-green-700: #15803d;
	--is-color-green-800: #166534;
	--is-color-green-900: #14532d;
	--is-color-green-950: #052e16;

	/* Amber (Warning Palette) */
	--is-color-amber-50:  #fffbeb;
	--is-color-amber-100: #fef3c7;
	--is-color-amber-200: #fde68a;
	--is-color-amber-500: #f59e0b;
	--is-color-amber-600: #d97706;
	--is-color-amber-700: #b45309;
	--is-color-amber-800: #92400e;
	--is-color-amber-900: #78350f;

	/* Rose / Red (Danger Palette) */
	--is-color-rose-50:  #fff1f2;
	--is-color-rose-100: #fee2e2;
	--is-color-rose-200: #fecaca;
	--is-color-rose-300: #fca5a5;
	--is-color-rose-500: #ef4444;
	--is-color-rose-600: #dc2626;
	--is-color-rose-700: #b91c1c;
	--is-color-rose-800: #991b1b;

	/* Blue (Interactive / Accent Palette) */
	--is-color-blue-50:  #eff6ff;
	--is-color-blue-100: #dbeafe;
	--is-color-blue-500: #3b82f6;
	--is-color-blue-600: #2563eb;
	--is-color-blue-700: #1d4ed8;

	/* Social / Platform Brands */
	--is-color-whatsapp:       #25d366;
	--is-color-whatsapp-hover: #1ebc59;

	/* ═══════════════════════════════════════════════════════════
	   LAYER 2: SEMANTIC TOKENS
	   ═══════════════════════════════════════════════════════════ */

	/* Brand & Interactive (Inherits website / theme / Elementor primary color dynamically) */
	--is-color-primary:        var(--e-global-color-primary, var(--e-global-color-accent, var(--wp--preset--color--primary, var(--ast-global-color-0, var(--global-palette1, var(--primary-color, var(--theme-primary, var(--primary, #059669))))))));
	--is-color-primary-hover:  color-mix(in srgb, var(--is-color-primary) 85%, black);
	--is-color-primary-active: color-mix(in srgb, var(--is-color-primary) 70%, black);
	--is-color-primary-subtle: color-mix(in srgb, var(--is-color-primary) 12%, white);
	--is-color-primary-muted:  color-mix(in srgb, var(--is-color-primary) 25%, white);

	/* Backgrounds & Surfaces */
	--is-bg-surface:           var(--is-color-white);
	--is-bg-subtle:            var(--is-color-slate-50);
	--is-bg-muted:             var(--is-color-slate-100);
	--is-bg-elevated:          var(--is-color-white);

	/* Borders */
	--is-border-subtle:        var(--is-color-slate-100);
	--is-border-default:       var(--is-color-slate-200);
	--is-border-hover:         var(--is-color-slate-300);
	--is-border-focus:         var(--is-color-primary);

	/* Text */
	--is-text-primary:         var(--is-color-slate-900);
	--is-text-secondary:       var(--is-color-slate-500);
	--is-text-muted:           var(--is-color-slate-400);
	--is-text-inverse:         var(--is-color-white);

	/* Status / Feedback */
	--is-color-success:        var(--is-color-emerald-500);
	--is-color-success-subtle: var(--is-color-emerald-50);
	--is-color-warning:        var(--is-color-amber-500);
	--is-color-warning-subtle: var(--is-color-amber-50);
	--is-color-danger:         var(--is-color-rose-500);
	--is-color-danger-subtle:  var(--is-color-rose-50);

	/* Attendance / RSVP Badges */
	--is-status-present-bg:     var(--is-color-emerald-100);
	--is-status-present-text:   var(--is-color-emerald-800);
	--is-status-absent-bg:      var(--is-color-rose-100);
	--is-status-absent-text:    var(--is-color-rose-800);
	--is-status-uncertain-bg:   var(--is-color-amber-100);
	--is-status-uncertain-text: var(--is-color-amber-800);

	/* Form Controls / Switches */
	--is-switch-inactive:      var(--is-color-slate-300);
	--is-switch-active:        var(--is-color-primary);
	--is-switch-knob:          var(--is-color-white);

	/* Shadows */
	--is-shadow-xs:            0 1px 2px rgba(0, 0, 0, 0.03);
	--is-shadow-sm:            0 1px 3px rgba(0, 0, 0, 0.04);
	--is-shadow-md:            0 2px 10px rgba(0, 0, 0, 0.08);

	/* Textures & Gradients */
	--is-vinyl-disc:           radial-gradient(circle, #2b2b2b 0%, #111111 60%, #000000 100%);

	/* Border Radius */
	--is-radius-sm:            8px;
	--is-radius-md:            8px;
	--is-radius-default:       8px;
	--is-radius-full:          9999px;
}