/**
 * Wosol Theme - Design System (CSS Custom Properties)
 *
 * All design tokens for the Wosol theme. Every visual element in the
 * theme derives from these variables — no hardcoded colors, sizes, or
 * spacing values anywhere else.
 *
 * Palette: Wosol Figma spec (source: node 17426:124251, file 37W5fldy7pHGVVHXSm5b4T).
 *
 * Type scale is a modular 1.25 (major third) scale from 12px → 60px.
 * Spacing scale is a 4px base (4, 8, 16, 24, 32, 48, 64, 96, 128).
 */

:root {
  /* ------- Wosol Figma palette (source: node 17426:124251) ------- */
  --wosol-cream: #faf9f7;
  --wosol-cream-tint: #efebe7;
  --wosol-ink: #101a28;
  --wosol-navy: #142b46;
  --wosol-navy-2: #12263e;
  --wosol-gold: #b8965a;
  --wosol-gold-2: #c8a96a;
  --wosol-muted: #8a9099;
  --wosol-border-hairline: #d9dde2;
  --wosol-image-border: #e5e7eb;

  /* Legacy aliases so unmigrated CSS keeps compiling; remove once
     all references have been swapped. */
  --color-primary: var(--wosol-navy);
  --color-primary-dark: var(--wosol-ink);
  --color-secondary: var(--wosol-cream-tint);
  --color-accent: var(--wosol-gold);
  --color-text: var(--wosol-ink);
  --color-text-light: var(--wosol-muted);
  --color-text-inverse: #ffffff;
  --color-surface: var(--wosol-cream);
  --color-surface-alt: var(--wosol-cream-tint);

  /* Shape */
  --wosol-radius-pill: 29px;
  --wosol-radius-image: 12px;

	/* =============================================
	   COLORS - Semantic (feedback states)
	   ============================================= */

	--color-white:            #FFFFFF;
	--color-black:            #000000;

	--color-background:       #FFFFFF;

	--color-text-muted:       var(--wosol-muted);

	--color-border:           var(--wosol-border-hairline);
	--color-border-light:     #F0F3F5;
	--color-border-dark:      #C4D0D9;

	--color-success:          #28A745;
	--color-success-bg:       #D4EDDA;
	--color-error:            #DC3545;
	--color-error-bg:         #F8D7DA;
	--color-warning:          #FFC107;
	--color-warning-bg:       #FFF3CD;
	--color-info:             #17A2B8;
	--color-info-bg:          #D1ECF1;

	/* =============================================
	   COLORS - Overlays
	   ============================================= */

	--color-overlay-dark:     rgba(20, 43, 70, 0.6);
	--color-overlay-light:    rgba(255, 255, 255, 0.85);
	--color-overlay-black:    rgba(0, 0, 0, 0.5);

	/* =============================================
	   TYPOGRAPHY - Font Families
	   ============================================= */

	--font-primary:   'Poppins', system-ui, -apple-system, Segoe UI, sans-serif;
	--font-secondary: 'Cormorant Garamond', Georgia, serif;
	--font-mono:      'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

	/* =============================================
	   TYPOGRAPHY - Weights
	   ============================================= */

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

	/* =============================================
	   TYPOGRAPHY - Sizes (modular scale, base 16px)
	   ============================================= */

	--font-size-xs:      12px;   /* captions, meta */
	--font-size-sm:      14px;   /* small text, labels */
	--font-size-base:    16px;   /* body */
	--font-size-md:      18px;   /* lead paragraph */
	--font-size-lg:      20px;   /* H5 */
	--font-size-xl:      24px;   /* H4 */
	--font-size-2xl:     32px;   /* H3 */
	--font-size-3xl:     40px;   /* H2 */
	--font-size-4xl:     48px;   /* H1 */
	--font-size-5xl:     60px;   /* hero display */

	/* =============================================
	   TYPOGRAPHY - Line Heights
	   ============================================= */

	--line-height-tight:      1.2;
	--line-height-snug:       1.35;
	--line-height-normal:     1.5;
	--line-height-relaxed:    1.65;
	--line-height-loose:      1.85;

	/* =============================================
	   TYPOGRAPHY - Letter Spacing
	   ============================================= */

	--letter-spacing-tighter: -0.02em;
	--letter-spacing-tight:   -0.01em;
	--letter-spacing-normal:  0;
	--letter-spacing-wide:    0.02em;
	--letter-spacing-wider:   0.05em;
	--letter-spacing-widest:  0.1em;

	/* =============================================
	   SPACING - 4px base scale
	   ============================================= */

	--spacing-0:    0;
	--spacing-xs:   4px;
	--spacing-sm:   8px;
	--spacing-md:   16px;
	--spacing-lg:   24px;
	--spacing-xl:   32px;
	--spacing-2xl:  48px;
	--spacing-3xl:  64px;
	--spacing-4xl:  96px;
	--spacing-5xl:  128px;

	/* =============================================
	   BORDER RADIUS
	   ============================================= */

	--radius-none:  0;
	--radius-sm:    4px;
	--radius-md:    8px;
	--radius-lg:    12px;
	--radius-xl:    16px;
	--radius-2xl:   24px;
	--radius-full:  9999px;

	/* =============================================
	   BORDER WIDTH
	   ============================================= */

	--border-width-thin:   1px;
	--border-width-base:   2px;
	--border-width-thick:  4px;

	/* =============================================
	   SHADOWS (elevation)
	   ============================================= */

	--shadow-none:  none;
	--shadow-xs:    0 1px 2px rgba(15, 37, 55, 0.04);
	--shadow-sm:    0 1px 3px rgba(15, 37, 55, 0.06), 0 1px 2px rgba(15, 37, 55, 0.04);
	--shadow-md:    0 4px 6px rgba(15, 37, 55, 0.07), 0 2px 4px rgba(15, 37, 55, 0.05);
	--shadow-lg:    0 10px 15px rgba(15, 37, 55, 0.08), 0 4px 6px rgba(15, 37, 55, 0.05);
	--shadow-xl:    0 20px 25px rgba(15, 37, 55, 0.10), 0 10px 10px rgba(15, 37, 55, 0.04);
	--shadow-2xl:   0 25px 50px rgba(15, 37, 55, 0.20);
	--shadow-inner: inset 0 2px 4px rgba(15, 37, 55, 0.06);

	/* =============================================
	   TRANSITIONS / MOTION
	   ============================================= */

	--transition-fastest: 100ms ease-in-out;
	--transition-fast:    150ms ease-in-out;
	--transition-normal:  300ms ease-in-out;
	--transition-slow:    500ms ease-in-out;
	--transition-slower:  700ms ease-in-out;

	--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);

	/* =============================================
	   LAYOUT - Container & Grid
	   ============================================= */

	--container-width:      1200px;
	--container-width-wide: 1440px;
	--container-padding:    var(--spacing-lg);
	--section-padding-y:    var(--spacing-4xl);

	/* =============================================
	   BREAKPOINTS (reference values — actual @media queries use px)
	   ============================================= */

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

	/* =============================================
	   Z-INDEX SCALE
	   ============================================= */

	--z-below:      -1;
	--z-base:       0;
	--z-dropdown:   1000;
	--z-sticky:     1020;
	--z-fixed:      1030;
	--z-overlay:    1040;
	--z-modal:      1050;
	--z-popover:    1060;
	--z-tooltip:    1070;
	--z-toast:      1080;
}

/* Responsive tweaks to design tokens.
   Reduce container padding and section padding on smaller viewports. */

@media (max-width: 1023px) {
	:root {
		--section-padding-y: var(--spacing-3xl);
	}
}

@media (max-width: 767px) {
	:root {
		--container-padding: var(--spacing-md);
		--section-padding-y: var(--spacing-2xl);
	}
}