/*
 * Apolar webmail · tema "apolar" (oficial, por defecto) · tokens
 *
 * This file only defines CSS custom properties. apolar.css (shared by both
 * skins) only reads them. Light values live in :root, dark values in
 * html.dark-mode (Elastic toggles that class on <html>).
 *
 * Source: approved prototype, data-brand=apolar (+ data-theme=dark).
 * Contract: docs/arquitectura.md, "Variables CSS".
 *
 * The apolar plugin may print <style id="apolar-brand"> later in <head> with
 * the same two selectors (:root and html.dark-mode) to replace the brand
 * block. Keep these selectors exactly as they are so that override works.
 */

:root {
	/* ---------- Marca ---------- */
	--accent-fill: #101510;        /* primary buttons: ink pill */
	--on-accent: #F8FAF8;
	--accent-hover: #34402D;
	--accent-ring: transparent;    /* inset 1px ring when the fill is too light */
	--accent-ui: #397711;          /* unread dot, focus ring, checkbox and switch on */
	--on-accent-ui: #FFFFFF;
	--accent-text: #366F11;        /* links, ghost buttons, tenant line */
	--accent-soft: #D4E2CE;        /* selected row, active toolbar button */
	--side-bg: #101510;            /* ink folder pane, phone app bars */
	--rail-bg: #0A0D0A;            /* task rail */
	--accent-on-side: #E2FF54;     /* Bandeja pill on the ink pane */
	--on-accent-side: #101510;
	--compose-bg: #E2FF54;         /* Redactar */
	--on-compose: #101510;

	/* ---------- Panel oscuro (rail + folder pane) ---------- */
	--side-text: #F8FAF8;
	--side-text-2: #AEBBA9;
	--side-icon: #C3CFBE;
	--side-hover: rgba(255, 255, 255, .08);
	--side-line: rgba(255, 255, 255, .10);
	--side-track: rgba(255, 255, 255, .16);
	--ficha-bg: #E2FF54;           /* selected folder / task ("ficha") */
	--ficha-text: #101510;
	--ficha-icon: #101510;
	--ficha-ring: transparent;
	--ficha-ct: #525B4F;
	--ficha-pill-bg: #101510;
	--ficha-pill-text: #E2FF54;
	--ficha-pill-ring: transparent;
	--plate-bg: #E2FF54;           /* logo plate in the rail */
	--plate-ink: #101510;

	/* ---------- Neutros ---------- */
	--surface: #FFFFFF;
	--canvas: #F3F6F2;
	--raised: #FFFFFF;
	--hover: #EDF1EB;
	--pressed: #E3E9E0;
	--chip: #EAEFE7;
	--text: #101510;
	--text-2: #34402D;
	--text-3: #525B4F;
	--placeholder: #646B72;
	--line: #E1E7DE;
	--line-2: #D0D9CC;
	--border-strong: #737B83;
	--scrim: rgba(17, 20, 23, .48);

	/* ---------- Semánticos (fixed, never derived from the accent) ---------- */
	--danger: #C62828;
	--danger-soft: #FDECEC;
	--danger-text: #8E1B1B;
	--danger-border: #F3C3BE;
	--on-danger: #FFFFFF;
	--warn: #B86E00;
	--warn-soft: #FFF3D6;
	--warn-text: #6B4300;
	--warn-border: #EED9AE;
	--success: #1E7A46;
	--success-soft: #E4F4EA;
	--success-text: #155C34;
	--flag: #B26A00;
	--toast-bg: #1C2024;
	--toast-text: #F3F5F6;
	--toast-text-2: #B4BCC3;
	--toast-ok: #6FD3A0;
	--toast-err: #FF8A80;
	--toast-warn: #F5C451;
	--q-ok: #F4F6F7;               /* sidebar quota bar < 80% */
	--q-warn: #F5B83D;             /* 80-94% and "Casi lleno" */
	--q-alert: #FF7A70;            /* >= 95% */
	--q-word-alert: #FF9A90;       /* "Lleno" on the ink pane */
	--bar-track: #EEF0F1;          /* Mi cuenta quota bar */
	--bar-ok: #3F464C;
	--bar-warn: #B86E00;
	--bar-danger: #C62828;

	/* File tiles in attachment cards (fixed, white label on top) */
	--tile-pdf: #C62828;
	--tile-sheet: #1E7A46;
	--tile-doc: #2557C7;
	--tile-slides: #B54A00;
	--tile-zip: #6A5536;
	--tile-image: #6B4FB8;
	--tile-other: #59616A;

	/* Phone swipe actions (fixed) */
	--swipe-delete: #C62828;
	--swipe-neutral: #2E3439;

	/* Avatar "tejas": index = hash(lowercase email) mod 8 */
	--av1b: #D5EFE6; --av1f: #0B5A48;
	--av2b: #DEE3FA; --av2f: #2B3B9C;
	--av3b: #F1DEF0; --av3f: #6C2A6C;
	--av4b: #F7EBC6; --av4f: #674B00;
	--av5b: #D5EBF6; --av5f: #0D5573;
	--av6b: #FBE1DB; --av6f: #8B2D1B;
	--av7b: #E2EFD0; --av7f: #3B5711;
	--av8b: #E6E8EA; --av8f: #3F464C;

	/* ---------- Login ---------- */
	--panel-bg: #E2FF54;           /* lime brand panel */
	--panel-text: #101510;
	--panel-text-2: #34402D;
	--panel-line: rgba(16, 21, 16, .28);
	--panel-tile: #FF713E;
	--panel-soft: rgba(16, 21, 16, .08);
	--panel-focus: #101510;
	--login-plate-bg: transparent; /* the official logo sits straight on the panel */
	--login-plate-ink: #101510;
	--login-plate-pad: 0;          /* extra: no plate padding when the plate is transparent */
	--login-stop: #101510;
	--stop-color: #E2FF54;

	/* ---------- Tipografía y forma ---------- */
	--font-ui: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--font-display: "Space Grotesk", system-ui, sans-serif;
	--font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
	--display-track: -0.04em;
	--ui-track: -0.01em;
	--btn-radius: 999px;           /* pills */
	--radius-row: 10px;

	/* ---------- Elevación y movimiento ---------- */
	--shadow-1: 0 1px 2px rgba(17, 20, 23, .06), 0 1px 1px rgba(17, 20, 23, .04);
	--shadow-2: 0 6px 16px rgba(17, 20, 23, .10), 0 1px 3px rgba(17, 20, 23, .08);
	--shadow-3: 0 16px 40px rgba(17, 20, 23, .20), 0 2px 6px rgba(17, 20, 23, .12);
	--dur-1: 120ms;                /* hover, press, switch */
	--dur-2: 180ms;                /* drawer, popover, toast */
	--ease: cubic-bezier(.2, .7, .2, 1);
}

html.dark-mode {
	/* ---------- Marca ---------- */
	--accent-fill: #E2FF54;
	--on-accent: #101510;
	--accent-hover: #CDE84D;
	--accent-ring: transparent;
	--accent-ui: #E2FF54;
	--on-accent-ui: #101510;
	--accent-text: #E2FF54;
	--accent-soft: #323C24;
	--side-bg: #0B0F0B;
	--rail-bg: #070907;
	--accent-on-side: #E2FF54;
	--on-accent-side: #101510;
	--compose-bg: #E2FF54;
	--on-compose: #101510;

	/* ---------- Neutros ---------- */
	--surface: #141A14;
	--canvas: #0B0F0B;
	--raised: #1A211A;
	--hover: #1D251D;
	--pressed: #253025;
	--chip: #222B22;
	--text: #F8FAF8;
	--text-2: #C9D3C5;
	--text-3: #A4AF9F;
	--placeholder: #97A292;
	--line: #232C23;
	--line-2: #2F3A2F;
	--border-strong: #7E897A;
	--scrim: rgba(0, 0, 0, .55);

	/* ---------- Semánticos ---------- */
	--danger: #FF8A80;
	--danger-soft: #3A1D1D;
	--danger-text: #FFB4AB;
	--danger-border: #5A2A27;
	--on-danger: #111417;
	--warn: #F5B83D;
	--warn-soft: #33290F;
	--warn-text: #F5C451;
	--warn-border: #5A4318;
	--success: #7FD9A8;
	--success-soft: #16301F;
	--success-text: #7FD9A8;
	--flag: #F5B83D;
	--toast-bg: #E8EBED;           /* inverted toast */
	--toast-text: #15181B;
	--toast-text-2: #3F464C;
	--toast-ok: #155C34;
	--toast-err: #8E1B1B;
	--toast-warn: #6B4300;
	--bar-track: #2C3136;
	--bar-ok: #E8EBED;
	--bar-warn: #E39B2D;
	--bar-danger: #E5534B;

	--av1b: #123A31; --av1f: #9FE3CD;
	--av2b: #1F2752; --av2f: #B9C5FA;
	--av3b: #3A1E3A; --av3f: #EBB8E9;
	--av4b: #3A2F0E; --av4f: #F2D58A;
	--av5b: #10324A; --av5f: #A6D6F2;
	--av6b: #43201A; --av6f: #F6B7A8;
	--av7b: #24331A; --av7f: #C2E39A;
	--av8b: #2C3136; --av8f: #C3C9CE;

	/* ---------- Login ---------- */
	--panel-bg: #101510;
	--panel-text: #F8FAF8;
	--panel-text-2: #AEBBA9;
	--panel-line: rgba(226, 255, 84, .28);
	--panel-tile: #E2FF54;
	--panel-soft: rgba(255, 255, 255, .08);
	--panel-focus: #E2FF54;
	--login-plate-ink: #F8FAF8;
	--login-stop: #E2FF54;

	/* ---------- Elevación ---------- */
	--shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
	--shadow-2: 0 8px 20px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .35);
	--shadow-3: 0 18px 44px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .40);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--dur-1: 0ms;
		--dur-2: 0ms;
	}
}