/* Shared design tokens (fonts + color/spacing variables) for pages that use the
   canonical --body-bg/--link-color/--headers-color/etc. vocabulary:
   index.php (stylesV5.css), account_settings.php, reset_passwordform.php,
   confirmation_page.php. Edit here, not in the individual page stylesheets -
   this is the single source of truth those pages pull from. */

/* poppins-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('../assets/fonts/poppins-v24-latin-regular.woff2') format('woff2');
}
/* poppins-500 - latin */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  src: url('../assets/fonts/poppins-v24-latin-500.woff2') format('woff2');
}
/* poppins-600 - latin */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  src: url('../assets/fonts/poppins-v24-latin-600.woff2') format('woff2');
}
/* poppins-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: url('../assets/fonts/poppins-v24-latin-700.woff2') format('woff2');
}
/* poppins-800 - latin */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  src: url('../assets/fonts/poppins-v24-latin-800.woff2') format('woff2');
}
/* poppins-900 - latin */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 900;
  src: url('../assets/fonts/poppins-v24-latin-900.woff2') format('woff2');
}

/* inter-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('../assets/fonts/inter-v20-latin-regular.woff2') format('woff2');
}
/* inter-500 - latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url('../assets/fonts/inter-v20-latin-500.woff2') format('woff2');
}
/* inter-600 - latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: url('../assets/fonts/inter-v20-latin-600.woff2') format('woff2');
}
/* inter-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('../assets/fonts/inter-v20-latin-700.woff2') format('woff2');
}
/* inter-800 - latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  src: url('../assets/fonts/inter-v20-latin-800.woff2') format('woff2');
}

:root {
    /*bgs*/
    --body-bg: #f0f5f9;
    --nav-bg: linear-gradient(90deg, #0048b3 0.36%, #0085ff 99.27%);
    --col-grayish: #eef4fa;
    --col-grayishAndWhite: #ffffff;
    --input-bgs: #ffffff;
    --article-bg: white;
    --modal-bg: white;
    --modal-border: 1px solid #ddd;

    /* Elevation - layered shadows for a real sense of depth */
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 6px 16px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.06);
    --shadow-lg: 0 20px 45px rgba(15, 23, 42, 0.16), 0 6px 14px rgba(15, 23, 42, 0.08);
    --article-boxshad: var(--shadow-md);

    /* Subtle top-of-card sheen, used on major surfaces for depth */
    --card-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 55%);

    /* Soft radial wash behind the whole page, for atmosphere */
    --page-wash: radial-gradient(circle at 12% -10%, rgba(0, 113, 220, 0.10) 0%, rgba(0, 113, 220, 0) 45%);

    /* Shared gradient for primary call-to-action buttons */
    --btn-primary-gradient: linear-gradient(135deg, #0080f5 0%, #0060c0 100%);

    /* Type scale - every font-size in the app should reference one of these */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 0.95rem;
    --text-md: 1rem;
    --text-lg: 1.1rem;
    --text-xl: 1.3rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.75rem;
    --text-4xl: 2rem;

    /*text*/
    --white-text: #e3e3e3;
    --link-color: #2563eb;

    --col-darkblue: #0d4a91;
    --col-buttHover: #001427;

    --highlight-color: #ffff79;
    --headers-color: #2d4a6f;
    --col-lightblue: #0071dc;
    --danger-color: #ef4444;
    --col-borderAddItemClear: var(--link-color);
    --col-checkbord: #0071dc;
    --col-addButts: white;
    --border-addButts: 2px solid var(--col-lightblue);

    /* Button colors */
    --btn-primary-bg: var(--col-lightblue);
    --btn-primary-hover: #0060c0;
    --btn-primary-text: #ffffff;
    --btn-secondary-bg: transparent;
    --btn-secondary-text: var(--link-color);

    --border-cats: 0.125rem solid #a8cef5;

    --logo-color: #FFFF79;

    --form-border: 0.115625rem solid rgb(219, 219, 219);
    --placeholder-color: #888;

    --login-butts: #002d58;

    --addItemClearButts: var(--link-color);
    --addItemClearButtsbg: transparent;

    --textCol: #2d4a6f;

    /* Light icon-button shell - category move/add/delete/menu, jump-to, search chrome */
    --icon-btn-bg: #ffffff;
    --icon-btn-border: #e2e8f0;
}

[data-theme="dark"] {
    /* Background layers - blue-tinted and spaced further apart for real elevation */
    --body-bg: #10131c;
    --nav-bg: linear-gradient(90deg, #0a0c10 0%, #10192b 100%);
    --article-bg: #1a2033;
    --input-bgs: #262f49;
    --modal-bg: #1a2033;
    --modal-border: 1px solid #3a3f4a;

    /* Text colors */
    --white-text: #f0f0f0;
    --headers-color: #e8eaed;
    --placeholder-color: #8b919a;

    /* Accent colors - unified blue */
    --link-color: #60a5fa;
    --col-darkblue: var(--link-color);
    --col-lightblue: var(--link-color);
    --col-checkbord: var(--link-color);
    --highlight-color: #3d5a80;

    /* Card and surface colors */
    --col-grayish: #232b42;
    --col-grayishAndWhite: #1a2033;

    /* Borders */
    --col-borderAddItemClear: var(--link-color);
    --border-addButts: 2px solid var(--link-color);
    --border-cats: 1px solid #2d323c;
    --form-border: 1px solid #3a3f4a;

    /* Buttons */
    --col-addButts: transparent;
    --col-buttHover: var(--link-color);
    --login-butts: #1a1d24;
    --addItemClearButtsbg: transparent;
    --addItemClearButts: var(--headers-color);

    /* Button colors */
    --btn-primary-bg: var(--link-color);
    --btn-primary-hover: #3d8ae6;
    --btn-primary-text: #ffffff;
    --btn-secondary-bg: transparent;
    --btn-secondary-text: var(--link-color);

    /* Accent buttons - light-blue bg with dark text (Add Item, Add Store, etc.) */
    --btn-accent-bg: #60a5fa;
    --btn-accent-text: #1e293b;
    --btn-accent-hover: #93c5fd;

    /* Light icon-button shell - dark override */
    --icon-btn-bg: #232b42;
    --icon-btn-border: #3a3f4a;

    /* Effects */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 24px 55px rgba(0, 0, 0, 0.55), 0 8px 16px rgba(0, 0, 0, 0.35);
    --article-boxshad: var(--shadow-md);
    --card-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 55%);
    --page-wash: radial-gradient(circle at 12% -10%, rgba(74, 158, 255, 0.10) 0%, rgba(74, 158, 255, 0) 45%);
    --btn-primary-gradient: linear-gradient(135deg, #5aa8ff 0%, #2563eb 100%);
    --logo-color: var(--link-color);

    --textCol: #ececec;
}

/* AMOLED mode: same blue accent as [data-theme="dark"], but every background
   layer is pushed to true/near-true black instead of the blue-tinted dark
   navy - saves battery on OLED screens and gives max contrast. */
[data-theme="amoled"] {
    /* Background layers - true black instead of blue-tinted navy */
    --body-bg: #000000;
    --nav-bg: linear-gradient(90deg, #000000 0%, #0a0a0a 100%);
    --article-bg: #000000;
    --input-bgs: #0a0a0a;
    --modal-bg: #000000;
    --modal-border: 1px solid #262626;

    /* Text colors - identical to dark mode */
    --white-text: #f0f0f0;
    --headers-color: #e8eaed;
    --placeholder-color: #8b919a;

    /* Accent colors - same blue as dark mode */
    --link-color: #60a5fa;
    --col-darkblue: var(--link-color);
    --col-lightblue: var(--link-color);
    --col-checkbord: var(--link-color);
    --highlight-color: #3d5a80;

    /* Card and surface colors - true black */
    --col-grayish: #0a0a0a;
    --col-grayishAndWhite: #000000;

    /* Borders */
    --col-borderAddItemClear: var(--link-color);
    --border-addButts: 2px solid var(--link-color);
    --border-cats: 1px solid #1a1a1a;
    --form-border: 1px solid #262626;

    /* Buttons */
    --col-addButts: transparent;
    --col-buttHover: var(--link-color);
    --login-butts: #000000;
    --addItemClearButtsbg: transparent;
    --addItemClearButts: var(--headers-color);

    /* Button colors */
    --btn-primary-bg: var(--link-color);
    --btn-primary-hover: #3d8ae6;
    --btn-primary-text: #ffffff;
    --btn-secondary-bg: transparent;
    --btn-secondary-text: var(--link-color);

    /* Accent buttons - light-blue bg with dark text (Add Item, Add Store, etc.) */
    --btn-accent-bg: #60a5fa;
    --btn-accent-text: #1e293b;
    --btn-accent-hover: #93c5fd;

    /* Icon-button shell */
    --icon-btn-bg: #0a0a0a;
    --icon-btn-border: #262626;

    /* Effects - identical to dark mode */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 24px 55px rgba(0, 0, 0, 0.55), 0 8px 16px rgba(0, 0, 0, 0.35);
    --article-boxshad: var(--shadow-md);
    --card-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 55%);
    --page-wash: radial-gradient(circle at 12% -10%, rgba(74, 158, 255, 0.10) 0%, rgba(74, 158, 255, 0) 45%);
    --btn-primary-gradient: linear-gradient(135deg, #5aa8ff 0%, #2563eb 100%);
    --logo-color: var(--link-color);

    --textCol: #ececec;
}

/* Third mode: same dark base as [data-theme="dark"], but every accent that
   was blue is swapped for a cool teal-green. Structural/neutral tokens
   (backgrounds, borders, shadows, text) are intentionally identical to dark. */
[data-theme="green"] {
    /* Background layers - identical to dark mode */
    --body-bg: #10131c;
    --nav-bg: linear-gradient(90deg, #0a0c10 0%, #10192b 100%);
    --article-bg: #1a2033;
    --input-bgs: #262f49;
    --modal-bg: #1a2033;
    --modal-border: 1px solid #3a3f4a;

    /* Text colors - identical to dark mode */
    --white-text: #f0f0f0;
    --headers-color: #e8eaed;
    --placeholder-color: #8b919a;

    /* Accent colors - unified cool green (teal) instead of blue */
    --link-color: #2dd4bf;
    --col-darkblue: var(--link-color);
    --col-lightblue: var(--link-color);
    --col-checkbord: var(--link-color);
    --highlight-color: #1f5e52;

    /* Card and surface colors - identical to dark mode */
    --col-grayish: #232b42;
    --col-grayishAndWhite: #1a2033;

    /* Borders */
    --col-borderAddItemClear: var(--link-color);
    --border-addButts: 2px solid var(--link-color);
    --border-cats: 1px solid #2d323c;
    --form-border: 1px solid #3a3f4a;

    /* Buttons */
    --col-addButts: transparent;
    --col-buttHover: var(--link-color);
    --login-butts: #1a1d24;
    --addItemClearButtsbg: transparent;
    --addItemClearButts: var(--headers-color);

    /* Button colors - dark text reads better on the light teal-green bg than white */
    --btn-primary-bg: var(--link-color);
    --btn-primary-hover: #14b8a6;
    --btn-primary-text: #0b2b26;
    --btn-secondary-bg: transparent;
    --btn-secondary-text: var(--link-color);

    /* Accent buttons - light-green bg with dark text (Add Item, Add Store, etc.) */
    --btn-accent-bg: #2dd4bf;
    --btn-accent-text: #1e293b;
    --btn-accent-hover: #5eead4;

    /* Light icon-button shell - identical to dark mode */
    --icon-btn-bg: #232b42;
    --icon-btn-border: #3a3f4a;

    /* Effects - identical to dark mode except the blue page wash */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 24px 55px rgba(0, 0, 0, 0.55), 0 8px 16px rgba(0, 0, 0, 0.35);
    --article-boxshad: var(--shadow-md);
    --card-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 55%);
    --page-wash: radial-gradient(circle at 12% -10%, rgba(45, 212, 191, 0.10) 0%, rgba(45, 212, 191, 0) 45%);
    --btn-primary-gradient: linear-gradient(135deg, #2dd4bf 0%, #0d9488 100%);
    --logo-color: var(--link-color);

    --textCol: #ececec;
}

/* Fourth mode: a warm, Kindle-style "sepia" reading palette. Structurally
   this is a light theme (same shape as :root), not a dark one - parchment
   background, dark warm-brown text, amber/terracotta accent instead of blue. */
[data-theme="sepia"] {
    /*bgs*/
    --body-bg: #f4ecd8;
    --nav-bg: linear-gradient(90deg, #8b5e34 0.36%, #a97442 99.27%);
    --col-grayish: #efe4cc;
    --col-grayishAndWhite: #fbf5e6;
    --input-bgs: #fbf5e6;
    --article-bg: #fbf3e3;
    --modal-bg: #fbf3e3;
    --modal-border: 1px solid #d9c9a3;

    /* Elevation - warm-tinted shadows instead of slate */
    --shadow-sm: 0 1px 3px rgba(66, 47, 27, 0.10), 0 1px 2px rgba(66, 47, 27, 0.08);
    --shadow-md: 0 6px 16px rgba(66, 47, 27, 0.12), 0 2px 6px rgba(66, 47, 27, 0.08);
    --shadow-lg: 0 20px 45px rgba(66, 47, 27, 0.18), 0 6px 14px rgba(66, 47, 27, 0.10);
    --article-boxshad: var(--shadow-md);

    /* Subtle top-of-card sheen, used on major surfaces for depth */
    --card-sheen: linear-gradient(180deg, rgba(255, 250, 235, 0.6) 0%, rgba(255, 250, 235, 0) 55%);

    /* Soft radial wash behind the whole page, for atmosphere */
    --page-wash: radial-gradient(circle at 12% -10%, rgba(139, 94, 52, 0.10) 0%, rgba(139, 94, 52, 0) 45%);

    /* Shared gradient for primary call-to-action buttons */
    --btn-primary-gradient: linear-gradient(135deg, #b5793f 0%, #8b5e2f 100%);

    /*text*/
    --white-text: #fdf6e8;
    --link-color: #a0522d;

    --col-darkblue: #5c3a1e;
    --col-buttHover: #3d2817;

    --highlight-color: #e8c874;
    --headers-color: #4a3222;
    --col-lightblue: #b5733a;
    --danger-color: #ef4444;
    --col-borderAddItemClear: var(--link-color);
    --col-checkbord: #b5733a;
    --col-addButts: #fdf8ec;
    --border-addButts: 2px solid var(--col-lightblue);

    /* Button colors */
    --btn-primary-bg: var(--col-lightblue);
    --btn-primary-hover: #8b5a2b;
    --btn-primary-text: #ffffff;
    --btn-secondary-bg: transparent;
    --btn-secondary-text: var(--link-color);

    --border-cats: 0.125rem solid #d9b98a;

    --logo-color: #e0b464;

    --form-border: 0.115625rem solid rgb(217, 201, 163);
    --placeholder-color: #a68a63;

    --login-butts: #6b4423;

    --addItemClearButts: var(--link-color);
    --addItemClearButtsbg: transparent;

    --textCol: #4a3222;

    /* Icon-button shell - warm override */
    --icon-btn-bg: #fbf5e6;
    --icon-btn-border: #e3d3ab;
}