/**
 * Centi Theme — assets/css/tokens.css
 *
 * Design tokens: tất cả CSS custom properties.
 * KHÔNG viết CSS selector ở đây — chỉ khai báo biến.
 *
 * @package CentiTheme
 */

:root {

	/* -----------------------------------------------------------------------
	 * Màu sắc chính
	 * --------------------------------------------------------------------- */
	--color-primary:        #2563eb;   /* brand blue */
	--color-primary-dark:   #1d4ed8;   /* hover */
	--color-primary-light:  #dbeafe;   /* tint background */
	--color-accent:         #f59e0b;   /* highlight, CTA */
	--color-accent-dark:    #d97706;

	/* Text */
	--color-text:           #1e293b;   /* body text */
	--color-text-muted:     #64748b;   /* meta, secondary */
	--color-text-inverse:   #f8fafc;   /* text trên nền tối */

	/* Border & background */
	--color-border:         #e2e8f0;
	--color-bg:             #ffffff;
	--color-bg-secondary:   #f8fafc;   /* card, sidebar */
	--color-bg-dark:        #0f172a;   /* footer dark */

	/* Content type */
	--color-news:           #2563eb;
	--color-tutorial:       #16a34a;
	--color-level-basic:    #16a34a;
	--color-level-mid:      #d97706;
	--color-level-advanced: #dc2626;

	/* -----------------------------------------------------------------------
	 * Typography
	 * --------------------------------------------------------------------- */
	--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
	             'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
	             'Apple Color Emoji', 'Segoe UI Emoji';
	--font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco,
	             Consolas, 'Liberation Mono', 'Courier New', monospace;

	--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 */

	--line-height-tight:  1.25;
	--line-height-heading: 1.3;
	--line-height-body:    1.75;

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

	/* -----------------------------------------------------------------------
	 * Spacing scale (4px base)
	 * --------------------------------------------------------------------- */
	--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 */

	/* -----------------------------------------------------------------------
	 * Layout
	 * --------------------------------------------------------------------- */
	--container-max:   1200px;
	--content-max:     780px;
	--sidebar-width:   280px;
	--header-height:   64px;

	/* -----------------------------------------------------------------------
	 * Shadows
	 * --------------------------------------------------------------------- */
	--shadow-xs:   0 1px 2px 0 rgb(0 0 0 / 0.05);
	--shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
	--shadow-hover: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	--shadow-lg:   0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

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

	/* -----------------------------------------------------------------------
	 * Transitions
	 * --------------------------------------------------------------------- */
	--transition-fast: 150ms ease;
	--transition-base: 250ms ease;
	--transition-slow: 350ms ease;

	/* -----------------------------------------------------------------------
	 * Z-index scale
	 * --------------------------------------------------------------------- */
	--z-below:    -1;
	--z-base:      0;
	--z-raised:   10;
	--z-dropdown: 100;
	--z-sticky:   200;
	--z-overlay:  300;
	--z-modal:    400;

	/* -----------------------------------------------------------------------
	 * Header / Footer — ghi đè bởi color scheme (customizer.php)
	 * --------------------------------------------------------------------- */
	--header-bg:      var(--color-bg);
	--header-text:    var(--color-text);
	--header-border:  var(--color-border);
	--footer-bg:      var(--color-bg-dark);
	--footer-text:    var(--color-text-inverse);
	--topbar-bg:      var(--color-bg-secondary);
	--topbar-text:    var(--color-text-muted);
	--topbar-border:  var(--color-border);
}

/* =========================================================================
 * Dark mode — ghi đè color tokens
 * Dùng CSS custom properties nên toàn bộ components tự thích nghi.
 * Các màu hardcode cần override riêng bên dưới.
 * ======================================================================== */

@media (prefers-color-scheme: dark) {

	:root {

		/* Backgrounds */
		--color-bg:           #0f172a;
		--color-bg-secondary: #1e293b;
		--color-bg-dark:      #020617;

		/* Text */
		--color-text:         #f1f5f9;
		--color-text-muted:   #94a3b8;
		--color-text-inverse: #0f172a;

		/* Border */
		--color-border:       #334155;

		/* Primary blue — sáng hơn để đủ contrast trên nền tối */
		--color-primary:       #60a5fa;
		--color-primary-dark:  #3b82f6;
		--color-primary-light: #1e3a8a;

		/* Accent */
		--color-accent:      #fbbf24;
		--color-accent-dark: #f59e0b;

		/* Content types */
		--color-news:           #60a5fa;
		--color-tutorial:       #4ade80;
		--color-level-basic:    #4ade80;
		--color-level-mid:      #fbbf24;
		--color-level-advanced: #f87171;

		/* Shadows — đậm hơn vì nền tối */
		--shadow-xs:   0 1px 2px 0 rgb(0 0 0 / 0.4);
		--shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.5), 0 1px 2px -1px rgb(0 0 0 / 0.5);
		--shadow-hover: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.5);
		--shadow-lg:   0 10px 15px -3px rgb(0 0 0 / 0.6), 0 4px 6px -4px rgb(0 0 0 / 0.5);
	}

	/* -----------------------------------------------------------------------
	 * Overrides cho màu hardcode trong badge, TOC, badge levels
	 * --------------------------------------------------------------------- */

	/* Badge — tutorial */
	.badge--tutorial {
		background-color: #14532d;
		color: #86efac;
	}

	/* Badge — level */
	.badge--basic     { background-color: #14532d; color: #86efac; }
	.badge--mid       { background-color: #78350f; color: #fcd34d; }
	.badge--advanced  { background-color: #7f1d1d; color: #fca5a5; }

	/* Badge — news */
	.badge--news { background-color: var(--color-primary-light); color: var(--color-primary); }

	/* Level badges */
	.level-badge--basic    { background-color: #14532d; color: #86efac; }
	.level-badge--mid      { background-color: #78350f; color: #fcd34d; }
	.level-badge--advanced { background-color: #7f1d1d; color: #fca5a5; }

	/* TOC active item */
	.toc-list__link.is-active {
		color: var(--color-tutorial);
		background-color: #14532d;
	}

	/* Search result type badges */
	.search-results__type--tutorial {
		background-color: #14532d;
		color: #86efac;
	}

	.search-results__type--news {
		background-color: var(--color-primary-light);
		color: var(--color-primary);
	}

	/* code inline */
	code {
		background-color: #1e293b;
		border-color: #334155;
		color: #f472b6;
	}
}