/* ========================================================================== 
   Downpat color system

   Basic tokens are raw palette values. Semantic tokens are the only color
   contract components and pages should consume. Light is the default; the
   resolved data-theme attribute switches the semantic mapping for dark mode.
   ========================================================================== */

:root {
    /* Neutral */
    --color-white: #ffffff;
    --color-neutral-100: #f5f5f5;
    --color-neutral-200: #ececf0;
    --color-neutral-300: #e7e7e9;
    --color-neutral-500: #c7c7cd;
    --color-neutral-600: #9a9a9a;
    --color-neutral-650: #8a8a8f;
    --color-neutral-800: #464648;
    --color-neutral-825: #343438;
    --color-neutral-850: #28282b;
    --color-neutral-925: #1f1f1f;
    --color-neutral-950: #181818;
    --color-neutral-975: #0e0e0e;
    --color-black: #000000;

    /* Slate */
    --color-slate-200: #d9dde1;
    --color-slate-400: #9ca3af;
    --color-slate-600: #6c757d;
    --color-slate-650: #616c76;
    --color-slate-700: #495c65;

    /* Purple */
    --color-purple-50: #f4f0fd;
    --color-purple-150: #ece6fc;
    --color-purple-250: #e2d8fa;
    --color-purple-350: #d8caf8;
    --color-purple-400: #c4b5fd;
    --color-purple-500: #a78bfa;
    --color-purple-600: #8b5cf6;
    --color-purple-700: #6730c0;
    --color-purple-750: #4e189a;
    --color-purple-800: #3d1680;
    --color-purple-850: #2d1060;
    --color-purple-900: #1e0a42;

    /* Red */
    --color-red-50: #fdf7f7;
    --color-red-100: #fde8e8;
    --color-red-200: #eb9aa1;
    --color-red-300: #dc747c;
    --color-red-400: #d94856;
    --color-red-500: #c64a54;
    --color-red-600: #b03943;
    --color-red-700: #9e2c36;
    --color-red-750: #8f1822;
    --color-red-800: #70121b;
    --color-red-900: #551018;

    /* Green */
    --color-green-50: #e8f7f0;
    --color-green-100: #ace4c4;
    --color-green-300: #6cbf6c;
    --color-green-600: #20a968;
    --color-green-700: #198754;
    --color-green-800: #157a39;
    --color-green-900: #12532e;

    /* Orange and yellow */
    --color-orange-500: #de8247;
    --color-orange-800: #90420d;
    --color-yellow-50: #f7f6d5;
    --color-yellow-700: #8c6d00;

    /* Alpha and glass */
    --color-black-alpha-12: rgba(0, 0, 0, 0.12);
    --color-black-alpha-18: rgba(0, 0, 0, 0.18);
    --color-black-alpha-40: rgba(0, 0, 0, 0.40);
    --color-white-alpha-05: rgba(255, 255, 255, 0.05);
    --color-white-alpha-08: rgba(255, 255, 255, 0.08);
    --color-white-alpha-50: rgba(255, 255, 255, 0.50);
    --color-purple-alpha-22: rgba(139, 92, 246, 0.22);
    --color-grey-alpha-30: rgba(128, 128, 128, 0.30);
    --color-glass-dark-52: rgba(39, 36, 45, 0.52);

    /* Canvas and surfaces */
    --color-bg-canvas: var(--color-neutral-300);
    --color-bg-canvas-plain: var(--color-white);
    --color-bg-surface: var(--color-white);
    --color-bg-surface-subtle: var(--color-neutral-100);
    --color-bg-surface-elevated: var(--color-white);
    --color-bg-card: var(--color-white-alpha-50);
    --color-bg-card-hover: var(--color-neutral-100);
    --color-bg-overlay: var(--color-black-alpha-40);

    /* Text and icons */
    --color-text-primary: var(--color-neutral-950);
    --color-text-secondary: var(--color-slate-600);
    --color-text-muted: var(--color-slate-600);
    /* Supporting copy that has to sit a step below the prose, such as the
       translation under an example. Light has no headroom under slate-600
       without hurting legibility, so there it simply matches. */
    --color-text-support: var(--color-slate-600);
    --color-text-disabled: var(--color-neutral-650);
    --color-text-inverse: var(--color-white);
    --color-text-accent: var(--color-purple-800);
    --color-text-link: var(--color-purple-700);
    --color-text-link-hover: var(--color-purple-800);
    --color-text-success: var(--color-green-700);
    --color-text-danger: var(--color-red-750);
    --color-icon-secondary: var(--color-slate-600);

    /* Borders and focus */
    --color-border-default: var(--color-neutral-300);
    --color-border-subtle: var(--color-neutral-300);
    --color-border-strong: var(--color-neutral-500);
    --color-border-input-active: var(--color-neutral-600);
    --color-border-focus: var(--color-purple-600);
    --color-focus-ring: var(--color-purple-alpha-22);
    --color-divider: var(--color-neutral-300);
    --color-border-translucent: var(--color-grey-alpha-30);

    /* Primary action */
    --color-action-primary-bg: var(--color-purple-150);
    --color-action-primary-bg-hover: var(--color-purple-250);
    --color-action-primary-bg-active: var(--color-purple-350);
    --color-action-primary-bg-disabled: var(--color-action-primary-bg);
    --color-action-primary-content: var(--color-purple-800);
    --color-action-primary-edge-top: var(--color-purple-50);
    --color-action-primary-edge-bottom: var(--color-purple-400);

    /* Secondary and transparent action */
    --color-action-secondary-bg: var(--color-neutral-100);
    --color-action-secondary-bg-hover: var(--color-neutral-200);
    --color-action-secondary-bg-active: var(--color-neutral-300);
    --color-action-secondary-bg-disabled: var(--color-action-secondary-bg);
    --color-action-secondary-content: var(--color-neutral-950);
    --color-action-secondary-edge-top: var(--color-white);
    --color-action-secondary-edge-bottom: var(--color-neutral-500);
    --color-action-transparent-content: var(--color-slate-600);
    --color-action-transparent-disabled: var(--color-neutral-650);

    /* Danger action */
    --color-action-danger-bg: var(--color-red-500);
    --color-action-danger-bg-hover: var(--color-red-600);
    --color-action-danger-bg-active: var(--color-red-700);
    --color-action-danger-bg-disabled: var(--color-action-danger-bg);
    --color-action-danger-content: var(--color-white);
    --color-action-danger-edge-top: var(--color-red-200);
    --color-action-danger-edge-bottom: var(--color-red-600);

    /* Inputs and selection */
    --color-input-bg: var(--color-white);
    --color-input-bg-disabled: var(--color-neutral-100);
    --color-input-text: var(--color-neutral-950);
    --color-input-placeholder: var(--color-slate-600);
    --color-selection-bg: var(--color-neutral-825);
    --color-selection-content: var(--color-white);
    --color-toggle-active: var(--color-purple-600);
    --color-toggle-active-hover: var(--color-purple-700);

    /* Status pills */
    --color-status-neutral-bg: var(--color-neutral-200);
    --color-status-neutral-content: var(--color-slate-700);
    --color-status-review-bg: var(--color-purple-150);
    --color-status-review-content: var(--color-purple-800);
    --color-status-success-bg: var(--color-green-50);
    --color-status-success-content: var(--color-green-700);
    --color-status-warning-bg: var(--color-yellow-50);
    --color-status-warning-content: var(--color-yellow-700);
    --color-status-danger-bg: var(--color-red-100);
    --color-status-danger-content: var(--color-red-400);
    --color-status-info-bg: var(--color-purple-150);
    --color-status-info-content: var(--color-purple-800);

    /* Learning data */
    --color-data-review: var(--color-purple-700);
    --color-data-review-gain: var(--color-purple-600);
    --color-data-new: var(--color-green-600);
    --color-data-new-gain: var(--color-green-800);
    --color-data-reading: var(--color-orange-500);
    --color-data-reading-gain: var(--color-orange-800);

    /* Effects */
    --color-shadow-soft: var(--color-black-alpha-12);
    --color-shadow-control: var(--color-black-alpha-12);
    --color-highlight-soft: var(--color-white-alpha-50);
    --color-highlight-disabled: var(--color-white-alpha-08);
    --color-glass-border: var(--color-neutral-300);
}

:root[data-theme="dark"] {
    --color-bg-canvas: var(--color-neutral-975);
    --color-bg-canvas-plain: var(--color-neutral-975);
    --color-bg-surface: var(--color-neutral-950);
    --color-bg-surface-subtle: var(--color-neutral-925);
    --color-bg-surface-elevated: var(--color-neutral-925);
    --color-bg-card: var(--color-glass-dark-52);
    --color-bg-card-hover: var(--color-neutral-850);
    --color-bg-overlay: var(--color-black-alpha-40);

    --color-text-primary: var(--color-neutral-300);
    --color-text-secondary: var(--color-slate-400);
    --color-text-muted: var(--color-slate-400);
    --color-text-support: var(--color-slate-650);
    --color-text-disabled: var(--color-neutral-650);
    --color-text-inverse: var(--color-neutral-950);
    --color-text-accent: var(--color-purple-500);
    --color-text-link: var(--color-purple-500);
    --color-text-link-hover: var(--color-purple-400);
    --color-text-success: var(--color-green-300);
    --color-text-danger: var(--color-red-300);
    --color-icon-secondary: var(--color-neutral-600);

    --color-border-default: var(--color-neutral-850);
    --color-border-subtle: var(--color-neutral-925);
    --color-border-strong: var(--color-neutral-800);
    --color-border-input-active: var(--color-neutral-600);
    --color-border-focus: var(--color-purple-600);
    --color-focus-ring: var(--color-purple-alpha-22);
    --color-divider: var(--color-neutral-850);

    --color-action-primary-bg: var(--color-purple-800);
    --color-action-primary-bg-hover: var(--color-purple-850);
    --color-action-primary-bg-active: var(--color-purple-900);
    --color-action-primary-bg-disabled: var(--color-action-primary-bg);
    --color-action-primary-content: var(--color-white);
    --color-action-primary-edge-top: var(--color-purple-700);
    --color-action-primary-edge-bottom: var(--color-purple-850);

    --color-action-secondary-bg: var(--color-neutral-850);
    --color-action-secondary-bg-hover: var(--color-neutral-925);
    --color-action-secondary-bg-active: var(--color-neutral-925);
    --color-action-secondary-bg-disabled: var(--color-action-secondary-bg);
    --color-action-secondary-content: var(--color-neutral-300);
    --color-action-secondary-edge-top: var(--color-neutral-800);
    --color-action-secondary-edge-bottom: var(--color-neutral-925);
    --color-action-transparent-content: var(--color-neutral-600);
    --color-action-transparent-disabled: var(--color-neutral-650);

    --color-action-danger-bg: var(--color-red-750);
    --color-action-danger-bg-hover: var(--color-red-800);
    --color-action-danger-bg-active: var(--color-red-900);
    --color-action-danger-bg-disabled: var(--color-action-danger-bg);
    --color-action-danger-content: var(--color-white);
    --color-action-danger-edge-top: var(--color-red-500);
    --color-action-danger-edge-bottom: var(--color-red-900);

    --color-input-bg: var(--color-neutral-950);
    --color-input-bg-disabled: var(--color-neutral-925);
    --color-input-text: var(--color-neutral-300);
    --color-input-placeholder: var(--color-neutral-600);
    --color-selection-bg: var(--color-white);
    --color-selection-content: var(--color-neutral-950);
    --color-toggle-active: var(--color-purple-600);
    --color-toggle-active-hover: var(--color-purple-500);

    /* Status pills invert their light-theme foreground/surface relationship. */
    --color-status-neutral-bg: var(--color-slate-700);
    --color-status-neutral-content: var(--color-neutral-200);
    --color-status-review-bg: var(--color-purple-800);
    --color-status-review-content: var(--color-purple-150);
    --color-status-success-bg: var(--color-green-700);
    --color-status-success-content: var(--color-green-50);
    --color-status-warning-bg: var(--color-yellow-700);
    --color-status-warning-content: var(--color-yellow-50);
    --color-status-danger-bg: var(--color-red-400);
    --color-status-danger-content: var(--color-red-100);
    --color-status-info-bg: var(--color-purple-800);
    --color-status-info-content: var(--color-purple-150);

    --color-shadow-soft: var(--color-black-alpha-40);
    --color-shadow-control: var(--color-black-alpha-40);
    --color-highlight-soft: var(--color-white-alpha-08);
    --color-highlight-disabled: var(--color-white-alpha-08);
    --color-glass-border: var(--color-white-alpha-08);
}