/* ───────────────────────── Tokens ─────────────────────────
 * The Raya design system's tokens (ClientPanel: app/assets/css/main.css), as --ds-* custom properties,
 * then mapped onto the variables Nextcloud's own themes define (apps/theming/lib/Themes/*.php).
 *
 * Palette: the shadcn neutral one (the design system's «mono» light and «ultra» dark), in hex because
 * some Nextcloud scripts read these variables and only understand hex / rgb.
 *
 * How it sits on top of Nextcloud:
 *  - Nextcloud defines its variables on :root (default theme, and the light / dark ones through media
 *    queries) or on body[data-theme-<id>] (a theme the user picked). Everything here is set on <body>, so
 *    it overrides the :root values by inheritance and the body ones by specificity (0,2,1 > 0,1,0).
 *  - Variables Nextcloud derives from other variables (`var(--x)` inside a value) are resolved on :root,
 *    so every one of those that depends on something changed here is declared again in the mapping block.
 *  - The high-contrast themes are left exactly as Nextcloud ships them.
 *  - Elements marked data-theme-dark / data-theme-light (Talk's call bars, modal headers, the image viewer) are
 *    islands Nextcloud paints with its own dark or light variables: they get the same tokens and mapping here.
 *  - The dark tokens appear twice (explicit dark theme, and «system default» on a dark OS): keep them in sync.
 */

/* ───────── Light (shadcn neutral / design system «mono») ───────── */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]),
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) [data-theme-light] {
	color-scheme: light;

	--ds-background: #ffffff;
	--ds-background-rgb: 255, 255, 255;
	--ds-foreground: #0a0a0a;
	--ds-card: #ffffff;
	--ds-card-foreground: #0a0a0a;
	--ds-popover: #ffffff;
	--ds-popover-foreground: #0a0a0a;

	--ds-primary: #171717;
	--ds-primary-hover: #2e2e2e;
	--ds-primary-active: #141414;
	--ds-primary-foreground: #fafafa;
	--ds-secondary: #f5f5f5;
	--ds-secondary-hover: #ebebeb;
	--ds-secondary-foreground: #171717;
	--ds-muted: #f5f5f5;
	--ds-muted-foreground: #6b6b6b;
	--ds-accent: #f5f5f5;
	--ds-accent-hover: #ebebeb;
	--ds-accent-foreground: #171717;

	--ds-border: #e5e5e5;
	--ds-border-strong: #d4d4d4;
	--ds-input: #dbdbdb;
	--ds-input-hover: #c4c4c4;
	--ds-ring: rgba(23, 23, 23, 0.18);
	--ds-focus: #171717;

	--ds-destructive: #df2225;
	--ds-destructive-foreground: #fafafa;
	--ds-destructive-soft: #ffe5e0;
	--ds-destructive-text: #9e1618;
	--ds-success: #00843a;
	--ds-success-foreground: #fafafa;
	--ds-success-soft: #d8f9dd;
	--ds-success-text: #0b5d2a;
	--ds-warning: #aa6000;
	--ds-warning-foreground: #fafafa;
	--ds-warning-soft: #fff0c5;
	--ds-warning-text: #784900;
	--ds-info: #0078bd;
	--ds-info-foreground: #fafafa;
	--ds-info-soft: #d7f3ff;
	--ds-info-text: #005b95;

	/* The page around the body container (header, app navigation): the shadcn «sidebar inset» look */
	--ds-sidebar: #fafafa;
	--ds-sidebar-foreground: #0a0a0a;
	--ds-sidebar-accent: #efefef;
	--ds-sidebar-accent-hover: #f3f3f3;
	--ds-sidebar-accent-foreground: #171717;
	--ds-sidebar-border: #e5e5e5;

	/* Folder icons: a quiet neutral instead of the primary colour (a solid black/white slab in grid view) */
	--ds-folder: #a3a3a3;

	/* Segmented control / tabs: a muted track, the chosen item a raised chip */
	--ds-segment-track: #f0f0f0;
	--ds-segment-active: #ffffff;
	--ds-segment-active-border: rgba(0, 0, 0, 0.04);
	--ds-segment-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 1px 1px rgba(0, 0, 0, 0.04);

	--ds-shadow-rgb: 0, 0, 0;
	--ds-shadow-a: 0.08;
	--ds-scrollbar: #d4d4d4;
	--ds-loading-light: #d4d4d4;
	--ds-loading-dark: #525252;
	--ds-text-blur: #5c5c5c;
	/* Nextcloud's filters for white legacy icons on these surfaces */
	--ds-sidebar-invert-if-bright: invert(100%);
	--ds-primary-invert-if-bright: no;
	--ds-primary-invert-if-dark: invert(100%);
}

/* ───────── Dark (shadcn neutral dark / design system «ultra») ───────── */
body[data-theme-dark]:not([data-theme-dark-highcontrast]),
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) [data-theme-dark] {
	color-scheme: dark;

	--ds-background: #0a0a0a;
	--ds-background-rgb: 10, 10, 10;
	--ds-foreground: #fafafa;
	--ds-card: #171717;
	--ds-card-foreground: #fafafa;
	--ds-popover: #171717;
	--ds-popover-foreground: #fafafa;

	--ds-primary: #e5e5e5;
	--ds-primary-hover: #cfcfcf;
	--ds-primary-active: #c2c2c2;
	--ds-primary-foreground: #171717;
	--ds-secondary: #262626;
	--ds-secondary-hover: #2e2e2e;
	--ds-secondary-foreground: #fafafa;
	--ds-muted: #262626;
	--ds-muted-foreground: #a1a1a1;
	--ds-accent: #262626;
	--ds-accent-hover: #303030;
	--ds-accent-foreground: #fafafa;

	--ds-border: #262626;
	--ds-border-strong: #333333;
	--ds-input: #2f2f2f;
	--ds-input-hover: #404040;
	--ds-ring: rgba(161, 161, 161, 0.35);
	--ds-focus: #a1a1a1;

	--ds-destructive: #f14d4c;
	--ds-destructive-foreground: #fafafa;
	--ds-destructive-soft: #4f1a18;
	--ds-destructive-text: #ffbdb7;
	--ds-success: #53be70;
	--ds-success-foreground: #0a0a0a;
	--ds-success-soft: #14361d;
	--ds-success-text: #b2e7bc;
	--ds-warning: #edb345;
	--ds-warning-foreground: #0a0a0a;
	--ds-warning-soft: #432f07;
	--ds-warning-text: #f7dba1;
	--ds-info: #4baeed;
	--ds-info-foreground: #0a0a0a;
	--ds-info-soft: #0a3149;
	--ds-info-text: #a8d8fb;

	--ds-sidebar: #171717;
	--ds-sidebar-foreground: #fafafa;
	--ds-sidebar-accent: #262626;
	--ds-sidebar-accent-hover: #1f1f1f;
	--ds-sidebar-accent-foreground: #fafafa;
	--ds-sidebar-border: #262626;

	--ds-folder: #737373;

	--ds-segment-track: #262626;
	--ds-segment-active: #3a3a3a;
	--ds-segment-active-border: rgba(255, 255, 255, 0.08);
	--ds-segment-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);

	--ds-shadow-rgb: 0, 0, 0;
	--ds-shadow-a: 0.4;
	--ds-scrollbar: #404040;
	--ds-loading-light: #404040;
	--ds-loading-dark: #a1a1a1;
	--ds-text-blur: #b5b5b5;
	--ds-sidebar-invert-if-bright: no;
	--ds-primary-invert-if-bright: invert(100%);
	--ds-primary-invert-if-dark: no;
}

/* «System default» on a dark OS, and guest pages (login: data-themes=""): the same dark tokens as above */
@media (prefers-color-scheme: dark) {
	body:is([data-theme-default], [data-themes=""]):not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) {
		color-scheme: dark;

		--ds-background: #0a0a0a;
		--ds-background-rgb: 10, 10, 10;
		--ds-foreground: #fafafa;
		--ds-card: #171717;
		--ds-card-foreground: #fafafa;
		--ds-popover: #171717;
		--ds-popover-foreground: #fafafa;

		--ds-primary: #e5e5e5;
		--ds-primary-hover: #cfcfcf;
		--ds-primary-active: #c2c2c2;
		--ds-primary-foreground: #171717;
		--ds-secondary: #262626;
		--ds-secondary-hover: #2e2e2e;
		--ds-secondary-foreground: #fafafa;
		--ds-muted: #262626;
		--ds-muted-foreground: #a1a1a1;
		--ds-accent: #262626;
		--ds-accent-hover: #303030;
		--ds-accent-foreground: #fafafa;

		--ds-border: #262626;
		--ds-border-strong: #333333;
		--ds-input: #2f2f2f;
		--ds-input-hover: #404040;
		--ds-ring: rgba(161, 161, 161, 0.35);
		--ds-focus: #a1a1a1;

		--ds-destructive: #f14d4c;
		--ds-destructive-foreground: #fafafa;
		--ds-destructive-soft: #4f1a18;
		--ds-destructive-text: #ffbdb7;
		--ds-success: #53be70;
		--ds-success-foreground: #0a0a0a;
		--ds-success-soft: #14361d;
		--ds-success-text: #b2e7bc;
		--ds-warning: #edb345;
		--ds-warning-foreground: #0a0a0a;
		--ds-warning-soft: #432f07;
		--ds-warning-text: #f7dba1;
		--ds-info: #4baeed;
		--ds-info-foreground: #0a0a0a;
		--ds-info-soft: #0a3149;
		--ds-info-text: #a8d8fb;

		--ds-sidebar: #171717;
		--ds-sidebar-foreground: #fafafa;
		--ds-sidebar-accent: #262626;
		--ds-sidebar-accent-hover: #1f1f1f;
		--ds-sidebar-accent-foreground: #fafafa;
		--ds-sidebar-border: #262626;

		--ds-folder: #737373;

		--ds-segment-track: #262626;
		--ds-segment-active: #3a3a3a;
		--ds-segment-active-border: rgba(255, 255, 255, 0.08);
		--ds-segment-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);

		--ds-shadow-rgb: 0, 0, 0;
		--ds-shadow-a: 0.4;
		--ds-scrollbar: #404040;
		--ds-loading-light: #404040;
		--ds-loading-dark: #a1a1a1;
		--ds-text-blur: #b5b5b5;
		--ds-sidebar-invert-if-bright: no;
		--ds-primary-invert-if-bright: invert(100%);
		--ds-primary-invert-if-dark: no;
	}
}

/* ───────── Shared tokens and the mapping onto Nextcloud's variables ───────── */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]),
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) :is([data-theme-light], [data-theme-dark]) {
	--ds-radius: 10px;
	--ds-radius-sm: 6px;
	--ds-radius-md: 8px;
	--ds-radius-lg: 10px;
	--ds-radius-xl: 14px;

	--ds-shadow-xs: 0 1px 2px 0 rgba(var(--ds-shadow-rgb), calc(var(--ds-shadow-a) * 0.6));
	--ds-shadow-sm: 0 1px 3px 0 rgba(var(--ds-shadow-rgb), var(--ds-shadow-a)), 0 1px 2px -1px rgba(var(--ds-shadow-rgb), var(--ds-shadow-a));
	--ds-shadow-md: 0 4px 6px -1px rgba(var(--ds-shadow-rgb), var(--ds-shadow-a)), 0 2px 4px -2px rgba(var(--ds-shadow-rgb), var(--ds-shadow-a));
	--ds-shadow-lg: 0 10px 15px -3px rgba(var(--ds-shadow-rgb), var(--ds-shadow-a)), 0 4px 6px -4px rgba(var(--ds-shadow-rgb), var(--ds-shadow-a));
	--ds-shadow-xl: 0 20px 25px -5px rgba(var(--ds-shadow-rgb), var(--ds-shadow-a)), 0 8px 10px -6px rgba(var(--ds-shadow-rgb), var(--ds-shadow-a));

	/* Typography (the font stacks themselves are in base.css, for every theme) */
	--default-font-size: 14px;
	--font-size-small: 12px;

	/* Surfaces */
	--color-main-background: var(--ds-background);
	--color-main-background-rgb: var(--ds-background-rgb);
	--color-main-background-translucent: rgba(var(--ds-background-rgb), 0.97);
	--color-main-background-blur: rgba(var(--ds-background-rgb), 0.95);
	--filter-background-blur: none;
	--gradient-main-background: var(--color-main-background) 0%, var(--color-main-background-translucent) 85%, transparent 100%;

	--color-background-hover: var(--ds-accent);
	--color-background-dark: var(--ds-accent-hover);
	--color-background-darker: var(--ds-border-strong);
	--color-placeholder-light: var(--ds-border);
	--color-placeholder-dark: var(--ds-border-strong);

	/* Text */
	--color-main-text: var(--ds-foreground);
	--color-text-maxcontrast: var(--ds-muted-foreground);
	--color-text-maxcontrast-default: var(--ds-muted-foreground);
	--color-text-maxcontrast-background-blur: var(--ds-text-blur);
	--color-text-error: var(--ds-destructive);
	--color-text-success: var(--ds-success);

	/* Borders */
	--color-border: var(--ds-border);
	--color-border-dark: var(--ds-border-strong);
	--color-border-maxcontrast: var(--ds-input-hover);
	--color-border-error: var(--ds-destructive);
	--color-border-success: var(--ds-success);

	/* Status */
	--color-element-error: var(--ds-destructive);
	--color-element-info: var(--ds-info);
	--color-element-success: var(--ds-success);
	--color-element-warning: var(--ds-warning);
	--color-error: var(--ds-destructive-soft);
	--color-error-hover: color-mix(in srgb, var(--ds-destructive-soft), var(--ds-destructive) 12%);
	--color-error-text: var(--ds-destructive-text);
	--color-warning: var(--ds-warning-soft);
	--color-warning-hover: color-mix(in srgb, var(--ds-warning-soft), var(--ds-warning) 12%);
	--color-warning-text: var(--ds-warning-text);
	--color-success: var(--ds-success-soft);
	--color-success-hover: color-mix(in srgb, var(--ds-success-soft), var(--ds-success) 12%);
	--color-success-text: var(--ds-success-text);
	--color-info: var(--ds-info-soft);
	--color-info-hover: color-mix(in srgb, var(--ds-info-soft), var(--ds-info) 12%);
	--color-info-text: var(--ds-info-text);

	--color-loading-light: var(--ds-loading-light);
	--color-loading-dark: var(--ds-loading-dark);
	--color-scrollbar: var(--ds-scrollbar) transparent;
	--color-box-shadow-rgb: var(--ds-shadow-rgb);
	--color-box-shadow: rgba(var(--ds-shadow-rgb), calc(var(--ds-shadow-a) * 1.5));

	/* Primary: neutral like shadcn, instead of the admin's theming colour */
	--color-primary: var(--ds-primary);
	--color-primary-text: var(--ds-primary-foreground);
	--color-primary-hover: var(--ds-primary-hover);
	--color-primary-element: var(--ds-primary);
	--color-primary-element-hover: var(--ds-primary-hover);
	--color-primary-element-text: var(--ds-primary-foreground);
	--color-primary-element-text-dark: color-mix(in srgb, var(--ds-primary-foreground), var(--ds-primary) 15%);
	--color-primary-light: var(--ds-accent);
	--color-primary-light-hover: var(--ds-accent-hover);
	--color-primary-light-text: var(--ds-accent-foreground);
	--color-primary-element-light: var(--ds-accent);
	--color-primary-element-light-hover: var(--ds-accent-hover);
	--color-primary-element-light-text: var(--ds-accent-foreground);
	--gradient-primary-background: linear-gradient(40deg, var(--ds-primary) 0%, var(--ds-primary-hover) 100%);
	--primary-invert-if-bright: var(--ds-primary-invert-if-bright);
	--primary-invert-if-dark: var(--ds-primary-invert-if-dark);

	/* The page behind the body container: flat sidebar colour, no background image */
	--color-background-plain: var(--ds-sidebar);
	--color-background-plain-text: var(--ds-sidebar-foreground);
	--background-image-invert-if-bright: var(--ds-sidebar-invert-if-bright);
	--image-background: none;
	--header-menu-icon-mask: linear-gradient(var(--ds-sidebar-foreground), var(--ds-sidebar-foreground)) alpha;

	/* App navigation (sidebar): the design system's 16rem instead of Nextcloud's 300px */
	--ds-nav-width: 256px;
	--navigation-width: var(--ds-nav-width);

	/* Radii: the design system's sm / md / lg / xl */
	--border-radius-small: var(--ds-radius-sm);
	--border-radius-element: var(--ds-radius-md);
	--border-radius-container: var(--ds-radius-lg);
	--border-radius-container-large: var(--ds-radius-xl);
	--border-radius: var(--ds-radius-sm);
	--border-radius-large: var(--ds-radius-md);
	--body-container-radius: var(--ds-radius-xl);

	/* Field look for apps' own controls (Zaman's .z-field…), same as inputs in components.css */
	--ds-field-rest: 0 0 0 1px var(--ds-input), var(--ds-shadow-xs);
	--ds-field-hover: 0 0 0 1px var(--ds-input-hover), var(--ds-shadow-xs);
	--ds-field-focus: 0 0 0 1px var(--ds-focus), 0 0 0 4px var(--ds-ring);

	/* Inputs: a 1px border at rest and on focus; focus adds a ring (see components.css) */
	--border-width-input-focused: 1px;
}