/* ============================================================
   01-tokens.css — Yutorii Brand Tokens
   Sử dụng CSS Custom Properties để override Astra ở mọi tầng.
   Khi đổi brand → chỉ sửa file này.
   ============================================================ */

:root {
	/* --- Colors --- */
	--y-cream:       #FAF7F0;   /* Base background, từ FB avatar */
	--y-cream-warm:  #F2EDE0;   /* Cards, sections phụ */
	--y-sage:        #8FA68E;   /* Primary, từ FB cover */
	--y-sage-deep:   #5C6653;   /* CTA, hover state */
	--y-cedar:       #7A6758;   /* Accent warm, divider, icon */
	--y-terracotta:  #C97B5A;   /* Accent rare — sale tag, logo dot, highlight CTA */
	--y-ink:         #2A2A2A;   /* Body text — gần đen, không pure black */
	--y-ink-soft:    #5A5550;   /* Secondary text */
	--y-line:        #E5DFD3;   /* Border, divider line */

	/* RGB versions cho rgba() usage */
	--y-cream-rgb:     250, 247, 240;
	--y-sage-rgb:      143, 166, 142;
	--y-sage-deep-rgb:  92, 102,  83;
	--y-ink-rgb:        42,  42,  42;

	/* --- Typography --- */
	--y-font-serif:  'Lora', Georgia, 'Times New Roman', serif;
	--y-font-sans:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

	/* Line heights */
	--y-lh-tight:   1.2;
	--y-lh-snug:    1.4;
	--y-lh-normal:  1.65;
	--y-lh-loose:   1.85;

	/* --- Spacing scale --- */
	--y-space-xs:   0.5rem;   /*  8px */
	--y-space-sm:   1rem;     /* 16px */
	--y-space-md:   2rem;     /* 32px */
	--y-space-lg:   4rem;     /* 64px */
	--y-space-xl:   8rem;     /* 128px */

	/* --- Container --- */
	--y-container:        1200px;
	--y-container-narrow:  720px;
	--y-gutter:           1.25rem;

	/* --- Radius — minimal, gần như sharp --- */
	--y-radius-sm: 2px;
	--y-radius-md: 4px;
	--y-radius-lg: 8px;

	/* --- Transition --- */
	--y-ease:     cubic-bezier(0.22, 1, 0.36, 1);
	--y-duration: 0.4s;
	--y-duration-fast: 0.2s;

	/* --- Shadow — quiet, low elevation --- */
	--y-shadow-sm:  0 1px 2px rgba(var(--y-ink-rgb), 0.04);
	--y-shadow-md:  0 6px 16px -6px rgba(var(--y-sage-deep-rgb), 0.12);
	--y-shadow-lg:  0 12px 32px -8px rgba(var(--y-sage-deep-rgb), 0.15);

	/* --- Z-index --- */
	--y-z-header:   100;
	--y-z-drawer:   200;
	--y-z-modal:    300;
}

/* Astra container width override — match brand container */
.ast-container,
.site-content > .ast-container,
.entry-content > * {
	max-width: var(--y-container);
}

/* Astra color palette override — Customizer values cũng bị override bởi tokens */
:root {
	--ast-global-color-0: var(--y-sage-deep);    /* Primary */
	--ast-global-color-1: var(--y-sage);         /* Secondary */
	--ast-global-color-2: var(--y-ink);          /* Text */
	--ast-global-color-3: var(--y-ink-soft);     /* Text light */
	--ast-global-color-4: var(--y-cream);        /* Background */
	--ast-global-color-5: var(--y-cream-warm);   /* Background light */
	--ast-global-color-6: var(--y-line);         /* Border */
	--ast-global-color-7: var(--y-sage-deep);    /* Link hover */
	--ast-global-color-8: var(--y-cedar);        /* Heading */
}