/* ============================================================
   DAEDALUS — Design Tokens
   Light mode defaults; dark mode via prefers-color-scheme
   ============================================================ */

:root {
	/* Brand colours */
	--color-primary:       #0066CC;
	--color-primary-hover: #0052A3;
	--color-primary-light: #E8F0FE;
	--color-green:         #00A86B;
	--color-green-hover:   #008F5A;
	--color-green-light:   #E6F9F2;
	--color-danger:        #DC2626;
	--color-warning:       #D97706;

	/* Backgrounds */
	--color-bg:         #FFFFFF;
	--color-surface:    #F5F7FA;
	--color-surface-2:  #EDF0F5;
	--color-surface-3:  #E2E8F0;

	/* Text */
	--color-text:           #1A1A1A;
	--color-text-secondary: #4A5568;
	--color-text-muted:     #718096;
	--color-text-inverse:   #FFFFFF;

	/* Borders */
	--color-border:       #E2E8F0;
	--color-border-focus: #0066CC;

	/* Rating */
	--color-rating:      #F59E0B;
	--color-rating-bg:   #FFFBEB;

	/* Badge colours */
	--color-badge-new:       #EFF6FF;
	--color-badge-new-text:  #1D4ED8;
	--color-badge-hot:       #FEF2F2;
	--color-badge-hot-text:  #B91C1C;
	--color-badge-safe:      #ECFDF5;
	--color-badge-safe-text: #065F46;

	/* Typography */
	--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	               "Helvetica Neue", Arial, sans-serif;
	--font-size-xs:   0.75rem;   /* 12px */
	--font-size-sm:   0.875rem;  /* 14px */
	--font-size-base: 1rem;      /* 16px */
	--font-size-lg:   1.125rem;  /* 18px */
	--font-size-xl:   1.25rem;   /* 20px */
	--font-size-2xl:  1.5rem;    /* 24px */
	--font-size-3xl:  1.875rem;  /* 30px */
	--font-size-4xl:  2.25rem;   /* 36px */
	--font-size-5xl:  3rem;      /* 48px */

	--font-weight-normal:    400;
	--font-weight-medium:    500;
	--font-weight-semibold:  600;
	--font-weight-bold:      700;

	--line-height-tight:  1.25;
	--line-height-snug:   1.375;
	--line-height-normal: 1.6;
	--line-height-loose:  1.75;

	/* Spacing (8px base unit) */
	--space-1:  0.25rem;  /* 4px  */
	--space-2:  0.5rem;   /* 8px  */
	--space-3:  0.75rem;  /* 12px */
	--space-4:  1rem;     /* 16px */
	--space-5:  1.25rem;  /* 20px */
	--space-6:  1.5rem;   /* 24px */
	--space-8:  2rem;     /* 32px */
	--space-10: 2.5rem;   /* 40px */
	--space-12: 3rem;     /* 48px */
	--space-16: 4rem;     /* 64px */
	--space-20: 5rem;     /* 80px */
	--space-24: 6rem;     /* 96px */

	/* Border radius */
	--radius-sm:   4px;
	--radius-md:   8px;
	--radius-lg:   12px;
	--radius-xl:   16px;
	--radius-full: 9999px;

	/* Shadows */
	--shadow-sm:  0 1px 2px 0 rgba(0,0,0,.05);
	--shadow-md:  0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
	--shadow-lg:  0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
	--shadow-xl:  0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);

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

	/* Layout */
	--container-max:     1200px;
	--container-padding: var(--space-5);

	/* Header height (used for scroll offset) */
	--header-height: 64px;
}

/* ── Dark mode ────────────────────────────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
	:root {
		--color-primary:       #3B82F6;
		--color-primary-hover: #2563EB;
		--color-primary-light: #1E3A5F;
		--color-green:         #10B981;
		--color-green-hover:   #059669;
		--color-green-light:   #064E3B;

		--color-bg:         #0F172A;
		--color-surface:    #1E293B;
		--color-surface-2:  #263344;
		--color-surface-3:  #334155;

		--color-text:           #F1F5F9;
		--color-text-secondary: #CBD5E1;
		--color-text-muted:     #94A3B8;
		--color-text-inverse:   #0F172A;

		--color-border:       #334155;
		--color-border-focus: #3B82F6;

		--color-rating:    #FBBF24;
		--color-rating-bg: #1C1200;

		--color-badge-new:       #1E3A5F;
		--color-badge-new-text:  #93C5FD;
		--color-badge-hot:       #4C1515;
		--color-badge-hot-text:  #FCA5A5;
		--color-badge-safe:      #064E3B;
		--color-badge-safe-text: #6EE7B7;

		--shadow-sm: 0 1px 2px 0 rgba(0,0,0,.3);
		--shadow-md: 0 4px 6px -1px rgba(0,0,0,.4), 0 2px 4px -2px rgba(0,0,0,.4);
		--shadow-lg: 0 10px 15px -3px rgba(0,0,0,.4), 0 4px 6px -4px rgba(0,0,0,.4);
	}
}

/* ============================================================
   FORCE DARK THEME GLOBALLY
   Must stay at the bottom of variables.css
   ============================================================ */

:root {
	color-scheme: dark;

	/* Brand colours */
	--color-primary:       #3B82F6;
	--color-primary-hover: #2563EB;
	--color-primary-light: #1E3A5F;
	--color-green:         #10B981;
	--color-green-hover:   #059669;
	--color-green-light:   #064E3B;

	/* Backgrounds */
	--color-bg:         #0F172A;
	--color-surface:    #1E293B;
	--color-surface-2:  #263344;
	--color-surface-3:  #334155;

	/* Text */
	--color-text:           #F1F5F9;
	--color-text-secondary: #CBD5E1;
	--color-text-muted:     #94A3B8;
	--color-text-inverse:   #0F172A;

	/* Borders */
	--color-border:       #334155;
	--color-border-focus: #3B82F6;

	/* Rating */
	--color-rating:    #FBBF24;
	--color-rating-bg: #1C1200;

	/* Badge colours */
	--color-badge-new:       #1E3A5F;
	--color-badge-new-text:  #93C5FD;
	--color-badge-hot:       #4C1515;
	--color-badge-hot-text:  #FCA5A5;
	--color-badge-safe:      #064E3B;
	--color-badge-safe-text: #6EE7B7;

	/* Shadows */
	--shadow-sm: 0 1px 2px 0 rgba(0,0,0,.3);
	--shadow-md: 0 4px 6px -1px rgba(0,0,0,.4), 0 2px 4px -2px rgba(0,0,0,.4);
	--shadow-lg: 0 10px 15px -3px rgba(0,0,0,.4), 0 4px 6px -4px rgba(0,0,0,.4);
}