/* ---------------------------------------------------------------------------
 * Heading face: Janna LT Bold
 *
 * Declared here, at the single point where the type system is defined, so the
 * theme never loads the font from the planning folder at runtime. The file was
 * supplied by the project owner; confirm the licence before production launch.
 * ------------------------------------------------------------------------ */
@font-face {
	font-family: "Janna LT Bold";
	src: url("../fonts/janna-lt-bold.ttf") format("truetype");
	font-style: normal;
	font-weight: 700;
	font-display: swap;
}

/* Self-hosted approved families (OFL): same faces and weights as the former Google Fonts CSS. */

/* P19: approved families self-hosted (OFL). Same faces/weights as the former Google Fonts CSS. */
@font-face {
	font-family: "IBM Plex Sans Arabic";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/ibm-plex-sans-arabic-400-arabic.woff2") format("woff2");
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
	font-family: "IBM Plex Sans Arabic";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/ibm-plex-sans-arabic-400-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "IBM Plex Sans Arabic";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/ibm-plex-sans-arabic-500-arabic.woff2") format("woff2");
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
	font-family: "IBM Plex Sans Arabic";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/ibm-plex-sans-arabic-500-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "IBM Plex Sans Arabic";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/ibm-plex-sans-arabic-600-arabic.woff2") format("woff2");
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
	font-family: "IBM Plex Sans Arabic";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/ibm-plex-sans-arabic-600-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "IBM Plex Sans Arabic";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/ibm-plex-sans-arabic-700-arabic.woff2") format("woff2");
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
	font-family: "IBM Plex Sans Arabic";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/ibm-plex-sans-arabic-700-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/inter-var-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/inter-var-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/*
 * Tarot Arabi — design tokens
 *
 * The single source of design decisions. Values come from
 * HumanStuff/Design_System_Spec.md; nothing here is invented except the two
 * derived hover shades, which the spec requires for hover states but does not
 * enumerate (marked below).
 *
 * Breakpoints are documented rather than tokenised, because CSS custom
 * properties cannot be used inside media query conditions:
 *   small mobile   0–479px
 *   large mobile   480–767px
 *   tablet         768–1023px
 *   small desktop  1024–1279px
 *   full desktop   1280px+
 */

:root {
	/* ---------------------------------------------------------------- Palette */
	/* Design System §3 */
	--color-green-900: #174f3a; /* primary brand / structural */
	/* Gold is decorative only: rules, markers, soft icon accents, subtle tints.
	   It is never used for text on white or ivory. */
	--color-gold: #c6a15b;
	--color-gold-soft: #f3ecdd; /* warm sand tint for soft surfaces */
	/* Brass is the accessible gold: text and borders that need readable contrast. */
	--color-gold-action: #8d6a31;
	--color-gold-action-hover: #6f5222;
	--color-gold-action-on-sage: #7a5a28; /* 5.06:1 on sage-100 */
	--color-sage-100: #dde9e1; /* soft sage */
	--color-ivory: #faf8f3; /* primary page background */
	--color-white: #ffffff;
	--color-charcoal: #1b1d1c; /* body copy */
	--color-text-muted: #666a67; /* descriptions, metadata */
	--color-border: #dddcd7; /* dividers, input borders */

	/* Field surface: warm white derived from the approved ivory/white pair (§43) */
	--color-field: #fffcf8;

	/* Derived interaction shades (not in the spec; hover/pressed states need them) */
	--color-green-950: #0f3a2b; /* deep green, pressed/hover */
	--color-green-800: #12352a; /* deep green, subtle surface tint */
	--color-gold-strong: #a98a45; /* deeper gold, decoration only */

	/* Accessible error colour (§43: gold is never the error colour) */
	--color-error: #b3261e;
	--color-error-surface: #fdf3f2;

	/* ------------------------------------------------------ Semantic aliases */
	--color-bg: var(--color-ivory);
	--color-surface: var(--color-white);
	--color-surface-alt: var(--color-sage-100);
	--color-surface-warm: var(--color-gold-soft);
	--color-surface-deep: var(--color-green-900);
	--color-text: var(--color-charcoal);
	--color-heading: var(--color-green-900);
	--color-accent: var(--color-gold);
	--color-accent-soft: var(--color-gold-soft);

	/* Primary action role is Deep Green: it is the CTA colour everywhere,
	   including the shell. Brass covers secondary gold emphasis only. */
	--color-action: var(--color-green-900);
	--color-action-hover: var(--color-green-950);
	--color-on-deep: var(--color-white);
	--color-on-deep-muted: rgba(255, 255, 255, 0.78);

	/* ------------------------------------------------------------- Borders */
	/* Design System §14 */
	--border-card: 1px solid rgba(23, 79, 58, 0.08);
	--border-neutral: 1px solid var(--color-border);
	--border-divider: 1px solid rgba(23, 79, 58, 0.1);
	--border-accent: 1px solid rgba(198, 161, 91, 0.55);
	--border-secondary: 1px solid var(--color-gold-action);
	--border-on-deep: 1px solid rgba(255, 255, 255, 0.2);

	/* ------------------------------------------------------------ Spacing */
	/* Design System §11 — 8px based */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-8: 32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-15: 60px;
	--space-16: 64px;
	--space-20: 80px;
	--space-24: 96px;
	--space-30: 120px;

	/* Vertical rhythm: 56–80px mobile, 80–120px desktop (§11) */
	--section-space: clamp(56px, 7.5vw, 120px);
	--section-space-tight: clamp(40px, 5vw, 72px);

	/*
	 * Major page-section rhythm, shared by every template.
	 *
	 * One boundary, one owner: a gap between two sections is set by exactly one
	 * side, so the rendered gap is this value and nothing else — never the sum of
	 * two paddings. The only spacing that may differ is spacing INSIDE one
	 * composite section (heading → its cards, panel header → its contents), which
	 * uses the internal module tokens instead.
	 */
	--ta-section-gap: clamp(64px, 6vw, 96px);

	/* -------------------------------------------------------------- Radii */
	/* Design System §12 */
	--radius-xs: 8px; /* micro badges */
	--radius-sm: 12px; /* inputs, buttons (§43/§17 range 10–12px) */
	--radius-md: 14px; /* cards lower bound */
	--radius-lg: 18px; /* standard cards */
	--radius-xl: 20px; /* large editorial cards */
	--radius-2xl: 24px; /* major visual panels */
	--radius-3xl: 28px; /* major visual panels upper bound */
	--radius-pill: 999px;

	/* ------------------------------------------------------------ Shadows */
	/* Design System §13 — restrained; borders carry more weight */
	--shadow-sm: 0 4px 18px rgba(23, 79, 58, 0.06);
	--shadow-md: 0 10px 32px rgba(23, 79, 58, 0.09);
	--shadow-lg: 0 16px 48px rgba(23, 79, 58, 0.1);

	/* ------------------------------------------------------------ Typography */
	/* Design System §5 — Arabic first.
	 *
	 * Owner decision (2026-10-27): ONE Arabic stack for the whole site. The
	 * former split — Janna LT Bold for headings, IBM Plex Sans Arabic for
	 * body/interface — is superseded: every Arabic surface now starts with the
	 * owner-supplied Janna LT Bold face (declared via @font-face above) and falls
	 * back to IBM Plex Sans Arabic for any glyph the face does not cover, then
	 * to system sans. --font-heading and --font-body are aliases of this single
	 * source, so no component can drift onto a second Arabic family.
	 *
	 * Latin-only labels (zero-padded step numerals, the Latin specimen text on
	 * the admin design-system preview) keep --font-latin: Inter has no Arabic
	 * coverage, so Arabic never resolves through it. */
	--font-arabic: "Janna LT Bold", "IBM Plex Sans Arabic", Tahoma, Arial, sans-serif;
	--font-latin: Inter, "IBM Plex Sans Arabic", Arial, sans-serif;
	--font-heading: var(--font-arabic);
	--font-body: var(--font-arabic);

	/* Design System §7 — type scale */
	--text-display: clamp(46px, 4.6vw, 72px);
	--text-h1: clamp(38px, 3.8vw, 58px);
	--text-h2: clamp(30px, 2.6vw, 42px);
	--text-h3: clamp(22px, 2vw, 30px);
	--text-card: clamp(20px, 1.6vw, 24px);
	--text-body-lg: clamp(18px, 1.4vw, 20px);
	--text-body: clamp(16px, 1.1vw, 18px);
	--text-sm: clamp(13px, 1vw, 15px);

	/* Design System §8 — Arabic needs generous body leading */
	--leading-display: 1.12;
	--leading-heading: 1.22;
	--leading-body: 1.75;
	--leading-meta: 1.55;

	/* Design System §6 — IBM Plex Sans Arabic ships 100–700, so 700 is the
	   heaviest heading weight available; no ultra-bold. */
	--weight-regular: 400;
	--weight-medium: 500;
	/* Reserved for deliberately semibold *interface* states only. Titles,
	   labels, buttons, badges and CTA links use 700 — never 600. */
	--weight-semibold: 600;
	--weight-bold: 700;

	/* --------------------------------------------------------- Containers */
	/* Design System §9 */
	--container-max: 1280px; /* full desktop maximum */
	--container-content: 1200px; /* preferred content width (1180–1240) */
	--container-reading: 70ch; /* long Arabic text, §58 (65–75ch) */
	--container-heading: 680px; /* section heading block, §27 (620–720) */
	--container-hero-text: 600px; /* hero text column, §22 (520–620) */

	/* Section gutters */
	--container-pad: 20px; /* mobile: 18–22px */
	--grid-gap: var(--space-6);

	/* -------------------------------------------------------------- Motion */
	/* Design System §50 */
	--duration-micro: 140ms; /* 120–180ms */
	--duration-standard: 280ms; /* 220–320ms */
	--duration-editorial: 520ms; /* 400–650ms */
	--ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
	--ease-interaction: cubic-bezier(0.2, 0.7, 0.2, 1); /* modern ease for state changes */
	--duration-interaction: 200ms; /* §19/§51 range 180–240ms */

	/* -------------------------------------------------------------- Focus */
	/* Design System §19 */
	--focus-ring: 0 0 0 3px rgba(198, 161, 91, 0.4);
	--focus-outline-width: 2px;
	--focus-outline-offset: 2px;

	/* -------------------------------------------------------- Interaction */
	--lift-button: -2px; /* button hover lift (§19) */
	--lift-card: -4px; /* card hover lift, maximum (§51) */
	--press-scale: 0.988; /* active/pressed feedback (§19) */
	--hover-image-scale: 1.03; /* §51: max 1.035 */
	--shadow-interactive: 0 10px 26px rgba(23, 79, 58, 0.12); /* soft but stronger hover elevation */
	--field-depth: inset 0 1px 2px rgba(23, 79, 58, 0.045);
}

/* Tablet gutters: 24–32px (§9) */
@media (min-width: 768px) {
	:root {
		--container-pad: 28px;
		--grid-gap: var(--space-8);
	}
}

/* Desktop gutters: 32–48px (§9) */
@media (min-width: 1024px) {
	:root {
		--container-pad: 40px;
	}
}