/*
 * Legimini theme contract
 * -----------------------
 * Components must consume the semantic tokens below, not palette values.
 * A new theme only needs to override this file (or the variables on
 * html[data-theme="…"]). Shape and iconography must continue to carry meaning:
 * colour is a reinforcement, never the only status/category indicator.
 */
:root {
    color-scheme: light;

    /* Palette primitives: private implementation details of the default theme. */
    --palette-ink: #000;
    --palette-ink-soft: #414141;
    --palette-ink-muted: #6c757d;
    --palette-paper: #fff;
    --palette-paper-soft: #f6f6f6;
    --palette-line: #d9d9d9;
    --palette-line-strong: #aaa;
    --palette-neutral-50: #f4f4f6;
    --palette-neutral-100: #ededf2;
    --palette-neutral-200: #dedee5;
    --palette-neutral-300: #bdbdc7;
    --palette-neutral-500: #73737e;
    --palette-neutral-600: #5c5c68;
    --palette-neutral-800: #24242d;
    --palette-blue: #3b4ef8;
    --palette-blue-dark: #303fd1;
    --palette-purple: #8d3bf8;
    --palette-orange: #ff9d38;
    --palette-gold: #ffb400;
    --palette-green: #188a3b;
    --palette-red: #c62828;

    /* Reading surfaces and typography: deliberately black and white first. */
    --color-canvas: var(--palette-paper);
    --color-surface: var(--palette-paper);
    --color-surface-subtle: var(--palette-paper-soft);
    --color-text: var(--palette-ink);
    --color-text-soft: var(--palette-ink-soft);
    --color-text-muted: var(--palette-ink-muted);
    --color-border: var(--palette-line);
    --color-border-strong: var(--palette-line-strong);
    --color-tooltip: #413219;
    --color-focus-ring: var(--palette-blue);

    /* Interactive roles. */
    --color-action: var(--palette-blue);
    --color-action-hover: var(--palette-blue-dark);
    --color-action-secondary: var(--palette-purple);
    --color-action-selected: var(--palette-gold);
    --color-on-action: var(--palette-paper);
    --color-link: var(--palette-blue);

    /* Mobile navigation: a distinct surface with explicit icon states. */
    --color-bottom-nav-surface: #eef1f7;
    --color-bottom-nav-border: #cbd2df;
    --color-bottom-nav-icon: #30384a;
    --color-bottom-nav-icon-disabled: #858d9d;
    --color-bottom-nav-active-icon: #2251cc;
    --color-bottom-nav-active-surface: #dbe4ff;

    /* Feedback roles. Always pair these with text, an icon or a shape. */
    --color-success: var(--palette-green);
    --color-danger: var(--palette-red);
    --color-warning: #8a5400;
    --color-info: var(--palette-blue);
    --color-success-surface: #eaf7ef;
    --color-danger-surface: #fff0ef;
    --color-danger-border: #efc4c0;
    --color-warning-surface: #fff4d6;
    --color-info-surface: #f4f5ff;
    --color-danger-hover: #9d2118;
    --color-success-hover: #176837;

    /* Book-domain roles: not interchangeable with feedback colours. */
    --color-rating: var(--palette-orange);
    --color-rating-empty: #c8c8c8;
    --color-rating-reader: var(--palette-green);
    --color-rating-hover: #73b100;
    --color-rating-predicted: #3e72ff;
    --color-category-orange: var(--palette-orange);
    --color-category-orange-soft: #fcbf83;
    --color-category-purple: #8400ff;
    --color-category-purple-soft: #c995fa;
    --color-category-red: #f70000;
    --color-category-red-soft: #f79797;
    --color-category-blue: #3e72ff;
    --color-category-green: #73b100;

    /* Overlays and elevation. */
    --color-backdrop: rgb(0 0 0 / 40%);
    --color-scrim-soft: rgb(0 0 0 / 20%);
    --color-scrim-19: rgb(0 0 0 / 19%);
    --color-scrim-18: rgb(0 0 0 / 18%);
    --color-scrim-16: rgb(0 0 0 / 16%);
    --color-scrim-60: rgb(0 0 0 / 60%);
    --color-scrim-35: rgb(0 0 0 / 35%);
    --color-scrim-25: rgb(0 0 0 / 25%);
    --color-scrim-10: rgb(0 0 0 / 10%);
    --color-scrim-8: rgb(0 0 0 / 8%);
    --color-scrim-3: rgb(0 0 0 / 3%);
    --color-scrim-strong: rgb(0 0 0 / 75%);
    --color-scrim-medium: rgb(0 0 0 / 55%);
    --color-scrim: rgb(0 0 0 / 45%);
    --color-scrim-faint: rgb(0 0 0 / 5%);
    --color-surface-translucent: rgb(255 255 255 / 95%);
    --color-surface-transparent: rgb(255 255 255 / 0%);
    --color-scanner-chrome: rgb(84 99 99);
    --color-scanner-success: rgb(119 223 101 / 90%);
    --color-scanner-warning: rgb(255 106 0 / 90%);
    --shadow-soft: 0 2px 8px rgb(0 0 0 / 20%);
    --shadow-modal: 0 4px 16px rgb(0 0 0 / 20%);
    --shadow-action: 0 8px 20px rgb(141 59 248 / 18%);
    --shadow-action-soft-color: rgb(48 28 84 / 12%);
    --shadow-panel-color: rgb(24 24 32 / 20%);
    --shadow-panel-soft-color: rgb(24 24 32 / 6%);
    --color-panel-backdrop: rgb(17 17 24 / 48%);
    --theme-preview-light-surface: #fff;
    --theme-preview-light-accent: #526bdc;
    --theme-preview-dark-surface: #111318;
    --theme-preview-dark-accent: #8045cf;
}

/* Ready-to-use example theme; activation can later be persisted server-side. */
html[data-theme="ink"] {
    --palette-blue: #2251cc;
    --palette-blue-dark: #173b99;
    --palette-purple: #6741a5;
    --palette-orange: #c96b13;
    --palette-gold: #b97800;
}

/*
 * Dark theme
 * Activate with <html data-theme="dark">. The semantic roles stay identical
 * to the light theme; only their concrete values change.
 */
html[data-theme="dark"] {
    color-scheme: dark;

    --palette-ink: #f5f5f2;
    --palette-ink-soft: #d2d6dc;
    --palette-ink-muted: #aab1bc;
    --palette-paper: #111318;
    --palette-paper-soft: #1b1f27;
    --palette-line: #343a46;
    --palette-line-strong: #596272;
    --palette-neutral-50: #1b1f27;
    --palette-neutral-100: #20252e;
    --palette-neutral-200: #2b313c;
    --palette-neutral-300: #596272;
    --palette-neutral-500: #aab1bc;
    --palette-neutral-600: #c2c7cf;
    --palette-neutral-800: #eef0f3;
    --palette-blue: #526bdc;
    --palette-blue-dark: #6f86eb;
    --palette-purple: #8045cf;
    --palette-orange: #ffad5c;
    --palette-gold: #ffc247;
    --palette-green: #55b978;
    --palette-red: #ed6868;

    --color-canvas: #0d0f13;
    --color-surface: var(--palette-paper);
    --color-surface-subtle: var(--palette-paper-soft);
    --color-text: var(--palette-ink);
    --color-text-soft: var(--palette-ink-soft);
    --color-text-muted: var(--palette-ink-muted);
    --color-border: var(--palette-line);
    --color-border-strong: var(--palette-line-strong);
    --color-tooltip: #332817;
    --color-focus-ring: #9db2ff;

    --color-action: var(--palette-blue);
    --color-action-hover: var(--palette-blue-dark);
    --color-action-secondary: var(--palette-purple);
    --color-action-selected: var(--palette-gold);
    --color-on-action: #fff;
    --color-link: #9db2ff;

    --color-bottom-nav-surface: #050608;
    --color-bottom-nav-border: #343a46;
    --color-bottom-nav-icon: #eef0f3;
    --color-bottom-nav-icon-disabled: #707887;
    --color-bottom-nav-active-icon: #ffc247;
    --color-bottom-nav-active-surface: #292315;

    --color-success: var(--palette-green);
    --color-danger: var(--palette-red);
    --color-warning: #ffc76d;
    --color-info: #9db2ff;
    --color-success-surface: #183525;
    --color-danger-surface: #3e2022;
    --color-danger-border: #7d3a3d;
    --color-warning-surface: #3d3018;
    --color-info-surface: #202945;
    --color-danger-hover: #ff8585;
    --color-success-hover: #72d493;

    --color-rating: var(--palette-orange);
    --color-rating-empty: #606774;
    --color-rating-reader: #6dce8e;
    --color-rating-hover: #a8d96b;
    --color-rating-predicted: #8db0ff;
    --color-category-orange: #ffad5c;
    --color-category-orange-soft: #5a371d;
    --color-category-purple: #b985ff;
    --color-category-purple-soft: #3e275c;
    --color-category-red: #ff7373;
    --color-category-red-soft: #56272a;
    --color-category-blue: #8db0ff;
    --color-category-green: #a8d96b;

    --color-backdrop: rgb(0 0 0 / 70%);
    --color-scrim-soft: rgb(0 0 0 / 45%);
    --color-scrim-19: rgb(0 0 0 / 42%);
    --color-scrim-18: rgb(0 0 0 / 40%);
    --color-scrim-16: rgb(0 0 0 / 38%);
    --color-scrim-60: rgb(0 0 0 / 78%);
    --color-scrim-35: rgb(0 0 0 / 60%);
    --color-scrim-25: rgb(0 0 0 / 50%);
    --color-scrim-10: rgb(0 0 0 / 32%);
    --color-scrim-8: rgb(255 255 255 / 10%);
    --color-scrim-3: rgb(255 255 255 / 5%);
    --color-scrim-strong: rgb(0 0 0 / 88%);
    --color-scrim-medium: rgb(0 0 0 / 75%);
    --color-scrim: rgb(0 0 0 / 68%);
    --color-scrim-faint: rgb(255 255 255 / 7%);
    --color-surface-translucent: rgb(17 19 24 / 95%);
    --color-surface-transparent: rgb(17 19 24 / 0%);
    --color-scanner-chrome: #b8c2c2;
    --color-scanner-success: rgb(109 206 142 / 90%);
    --color-scanner-warning: rgb(255 173 92 / 90%);
    --shadow-soft: 0 2px 8px rgb(0 0 0 / 55%);
    --shadow-modal: 0 4px 16px rgb(0 0 0 / 65%);
    --shadow-action: 0 8px 20px rgb(128 69 207 / 35%);
    --shadow-action-soft-color: rgb(0 0 0 / 35%);
    --shadow-panel-color: rgb(0 0 0 / 55%);
    --shadow-panel-soft-color: rgb(0 0 0 / 28%);
    --color-panel-backdrop: rgb(0 0 0 / 72%);
}