/* Colour tokens for the French conjugation pages and their practice exercises.
   Shared by conju2.css (the pages) and conju-practice.css (the exercises).
   /french/grammar/scripts/conju-theme.js sets <html data-theme> and
   <html data-palette> before first paint.

   --cj-*  neutral surfaces and text, light and dark
   --t-*   the page palette (Material 3 tonal), one per page
   --md-sys-color-*  handed to Material Web components (Practice buttons etc.) */

:root {
	color-scheme: light;

	--cj-page: #f5f6f8;
	--cj-surface: #ffffff;
	--cj-surface-2: #f0f2f5;      /* table heads, list backgrounds */
	--cj-hover: rgba(23, 96, 146, .07);

	--cj-text: #1d2129;
	--cj-text-muted: #5d6573;
	--cj-line: rgba(0, 0, 0, .10);
	--cj-line-strong: rgba(0, 0, 0, .18);

	--cj-accent: #176092;         /* clickable French words, as before */
	--cj-accent-hover: #7a1fd1;
	--cj-link: #1a5fb4;

	--cj-bar: #4f6f96;            /* top app bar */
	--cj-popup-bg: #2b2f36;
	--cj-popup-text: #ffffff;
	--cj-popup-em: rgba(255, 255, 255, .78);

	--cj-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
	--cj-radius: 14px;

	/* Material Web (practice-launcher buttons) read these through shadow DOM. */
	--md-sys-color-secondary-container: #e8def8;
	--md-sys-color-on-secondary-container: #1d192b;
	--md-sys-color-on-surface: #1d1b20;
	--md-sys-color-surface: #ffffff;
}

:root[data-theme="dark"] {
	color-scheme: dark;

	/* Same family as the dark category index (vocabulary/category-index4.css). */
	--cj-page: #101013;
	--cj-surface: #1a1a1f;
	--cj-surface-2: #222229;
	--cj-hover: rgba(140, 200, 255, .09);

	--cj-text: rgba(255, 255, 255, .90);
	--cj-text-muted: rgba(255, 255, 255, .58);
	--cj-line: rgba(255, 255, 255, .11);
	--cj-line-strong: rgba(255, 255, 255, .22);

	--cj-accent: #8cc8ff;
	--cj-accent-hover: #d0a8ff;
	--cj-link: #9cc4ff;

	--cj-bar: #1b2330;
	--cj-popup-bg: #2e3440;
	--cj-popup-text: rgba(255, 255, 255, .95);
	--cj-popup-em: rgba(255, 255, 255, .72);

	--cj-shadow: 0 1px 2px rgba(0, 0, 0, .5);

	--md-sys-color-secondary-container: #4a4458;
	--md-sys-color-on-secondary-container: #e8def8;
	--md-sys-color-on-surface: #e6e0e9;
	--md-sys-color-surface: #1a1a1f;
}

/* ---------------- Page palettes (Material 3 tonal) ----------------
   One seed colour per page, expanded with Google's material-color-utilities
   (SchemeTonalSpot, contrast 0) into light and dark roles:
     pc / on-pc   primary container + text on it   -> banner, list header
     p / on-p     primary + text on it              -> Practice buttons
     ter          tertiary                          -> second decorative shape
     sc / on-sc   secondary container + text on it  -> current sidebar item
   Groups: regular verbs blue, irregulars teal/green, past tenses warm,
   future & subjunctive violet. includes/css2.jsp picks data-palette from the
   page's filename. Regenerate rather than hand-tuning: Hct.from(hue, 48, 50). */

:root {
	--t-pc: #c4e7ff;
	--t-on-pc: #004c69;
	--t-p: #1c6586;
	--t-on-p: #ffffff;
	--t-ter: #615a7d;
	--t-sc: #d1e5f4;
	--t-on-sc: #374955;
}

/* azure */
:root[data-palette="er"] {
	--t-pc: #c4e7ff;
	--t-on-pc: #004c69;
	--t-p: #1c6586;
	--t-on-p: #ffffff;
	--t-ter: #615a7d;
	--t-sc: #d1e5f4;
	--t-on-sc: #374955;
}

/* blue */
:root[data-palette="ir"] {
	--t-pc: #d2e4ff;
	--t-on-pc: #1b4975;
	--t-p: #37618e;
	--t-on-p: #ffffff;
	--t-ter: #6b5778;
	--t-sc: #d7e3f8;
	--t-on-sc: #3c4858;
}

/* indigo */
:root[data-palette="re"] {
	--t-pc: #dae2ff;
	--t-on-pc: #304578;
	--t-p: #495d92;
	--t-on-p: #ffffff;
	--t-ter: #735471;
	--t-sc: #dce2f9;
	--t-on-sc: #404659;
}

/* cerulean */
:root[data-palette="almost"] {
	--t-pc: #b2ebff;
	--t-on-pc: #004e5e;
	--t-p: #00677d;
	--t-on-p: #ffffff;
	--t-ter: #585c7e;
	--t-sc: #cee7f0;
	--t-on-sc: #344a52;
}

/* teal */
:root[data-palette="ootw"] {
	--t-pc: #9ef2e4;
	--t-on-pc: #005048;
	--t-p: #006a60;
	--t-on-p: #ffffff;
	--t-ter: #456179;
	--t-sc: #cce8e2;
	--t-on-sc: #334b47;
}

/* sea green */
:root[data-palette="type1"] {
	--t-pc: #aef2c5;
	--t-on-pc: #085131;
	--t-p: #296a47;
	--t-on-p: #ffffff;
	--t-ter: #3b6471;
	--t-sc: #d1e8d6;
	--t-on-sc: #374b3e;
}

/* green */
:root[data-palette="type2"] {
	--t-pc: #bdf0b3;
	--t-on-pc: #255023;
	--t-p: #3c6838;
	--t-on-p: #ffffff;
	--t-ter: #38656a;
	--t-sc: #d6e8ce;
	--t-on-sc: #3b4b38;
}

/* leaf */
:root[data-palette="type3"] {
	--t-pc: #d6eb9c;
	--t-on-pc: #3c4c0e;
	--t-p: #536525;
	--t-on-p: #ffffff;
	--t-ter: #39665f;
	--t-sc: #dfe6c4;
	--t-on-sc: #434931;
}

/* amber */
:root[data-palette="imperfect"] {
	--t-pc: #ffddb2;
	--t-on-pc: #624000;
	--t-p: #7f5610;
	--t-on-p: #ffffff;
	--t-ter: #516440;
	--t-sc: #fadebc;
	--t-on-sc: #56442a;
}

/* crimson rose: SchemeVibrant(Hct.from(10, 60, 50)); sc/ter from the rose
   tonal palette, because vibrant's neighbouring hues turned them brown */
:root[data-palette="passe-compose"] {
	--t-pc: #ffd9dd;
	--t-on-pc: #910035;
	--t-p: #bd0047;
	--t-on-p: #ffffff;
	--t-ter: #d97182;
	--t-sc: #ffd9dd;
	--t-on-sc: #5c3f43;
}

/* raspberry: SchemeTonalSpot(Hct.from(355, 48, 50)); ter = raspberry tone 60/80
   instead of the scheme's brownish tertiary */
:root[data-palette="passe-simple"] {
	--t-pc: #ffd9e5;
	--t-on-pc: #6e334e;
	--t-p: #8a4a66;
	--t-on-p: #ffffff;
	--t-ter: #d2729c;
	--t-sc: #fed9e5;
	--t-on-sc: #5a3f49;
}

/* violet */
:root[data-palette="future"] {
	--t-pc: #e7deff;
	--t-on-pc: #493e76;
	--t-p: #615690;
	--t-on-p: #ffffff;
	--t-ter: #7c5263;
	--t-sc: #e6dff9;
	--t-on-sc: #484458;
}

/* orchid */
:root[data-palette="subjunctive"] {
	--t-pc: #f8d8ff;
	--t-on-pc: #5d386b;
	--t-p: #765084;
	--t-on-p: #ffffff;
	--t-ter: #815250;
	--t-sc: #f1dcf4;
	--t-on-sc: #504254;
}

:root[data-theme="dark"] {
	--t-pc: #004c69;
	--t-on-pc: #c4e7ff;
	--t-p: #90cef3;
	--t-on-p: #00354a;
	--t-ter: #cac1e9;
	--t-sc: #374955;
	--t-on-sc: #d1e5f4;
}

:root[data-theme="dark"][data-palette="er"] {
	--t-pc: #004c69;
	--t-on-pc: #c4e7ff;
	--t-p: #90cef3;
	--t-on-p: #00354a;
	--t-ter: #cac1e9;
	--t-sc: #374955;
	--t-on-sc: #d1e5f4;
}

:root[data-theme="dark"][data-palette="ir"] {
	--t-pc: #1b4975;
	--t-on-pc: #d2e4ff;
	--t-p: #a1c9fd;
	--t-on-p: #00325a;
	--t-ter: #d7bde4;
	--t-sc: #3c4858;
	--t-on-sc: #d7e3f8;
}

:root[data-theme="dark"][data-palette="re"] {
	--t-pc: #304578;
	--t-on-pc: #dae2ff;
	--t-p: #b2c5ff;
	--t-on-p: #172e60;
	--t-ter: #e1bbdd;
	--t-sc: #404659;
	--t-on-sc: #dce2f9;
}

:root[data-theme="dark"][data-palette="almost"] {
	--t-pc: #004e5e;
	--t-on-pc: #b2ebff;
	--t-p: #86d1e9;
	--t-on-p: #003642;
	--t-ter: #c1c4eb;
	--t-sc: #344a52;
	--t-on-sc: #cee7f0;
}

:root[data-theme="dark"][data-palette="ootw"] {
	--t-pc: #005048;
	--t-on-pc: #9ef2e4;
	--t-p: #82d5c8;
	--t-on-p: #003731;
	--t-ter: #adcae6;
	--t-sc: #334b47;
	--t-on-sc: #cce8e2;
}

:root[data-theme="dark"][data-palette="type1"] {
	--t-pc: #085131;
	--t-on-pc: #aef2c5;
	--t-p: #93d5ab;
	--t-on-p: #003920;
	--t-ter: #a3cddc;
	--t-sc: #374b3e;
	--t-on-sc: #d1e8d6;
}

:root[data-theme="dark"][data-palette="type2"] {
	--t-pc: #255023;
	--t-on-pc: #bdf0b3;
	--t-p: #a2d399;
	--t-on-p: #0c390e;
	--t-ter: #a0cfd4;
	--t-sc: #3b4b38;
	--t-on-sc: #d6e8ce;
}

:root[data-theme="dark"][data-palette="type3"] {
	--t-pc: #3c4c0e;
	--t-on-pc: #d6eb9c;
	--t-p: #bacf82;
	--t-on-p: #273500;
	--t-ter: #a1d0c7;
	--t-sc: #434931;
	--t-on-sc: #dfe6c4;
}

:root[data-theme="dark"][data-palette="imperfect"] {
	--t-pc: #624000;
	--t-on-pc: #ffddb2;
	--t-p: #f4bd6e;
	--t-on-p: #442b00;
	--t-ter: #b8cea1;
	--t-sc: #56442a;
	--t-on-sc: #fadebc;
}

:root[data-theme="dark"][data-palette="passe-compose"] {
	--t-pc: #910035;
	--t-on-pc: #ffd9dd;
	--t-p: #ffb2bc;
	--t-on-p: #670023;
	--t-ter: #ffb2bc;
	--t-sc: #5c3f43;
	--t-on-sc: #ffd9dd;
}

:root[data-theme="dark"][data-palette="passe-simple"] {
	--t-pc: #6e334e;
	--t-on-pc: #ffd9e5;
	--t-p: #ffb0cf;
	--t-on-p: #531d37;
	--t-ter: #ffb0cf;
	--t-sc: #5a3f49;
	--t-on-sc: #fed9e5;
}

:root[data-theme="dark"][data-palette="future"] {
	--t-pc: #493e76;
	--t-on-pc: #e7deff;
	--t-p: #cbbeff;
	--t-on-p: #33285e;
	--t-ter: #eeb8cb;
	--t-sc: #484458;
	--t-on-sc: #e6dff9;
}

:root[data-theme="dark"][data-palette="subjunctive"] {
	--t-pc: #5d386b;
	--t-on-pc: #f8d8ff;
	--t-p: #e4b7f3;
	--t-on-p: #442253;
	--t-ter: #f5b7b4;
	--t-sc: #504254;
	--t-on-sc: #f1dcf4;
}

/* Hand the page palette to the components that should carry it. */
:root, :root[data-theme="dark"] {
	--md-sys-color-primary: var(--t-p);
	--md-sys-color-on-primary: var(--t-on-p);
	--cj-current-bg: var(--t-sc);
	--cj-current-text: var(--t-on-sc);
}