/*
 * COMOS — שירות ופניות · Design Tokens
 *
 * The single source for every colour, size and spacing value in the plugin.
 * No component may hard-code a colour or a font: they read from here.
 *
 * Every combination in use passes WCAG 2.1 AA. The measured ratios are recorded
 * in docs/PRE-DEV-ANALYSIS.md appendix B. Six values differ from the raw brand
 * document because the originals failed — see §10.5 there.
 *
 * Created by Eli Toyster | ToysterMedia
 */

:root {

	/* --- Typography ---------------------------------------------------- */
	/* The FALLBACK, deliberately. Open Sans is the brand face and its files are
	   bundled in assets/fonts/, but this file must not name it: a stylesheet
	   that declares a family the browser cannot fetch renders differently for
	   the few people who happen to have it installed locally, and that
	   inconsistency is invisible to anyone testing on a machine that does not.

	   assets/css/fonts.css declares the @font-face rules and overrides this
	   value, and COMOS_SR_Fonts enqueues it only when every file — both subsets
	   and OFL.txt — is genuinely on disk. Remove the fonts and the interface
	   falls back here, correctly. */
	--csr-font: Arial, sans-serif;
	--csr-weight-regular: 400;
	--csr-weight-medium: 600;
	--csr-weight-bold: 700;

	--csr-size-base: 18px;
	--csr-size-action: 18px;
	--csr-size-action-lg: 20px;
	--csr-size-title: 26px;
	--csr-size-title-lg: 30px;
	--csr-size-min: 16px;
	--csr-line-height: 1.6;

	/* --- Action -------------------------------------------------------- */
	/* Was #008D37 in the brand document: 4.32:1 on white, failing in both
	   directions — as link text and as a button ground with white text. The
	   brand's own hover colour clears 4.5:1, so it becomes the action colour
	   and the hover darkens further. */
	--csr-action: #00732D;              /* 6.02:1 on white */
	--csr-action-hover: #00551F;        /* 9.05:1 with white text */
	--csr-brand-green: #008D37;         /* decoration and icons only, never text */

	/* --- Accent -------------------------------------------------------- */
	--csr-accent: #ECC529;              /* ground only; pair with --csr-text */
	--csr-accent-soft: #FAF3D1;
	--csr-accent-line: #B08D0D;         /* 3.15:1 — badge border on white */

	/* A dark brand ink for EMPHASIS THAT MAKES NO CLAIM. Green already means
	   success here and red already means emergency or error, so neither is free
	   to mean "look at this first". Named in its own right rather than borrowed
	   from a state token, so nobody has to wonder whether a location coloured
	   like the `new` chip is saying something about the status. */
	--csr-ink-brand: #232F46;           /* 12.6:1 on white */

	/* --- Surfaces ------------------------------------------------------ */
	--csr-bg: #FFFFFF;
	--csr-surface: #EDF1EF;
	--csr-surface-info: #CAD2E4;
	--csr-border: #D7DDD9;              /* decorative dividers only */
	--csr-border-control: #767F78;      /* 4.14:1 — form controls, WCAG 1.4.11 */

	/* --- Text ---------------------------------------------------------- */
	--csr-text: #242823;                /* 14.97:1 on white */
	--csr-text-muted: #5B6270;          /* 5.38:1 on a card, where most of it sits */
	--csr-text-on-action: #FFFFFF;
	--csr-text-on-danger: #FFFFFF;

	/* --- Success ------------------------------------------------------- */
	--csr-success: #00732D;
	--csr-success-bg: #EDF1EF;
	--csr-success-accent: #8FD500;      /* visual emphasis only, carries no meaning */

	/* --- Warning ------------------------------------------------------- */
	--csr-warning-bg: #FAF3D1;
	--csr-warning-line: #9A7A08;        /* 3.64:1 on its own ground */
	--csr-warning-text: #242823;

	/* --- Error and emergency ------------------------------------------- */
	/* #E5484D is never a ground for text: white on it measures 3.91:1.
	   Icons, side bars and graphic marks only. */
	--csr-danger-graphic: #E5484D;
	--csr-danger-text: #9F252A;         /* 7.58:1 on white */
	--csr-danger-bg: #FDEBEC;
	--csr-danger-solid: #B71C21;        /* 6.56:1 — destructive button ground */

	/* --- Urgency: ground + text + mark, never colour alone -------------- */
	--csr-urgency-normal-bg: #EDF1EF;
	--csr-urgency-normal-text: #00732D;
	--csr-urgency-urgent-bg: #ECC529;
	--csr-urgency-urgent-text: #242823;
	--csr-urgency-emergency-bg: #FDEBEC;
	--csr-urgency-emergency-text: #9F252A;
	--csr-urgency-emergency-mark: #E5484D;

	/* --- Ticket states -------------------------------------------------- */
	--csr-state-new-bg: #CAD2E4;
	--csr-state-new-text: #232F46;
	--csr-state-accepted-bg: #EDF1EF;
	--csr-state-accepted-text: #00732D;
	--csr-state-progress-bg: #00732D;
	--csr-state-progress-text: #FFFFFF;
	--csr-state-waiting-bg: #FAF3D1;
	--csr-state-waiting-text: #242823;
	--csr-state-hold-bg: #EDF1EF;
	--csr-state-hold-text: #5B6270;
	--csr-state-resolved-bg: #EDF1EF;
	--csr-state-resolved-text: #00732D;
	--csr-state-closed-bg: #6B7280;
	--csr-state-closed-text: #FFFFFF;
	--csr-state-rejected-bg: #FDEBEC;
	--csr-state-rejected-text: #9F252A;

	/* --- Touch and spacing ---------------------------------------------- */
	--csr-touch-min: 48px;
	--csr-touch-default: 56px;
	--csr-radius: 8px;

	/* --- UI-1.1 -------------------------------------------------------- */
	/* ADDED, NOT CHANGED. --csr-radius above is still 8px and still governs
	   every admin screen, because this file is enqueued there too
	   (class-comos-sr-admin-menu.php). Redefining it would have restyled the
	   whole management side silently — a change nobody asked for and nobody
	   would test. The front end opts in to the larger values by name. */
	--csr-radius-lg: 20px;              /* cards */
	--csr-radius-pill: 999px;           /* buttons, chips */
	--csr-shadow: 0 1px 2px rgba(36, 40, 35, .05), 0 8px 24px -12px rgba(36, 40, 35, .18);
	--csr-surface-soft: #F2F8F3;        /* a tint that separates without a rule */
	--csr-size-display: 34px;           /* the one step the old scale never had */
	--csr-space-1: 4px;
	--csr-space-2: 8px;
	--csr-space-3: 12px;
	--csr-space-4: 16px;
	--csr-space-5: 24px;
	--csr-space-6: 32px;
}

/*
 * Base rules.
 *
 * Logical properties throughout: the interface is RTL, and margin-inline-start
 * keeps working if it is ever rendered LTR. No `left` or `right` in source.
 */

.comos-sr {
	direction: rtl;
	text-align: start;
	font-family: var(--csr-font);
	font-size: var(--csr-size-base);
	font-weight: var(--csr-weight-regular);
	line-height: var(--csr-line-height);
	color: var(--csr-text);
	background: var(--csr-bg);
}

/* Ticket numbers, dates and addresses are LTR runs inside RTL text. Without
   isolation the surrounding punctuation reorders and CSR-2026-000012 renders
   with its parts out of order. */
.comos-sr__ltr {
	unicode-bidi: isolate;
	direction: ltr;
	display: inline-block;
}

/* Never smaller than 16px for anything that carries meaning. */
.comos-sr small,
.comos-sr .comos-sr__help {
	font-size: var(--csr-size-min);
	color: var(--csr-text-muted);
}

/*
 * Button base — scoped under .comos-sr (specificity 0,2,0) so it outranks
 * typical theme rules like `.entry-content button` (0,1,1). No !important.
 * The -webkit-appearance reset must be in the same block as the visual rules
 * so the theme's own appearance reset does not win by coming first.
 */
.comos-sr .comos-sr__button {
	-webkit-appearance: none;
	appearance: none;
	background-image: none;
	box-shadow: none;
	filter: none;
	text-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--csr-touch-default);
	min-width: var(--csr-touch-min);
	padding-inline: var(--csr-space-5);
	font-family: inherit;
	font-size: var(--csr-size-action);
	font-weight: var(--csr-weight-medium);
	line-height: 1.2;
	border-radius: var(--csr-radius);
	border: 2px solid transparent;
	background: transparent;
	color: var(--csr-text);
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.comos-sr .comos-sr__button--primary {
	background: var(--csr-action);
	color: var(--csr-text-on-action);
	border-color: var(--csr-action);
}

.comos-sr .comos-sr__button--primary:hover,
.comos-sr .comos-sr__button--primary:focus-visible {
	background: var(--csr-action-hover);
	border-color: var(--csr-action-hover);
	color: var(--csr-text-on-action);
}

.comos-sr .comos-sr__button--secondary {
	background: transparent;
	color: var(--csr-action);
	border-color: var(--csr-action);
}

.comos-sr .comos-sr__button--secondary:hover,
.comos-sr .comos-sr__button--secondary:focus-visible {
	background: var(--csr-surface-soft);
	color: var(--csr-action);
}

/* Ghost: neutral outline, no brand colour — used for low-emphasis actions. */
.comos-sr .comos-sr__button--ghost {
	background: transparent;
	color: var(--csr-text-muted);
	border-color: var(--csr-border-control);
}

.comos-sr .comos-sr__button--ghost:hover,
.comos-sr .comos-sr__button--ghost:focus-visible {
	background: var(--csr-surface-soft);
	color: var(--csr-text);
	border-color: var(--csr-text-muted);
}

.comos-sr .comos-sr__button--danger {
	background: var(--csr-danger-solid);
	color: var(--csr-text-on-danger);
	border-color: var(--csr-danger-solid);
}

.comos-sr .comos-sr__button--danger:hover,
.comos-sr .comos-sr__button--danger:focus-visible {
	background: var(--csr-danger-text);
	border-color: var(--csr-danger-text);
	color: var(--csr-text-on-danger);
}

/* A visible focus ring is a requirement, not a preference. */
.comos-sr :focus-visible {
	outline: 3px solid var(--csr-action);
	outline-offset: 2px;
}

.comos-sr__field {
	min-height: var(--csr-touch-default);
	font-family: inherit;
	font-size: var(--csr-size-base);
	color: var(--csr-text);
	background: var(--csr-bg);
	/* Functional border, so it must clear 3:1 — WCAG 1.4.11. */
	border: 1px solid var(--csr-border-control);
	border-radius: var(--csr-radius);
	padding: var(--csr-space-3);
}

.comos-sr__error {
	color: var(--csr-danger-text);
	background: var(--csr-danger-bg);
	border-inline-start: 4px solid var(--csr-danger-graphic);
	padding: var(--csr-space-3);
	border-radius: var(--csr-radius);
}

.comos-sr__warning {
	color: var(--csr-warning-text);
	background: var(--csr-warning-bg);
	border-inline-start: 4px solid var(--csr-warning-line);
	padding: var(--csr-space-3);
	border-radius: var(--csr-radius);
}

/* Cards carry a real border. The surface tint alone is 1.14:1 against the page
   and is not a perceivable boundary. */
.comos-sr__card {
	background: var(--csr-surface);
	border: 1px solid var(--csr-border-control);
	border-radius: var(--csr-radius);
	padding: var(--csr-space-4);
}

/* Status and urgency always carry text and an icon alongside the colour. */
.comos-sr__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--csr-space-2);
	font-size: var(--csr-size-min);
	font-weight: var(--csr-weight-medium);
	padding: var(--csr-space-1) var(--csr-space-3);
	border-radius: var(--csr-radius);
}