/*
 * MA-ZAL Group — design tokens. THE ONLY SOURCE of every colour, font, size, space, radius, shadow and layer.
 * Brand colours come from demo.readme [THEME] (printed by the runtime as --mzs-bg, --mzs-accent ...) and are only
 * renamed here; everything else is defined here once. No other stylesheet writes a colour or a size literal:
 * they read these variables.
 */
:root {
	/* colour: from demo.readme [THEME] */
	--c-paper: var(--mzs-bg, #F6F1E7);          /* page ground */
	--c-surface: var(--mzs-surface, #FFFDF8);   /* cards, forms, bars */
	--c-ink: var(--mzs-on-dark, #2B2316);       /* text */
	--c-ink-2: var(--mzs-muted, #6B604C);       /* secondary text */
	--c-gold: var(--mzs-accent, #A8822F);       /* buttons, large headings, numbers */
	--c-gold-night: var(--mzs-accent-2, #D9B566); /* gold on the night ground */
	--c-night: var(--mzs-text, #15100A);        /* welcome, coffee strip, presence, footer */
	--c-line: var(--mzs-line, #E4D9C3);         /* borders */

	/* colour: derived roles (defined once) */
	--c-gold-text: #7E611F;                     /* gold for small text and links on paper (contrast 5.6:1) */
	--c-gold-soft: #EFE4CC;                     /* chips, selected rows */
	--c-ink-3: #3D3324;                         /* long reading text */
	--c-night-2: #2A2013;                       /* glow centre on the night ground */
	--c-on-night: #F3EBDD;                      /* text on night */
	--c-on-night-2: #CDBFA5;                    /* secondary text on night */
	--c-on-night-3: #9C8C70;                    /* hints on night */
	--c-night-line: rgba(217, 181, 102, 0.25);  /* borders on night */
	--c-night-line-strong: rgba(217, 181, 102, 0.35);
	--c-night-line-faint: rgba(217, 181, 102, 0.12);
	--c-night-sep: #5C4E36;                     /* small separators on night */
	--c-gold-glow: rgba(217, 181, 102, 0.28);   /* glow under the logo */
	--c-on-gold: #FFFDF8;                       /* text on a gold button */
	--c-ok: #2F7A52;
	--c-ok-bg: #E3F1E8;
	--c-warn: #9A6A12;
	--c-warn-bg: #F8EDD4;
	--c-bad: #A64036;
	--c-bad-bg: #F6E3E0;
	--c-info: #2B6A9A;
	--c-info-bg: #E2EEF7;
	--c-shadow: rgba(60, 45, 20, 0.16);
	--c-scrim: rgba(21, 16, 10, 0.5);
	--g-gold-button: linear-gradient(180deg, #E2C27A, #B8913F); /* the welcome "enter" button only */

	/* type: Tajawal for Arabic, Inter for Latin (the fonts of the previous demo) */
	--f-text: "Inter", "Tajawal", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
	--f-mono: ui-monospace, Menlo, Consolas, monospace;
	--fs-display: clamp(2rem, 1.2rem + 3vw, 3.75rem);  /* 32 → 60 */
	--fs-h1: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);   /* 28 → 40 */
	--fs-h2: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);  /* 24 → 34 */
	--fs-h3: 1.3125rem;                                /* 21 */
	--fs-lead: 1.125rem;                               /* 18 */
	--fs-body: 1rem;                                   /* 16 */
	--fs-small: 0.875rem;                              /* 14 */
	--fs-tiny: 0.8125rem;                              /* 13 */
	--fs-micro: 0.75rem;                               /* 12 */
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semi: 600;
	--fw-bold: 700;
	--lh-tight: 1.2;
	--lh-text: 1.75;

	/* space (8 px rhythm) */
	--s-1: 0.25rem;  /* 4 */
	--s-2: 0.5rem;   /* 8 */
	--s-3: 0.75rem;  /* 12 */
	--s-4: 1rem;     /* 16 */
	--s-5: 1.5rem;   /* 24 */
	--s-6: 2rem;     /* 32 */
	--s-7: 2.5rem;   /* 40 */
	--s-8: 4rem;     /* 64 */
	--s-9: 6rem;     /* 96 */
	--gutter: clamp(1rem, 0.5rem + 2.5vw, 4rem);  /* page side space: 16 on phones, 64 on wide screens */
	--section-y: clamp(3.5rem, 2rem + 5vw, 6rem); /* space between home sections */
	--container: 80rem;                            /* 1280 */
	--reading: 42rem;                              /* comfortable line length */

	/* shape */
	--r-sm: 0.625rem;   /* 10: inputs, small boxes */
	--r-md: 1.125rem;   /* 18: cards */
	--r-lg: 1.5rem;     /* 24: large cards, bands */
	--r-xl: 1.75rem;    /* 28: hero image */
	--r-pill: 999px;
	--b-1: 1px solid var(--c-line);
	--shadow-1: 0 0.75rem 2rem var(--c-shadow);
	--shadow-gold: 0 0.875rem 2.5rem rgba(184, 145, 63, 0.28);

	/* controls */
	--h-control: 3rem;     /* 48: buttons and inputs */
	--h-control-sm: 2.5rem;
	--tap: 2.75rem;        /* 44: smallest touch target */

	/* bars (phone) */
	--bar-h: 3.75rem;      /* top bar */
	--dock-h: 4.25rem;     /* bottom bar */
	--safe-top: env(safe-area-inset-top, 0px);
	--safe-bottom: env(safe-area-inset-bottom, 0px);

	/* layers */
	--z-sticky: 50;
	--z-dock: 60;
	--z-fab: 70;
	--z-drawer: 80;
	--z-sheet: 90;
	--z-welcome: 100;

	/* motion */
	--t-fast: 0.15s ease;
	--t-base: 0.3s cubic-bezier(0.16, 1, 0.3, 1);

	/* MA-ZAL Application floating bell: its distance from the bottom (the plugin reads this variable) */
	--mz-app-float-bottom: var(--s-4);

	/* reading direction for icons that point (arrows): 1 left-to-right, -1 right-to-left */
	--dir-x: 1;

	/* breakpoints are written as numbers in media queries: phone < 48rem (768), wide >= 64rem (1024) */
}

[dir="rtl"] {
	--dir-x: -1;
}

/* phones and tablets: floating buttons sit above the bottom bar */
@media (max-width: 63.99rem) {
	:root {
		--mz-app-float-bottom: calc(var(--dock-h) + var(--s-6));
	}
}