/*
 * amarea redesign — design tokens
 * Source of truth: .tasks/AM-10/brand.md
 * Не редагувати без оновлення brand.md (треба тримати у синхроні).
 */

:root {
	/* ---------- Color · core neutrals ---------- */
	--c-ink:        #2B2624; /* основний текст, контрастні поверхні */
	--c-ink-soft:   #5C544F; /* вторинний текст, мета-інфо */
	--c-paper:      #FAF8F4; /* основний фон, картки */
	--c-paper-2:    #F1ECE4; /* секції, hover-фон */
	--c-line:       #E5DDD2; /* бордери, дільники (sandy beige) */
	--c-white:      #FFFFFF;
	--c-black:      #000000;

	/* ---------- Color · brand accent (nude / coral) ---------- */
	--c-accent:       #D89A7E; /* Sale-плашки, лейбли, активний фільтр */
	--c-accent-ink:   #7A4A35; /* Текст на світлій версії акценту */
	--c-accent-soft:  #F5E6DC; /* Hover-плашка, light badge */

	/* ---------- Color · semantic ---------- */
	--c-sale:    #B83A26; /* терракот, для "–30%" */
	--c-success: #3C7A4E; /* "в наявності" */
	--c-warning: #B8842E; /* "Залишилось N шт" */
	--c-info:    #3D5A78;

	/* ---------- Typography · families ---------- */
	--font-display: "Editorial New", "PP Editorial New", Georgia, serif;
	--font-sans:    "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-mono:    "JetBrains Mono", ui-monospace, "Cascadia Mono", Menlo, monospace;

	/* ---------- Typography · scale ---------- */
	--text-display-xl: 4rem;    /* 64px */
	--text-display-l:  3rem;    /* 48px */
	--text-display-m:  2.25rem; /* 36px */
	--text-h1:         1.75rem; /* 28px */
	--text-h2:         1.375rem;/* 22px */
	--text-h3:         1.125rem;/* 18px */
	--text-body:       1rem;    /* 16px */
	--text-body-s:     0.875rem;/* 14px */
	--text-ui:         0.875rem;/* 14px */
	--text-micro:      0.75rem; /* 12px */

	/* ---------- Typography · line-heights ---------- */
	--lh-display-xl: 1.05;
	--lh-display-l:  1.10;
	--lh-display-m:  1.15;
	--lh-h1:         1.25;
	--lh-h2:         1.30;
	--lh-h3:         1.35;
	--lh-body:       1.55;
	--lh-ui:         1.20;

	/* ---------- Typography · weights ---------- */
	--fw-regular: 400;
	--fw-medium:  500;
	/* НЕ вводимо 700+ навмисно — luxury не bold-ить. */

	/* ---------- Typography · tracking ---------- */
	--tracking-tight:   -0.02em;
	--tracking-snug:    -0.015em;
	--tracking-normal:  0;
	--tracking-loose:   0.01em;
	--tracking-caps:    0.04em;

	/* ---------- Spacing (8px-base) ---------- */
	--space-0:  0;
	--space-1:  0.25rem; /*   4px */
	--space-2:  0.5rem;  /*   8px */
	--space-3:  0.75rem; /*  12px */
	--space-4:  1rem;    /*  16px */
	--space-5:  1.5rem;  /*  24px */
	--space-6:  2rem;    /*  32px */
	--space-7:  3rem;    /*  48px */
	--space-8:  4rem;    /*  64px */
	--space-9:  6rem;    /*  96px */
	--space-10: 8rem;    /* 128px */

	/* ---------- Layout ---------- */
	--container-max: 1440px;
	--container-pad-mobile:  var(--space-5);
	--container-pad-desktop: var(--space-8);

	/* ---------- Radius ---------- */
	--radius-0:      0;
	--radius-1:      2px;
	--radius-2:      4px;
	--radius-3:      8px;
	--radius-pill:   9999px;
	--radius-circle: 50%;

	/* ---------- Shadow (used sparingly) ---------- */
	--shadow-0: none;
	--shadow-1: 0 1px 2px rgba(43, 38, 36, 0.06);
	--shadow-2: 0 4px 12px rgba(43, 38, 36, 0.06);
	--shadow-3: 0 12px 32px rgba(43, 38, 36, 0.10);
	--shadow-focus: 0 0 0 3px rgba(216, 154, 126, 0.35);

	/* ---------- Motion ---------- */
	--ease-out:     cubic-bezier(0.2, 0.8, 0.2, 1);
	--ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
	--duration-fast: 120ms;
	--duration-base: 200ms;
	--duration-slow: 400ms;

	/* ---------- Z-index scale ---------- */
	--z-header:  100;
	--z-dropdown: 200;
	--z-drawer:  300;
	--z-modal:   400;
	--z-toast:   500;
}

/* Breakpoints як CSS custom media (PostCSS); тут лишаємо для документації.
 * Використовувати у власних media queries:
 *   @media (min-width: 640px)  { ... }   // tablet
 *   @media (min-width: 1024px) { ... }   // desktop
 *   @media (min-width: 1440px) { ... }   // wide
 */