/*
 * Design tokens extracted from the approved Claude Design files
 * (Homepage 5a/6b, Shop/Product/Cart/Checkout/Account/FAQ/Blog 1a/1b).
 */
:root {
	/* Surfaces */
	--oi-paper: #FAFAF7;
	--oi-ice: #F1F4F9;
	--oi-white: #FFFFFF;
	--oi-border: #E7EAF0;
	--oi-border-soft: #EEF1F5;
	--oi-border-btn: #DDE3EC;

	/* Ink / text */
	--oi-ink: #101828;
	--oi-body: #16233B;
	--oi-muted: #5D6B7E;
	--oi-faint: #8494AC;
	--oi-tab-desc: #3B4A5E;

	/* Dark surfaces */
	--oi-navy-900: #0B1220;
	--oi-navy-800: #101828;
	--oi-navy-700: #1A2740;
	--oi-dark-gradient: linear-gradient(168deg, var(--oi-navy-700), var(--oi-navy-800));
	--oi-dark-subtext: #AFC0D8;
	--oi-footer-link: #B9C6D3;
	--oi-footer-muted: #67788F;
	--oi-footer-copy: #4E6072;

	/* Brand accent */
	--oi-blue: #2E5CE6;
	--oi-violet: #6D5AE6;
	--oi-cyan: #37C8F0;
	--oi-brand-gradient: linear-gradient(120deg, var(--oi-blue), var(--oi-violet));
	--oi-icon-gradient: linear-gradient(135deg, var(--oi-blue), var(--oi-violet));

	/* Status */
	--oi-success: #17A673;
	--oi-success-dark: #4ADE9A;
	--oi-danger: #C2582A;
	--oi-danger-bg: #FCEEEE;

	/* Amber / gold (popular badge, ratings) */
	--oi-gold-start: #E9A13B;
	--oi-gold-end: #F2BE6A;
	--oi-gold-gradient: linear-gradient(120deg, var(--oi-gold-start), var(--oi-gold-end));
	--oi-gold-text: #4A3208;
	--oi-amber-text: #A05E1B;
	--oi-amber-bg: #F8ECDD;

	/* Problem card (warm neutral) */
	--oi-warm-bg: #FAFAF7;
	--oi-warm-border: #EDEBE4;
	--oi-warm-text: #4A3A28;

	/* Tints */
	--oi-tint-blue: #EEF2FE;
	--oi-tint-blue-border: #DCE4FA;
	--oi-tint-violet: #F0EEFE;
	--oi-tint-green: #E8F6F0;

	/* Radius */
	--oi-radius-sm: 10px;
	--oi-radius-md: 14px;
	--oi-radius-lg: 18px;
	--oi-radius-xl: 22px;
	--oi-radius-pill: 999px;

	/* Shadows */
	--oi-shadow-btn: 0 12px 24px rgba(46, 92, 230, .3);
	--oi-shadow-btn-lg: 0 12px 26px rgba(46, 92, 230, .32);
	--oi-shadow-card: 0 20px 40px rgba(16, 24, 40, .1);
	--oi-shadow-dark: 0 24px 50px rgba(16, 24, 40, .3);
	--oi-shadow-hero: 0 34px 70px rgba(16, 24, 40, .35);
	--oi-shadow-chip: 0 12px 26px rgba(16, 24, 40, .12);
	--oi-shadow-sticky: 0 -8px 20px rgba(16, 24, 40, .08);

	/* Type */
	--oi-font: "Vazirmatn", system-ui, sans-serif;

	/* Icon container sizes (design review: 44-56px desktop scale, 36-44px mobile) */
	--oi-icon-container: 56px;
	--oi-icon-container-mobile: 44px;

	/* Layout */
	--oi-container: 1200px;
	--oi-container-wide: 1320px;
	--oi-container-narrow: 900px;
	--oi-gap: 22px;
}