/*
 * Theme T&B — Design Tokens
 *
 * Single source of truth for all visual properties.
 * Implements 04B-Design-Tokens.md specification.
 *
 * All components must reference these variables.
 * Never hardcode colors, spacing, or typography values.
 *
 * @package ThemeTB
 * @version 2.0.0
 */

:root {

	/* =========================================================
	   Brand Colors
	   ========================================================= */

	--tb-color-primary:        #2563EB;
	--tb-color-primary-light:  #3B82F6;
	--tb-color-primary-dark:   #1D4ED8;
	--tb-color-primary-50:     #EFF6FF;
	--tb-color-primary-100:    #DBEAFE;

	--tb-color-secondary:      #06B6D4;
	--tb-color-secondary-light:#22D3EE;
	--tb-color-secondary-dark: #0891B2;

	--tb-color-accent:         #7C3AED;
	--tb-color-accent-light:   #8B5CF6;
	--tb-color-accent-dark:    #6D28D9;

	--tb-color-success:        #10B981;
	--tb-color-success-light:  #34D399;
	--tb-color-success-bg:     #ECFDF5;

	--tb-color-warning:        #F59E0B;
	--tb-color-warning-light:  #FCD34D;
	--tb-color-warning-bg:     #FFFBEB;

	--tb-color-danger:         #EF4444;
	--tb-color-danger-light:   #F87171;
	--tb-color-danger-bg:      #FEF2F2;

	--tb-color-info:           #0EA5E9;
	--tb-color-info-bg:        #F0F9FF;

	/* =========================================================
	   Semantic Colors — Light Mode
	   ========================================================= */

	--tb-bg:                   #FFFFFF;
	--tb-bg-secondary:         #F8FAFC;
	--tb-bg-tertiary:          #F1F5F9;
	--tb-surface:              #FFFFFF;
	--tb-surface-raised:       #FFFFFF;
	--tb-card-bg:              #FFFFFF;
	--tb-card-border:          #E2E8F0;

	--tb-border:               #E2E8F0;
	--tb-border-light:         #F1F5F9;
	--tb-border-dark:          #CBD5E1;

	--tb-text-primary:         #0F172A;
	--tb-text-secondary:       #475569;
	--tb-text-muted:           #94A3B8;
	--tb-text-inverse:         #FFFFFF;

	--tb-link:                 #2563EB;
	--tb-link-hover:           #1D4ED8;
	--tb-link-visited:         #7C3AED;

	--tb-focus-ring:           #2563EB;
	--tb-focus-ring-offset:    2px;

	--tb-disabled-bg:          #F1F5F9;
	--tb-disabled-text:        #94A3B8;
	--tb-disabled-border:      #E2E8F0;

	/* =========================================================
	   Typography
	   ========================================================= */

	--tb-font-sans:            'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
	--tb-font-heading:         'Poppins', 'Inter', system-ui, sans-serif;
	--tb-font-mono:            'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

	--tb-text-xs:              0.75rem;    /* 12px */
	--tb-text-sm:              0.875rem;   /* 14px */
	--tb-text-base:            1rem;       /* 16px */
	--tb-text-lg:              1.125rem;   /* 18px */
	--tb-text-xl:              1.25rem;    /* 20px */
	--tb-text-2xl:             1.5rem;     /* 24px */
	--tb-text-3xl:             1.875rem;   /* 30px */
	--tb-text-4xl:             2.25rem;    /* 36px */
	--tb-text-5xl:             3rem;       /* 48px */
	--tb-text-6xl:             3.75rem;    /* 60px */

	--tb-leading-tight:        1.25;
	--tb-leading-snug:         1.375;
	--tb-leading-normal:       1.5;
	--tb-leading-relaxed:      1.625;
	--tb-leading-loose:        2;

	--tb-font-light:           300;
	--tb-font-normal:          400;
	--tb-font-medium:          500;
	--tb-font-semibold:        600;
	--tb-font-bold:            700;
	--tb-font-extrabold:       800;

	/* =========================================================
	   Spacing Scale
	   ========================================================= */

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

	/* =========================================================
	   Border Radius
	   ========================================================= */

	--tb-radius-sm:            0.25rem;    /* 4px */
	--tb-radius-md:            0.5rem;     /* 8px */
	--tb-radius-lg:            0.75rem;    /* 12px */
	--tb-radius-xl:            1rem;       /* 16px */
	--tb-radius-2xl:           1.5rem;     /* 24px */
	--tb-radius-full:          9999px;

	/* =========================================================
	   Shadows
	   ========================================================= */

	--tb-shadow-xs:            0 1px 2px 0 rgb(0 0 0 / 0.05);
	--tb-shadow-sm:            0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
	--tb-shadow-md:            0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	--tb-shadow-lg:            0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	--tb-shadow-xl:            0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
	--tb-shadow-float:         0 25px 50px -12px rgb(0 0 0 / 0.25);
	--tb-shadow-inner:         inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
	--tb-shadow-primary:       0 4px 14px 0 rgb(37 99 235 / 0.3);

	/* =========================================================
	   Motion Tokens
	   ========================================================= */

	--tb-duration-fast:        150ms;
	--tb-duration-normal:      250ms;
	--tb-duration-slow:        400ms;
	--tb-ease-default:         cubic-bezier(0.4, 0, 0.2, 1);
	--tb-ease-in:              cubic-bezier(0.4, 0, 1, 1);
	--tb-ease-out:             cubic-bezier(0, 0, 0.2, 1);
	--tb-ease-bounce:          cubic-bezier(0.34, 1.56, 0.64, 1);

	/* =========================================================
	   Layout
	   ========================================================= */

	--tb-container-max:        1280px;
	--tb-container-padding:    var(--tb-space-6);
	--tb-content-max:          800px;
	--tb-sidebar-width:        320px;
	--tb-header-height:        72px;
	--tb-grid-gap:             var(--tb-space-6);

	/* =========================================================
	   Z-Index Scale
	   ========================================================= */

	--tb-z-base:               0;
	--tb-z-raised:             10;
	--tb-z-dropdown:           100;
	--tb-z-sticky:             200;
	--tb-z-overlay:            300;
	--tb-z-modal:              400;
	--tb-z-toast:              500;
	--tb-z-tooltip:            600;
}

/* =========================================================
   Dark Mode Tokens
   ========================================================= */

@media (prefers-color-scheme: dark) {
	:root {
		--tb-bg:               #0F172A;
		--tb-bg-secondary:     #1E293B;
		--tb-bg-tertiary:      #334155;
		--tb-surface:          #1E293B;
		--tb-surface-raised:   #334155;
		--tb-card-bg:          #1E293B;
		--tb-card-border:      #334155;

		--tb-border:           #334155;
		--tb-border-light:     #1E293B;
		--tb-border-dark:      #475569;

		--tb-text-primary:     #F8FAFC;
		--tb-text-secondary:   #CBD5E1;
		--tb-text-muted:       #64748B;

		--tb-link:             #60A5FA;
		--tb-link-hover:       #93C5FD;
	}
}

/* =========================================================
   Reduced Motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	:root {
		--tb-duration-fast:    0ms;
		--tb-duration-normal:  0ms;
		--tb-duration-slow:    0ms;
	}
}