/*
 * File: /common/css/variables.css
 *
 * MICROBA Foundation Alignment™
 * MICROBA Design Tokens
 * Version: 1.3.0
 * Revised: 24 July 2026
 *
 * Canonical source of truth for shared visual tokens across
 * the MICROBA OUTLOOK theme.
 *
 * @package Microba_Outlook
 */

:root {
	/* =========================================================
	   1. COLOUR — FOUNDATION
	   ========================================================= */

	--mo-bg: #f5f6f8;
	--mo-surface: #ffffff;
	--mo-surface-soft: #f9fafb;
	--mo-surface-warm: #f7f5f0;
	--mo-surface-muted: #f0f2f4;

	--mo-text: #111111;
	--mo-text-soft: #30343a;
	--mo-muted: #666666;
	--mo-muted-soft: #858b93;
	--mo-inverse: #ffffff;

	--mo-border: #e3e5e8;
	--mo-border-soft: #eceef1;
	--mo-border-strong: #d3d6da;

	--mo-hover: #eceef1;
	--mo-active: #e2e5e9;
	--mo-focus: #947532;

	/* =========================================================
	   2. COLOUR — MICROBA IDENTITY
	   ========================================================= */

	--mo-gold: #947532;
	--mo-gold-soft: #b49a5d;
	--mo-gold-pale: #eee7d7;
	--mo-gold-deep: #6f5723;

	--mo-earth: #5e594f;
	--mo-earth-soft: #817a6f;
	--mo-nature: #526454;
	--mo-nature-soft: #78877a;

	/* =========================================================
	   3. COLOUR — STATUS
	   ========================================================= */

	--mo-success: #477154;
	--mo-success-soft: #e7f0e9;

	--mo-warning: #9a6a24;
	--mo-warning-soft: #f6eddd;

	--mo-danger: #984b49;
	--mo-danger-soft: #f6e8e7;

	--mo-info: #4f6f8b;
	--mo-info-soft: #e8eef3;

	/* =========================================================
	   4. TYPOGRAPHY
	   ========================================================= */

	--mo-font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--mo-font-heading: Georgia, "Times New Roman", serif;
	--mo-font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	--mo-font-size-xs: 0.75rem;
	--mo-font-size-sm: 0.875rem;
	--mo-font-size-base: 1rem;
	--mo-font-size-md: 1.125rem;
	--mo-font-size-lg: 1.25rem;
	--mo-font-size-xl: 1.5rem;
	--mo-font-size-2xl: 2rem;
	--mo-font-size-3xl: 2.75rem;
	--mo-font-size-4xl: 4rem;

	--mo-line-height-tight: 1.15;
	--mo-line-height-heading: 1.25;
	--mo-line-height-body: 1.65;
	--mo-line-height-relaxed: 1.8;

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

	--mo-letter-spacing-tight: -0.025em;
	--mo-letter-spacing-normal: 0;
	--mo-letter-spacing-wide: 0.08em;

	/* =========================================================
	   5. LAYOUT
	   ========================================================= */

	--mo-container: 1216px;
	--mo-container-wide: 1440px;
	--mo-container-narrow: 960px;
	--mo-reading: 760px;
	--mo-gutter: clamp(1rem, 3vw, 2rem);

	/* =========================================================
	   6. SPACING
	   Existing scale is preserved for backward compatibility.
	   ========================================================= */

	--mo-space-0: 0;
	--mo-space-1: 0.5rem;
	--mo-space-2: 1rem;
	--mo-space-3: 1.5rem;
	--mo-space-4: 2rem;
	--mo-space-5: 3rem;
	--mo-space-6: 5rem;
	--mo-space-7: 7rem;
	--mo-space-8: 10rem;

	--mo-section-space-sm: clamp(3rem, 6vw, 5rem);
	--mo-section-space-md: clamp(5rem, 9vw, 8rem);
	--mo-section-space-lg: clamp(7rem, 12vw, 11rem);

	/* =========================================================
	   7. RADIUS
	   --mo-radius is retained as the canonical default alias.
	   ========================================================= */

	--mo-radius-xs: 4px;
	--mo-radius-sm: 8px;
	--mo-radius: 12px;
	--mo-radius-md: 16px;
	--mo-radius-lg: 24px;
	--mo-radius-xl: 36px;
	--mo-radius-pill: 999px;

	/* =========================================================
	   8. SHADOW
	   ========================================================= */

	--mo-shadow-xs: 0 1px 2px rgba(17, 17, 17, 0.04);
	--mo-shadow-sm: 0 6px 18px rgba(17, 17, 17, 0.06);
	--mo-shadow-md: 0 14px 36px rgba(17, 17, 17, 0.08);
	--mo-shadow-lg: 0 24px 64px rgba(17, 17, 17, 0.12);
	--mo-shadow-focus: 0 0 0 3px rgba(148, 117, 50, 0.2);

	/* =========================================================
	   9. MOTION
	   ========================================================= */

	--mo-duration-fast: 150ms;
	--mo-duration-base: 250ms;
	--mo-duration-slow: 450ms;

	--mo-ease-standard: cubic-bezier(0.2, 0, 0, 1);
	--mo-ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);

	--mo-transition-fast:
		color var(--mo-duration-fast) var(--mo-ease-standard),
		background-color var(--mo-duration-fast) var(--mo-ease-standard),
		border-color var(--mo-duration-fast) var(--mo-ease-standard);

	--mo-transition-base:
		color var(--mo-duration-base) var(--mo-ease-standard),
		background-color var(--mo-duration-base) var(--mo-ease-standard),
		border-color var(--mo-duration-base) var(--mo-ease-standard),
		box-shadow var(--mo-duration-base) var(--mo-ease-standard),
		transform var(--mo-duration-base) var(--mo-ease-standard);

	/* =========================================================
	   10. LAYERS
	   ========================================================= */

	--mo-z-base: 0;
	--mo-z-raised: 10;
	--mo-z-sticky: 100;
	--mo-z-header: 200;
	--mo-z-dropdown: 300;
	--mo-z-overlay: 800;
	--mo-z-modal: 900;
	--mo-z-toast: 1000;
}