@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

:root {
    /* Colors - Light Theme (extracted from transhumanica.com/asts/model) */
    --color-primary: rgb(5,48,188);                    /* Header background - exact match */
    --color-background: rgb(232,234,240);              /* Page background - exact match */
    --color-text-primary: rgb(0,0,0);                  /* Primary text color - exact match */
    --color-text-secondary: rgb(75,85,99);             /* Secondary text color */
    --color-card-background: rgb(255,255,255);         /* Card/input backgrounds - exact match */
    --color-input-border: rgb(209,213,219);            /* Input border - subtle gray for modern look */
    --color-input-border-hover: rgb(156,163,175);      /* Input border hover state */
    --color-input-border-focus: rgb(5,48,188);         /* Focus state border - matches primary blue */
    --color-input-background: rgb(255,255,255);        /* Input background - exact match */
    --color-input-background-focus: rgb(255,255,255);  /* Input background on focus */
    --color-table-header-bg: rgb(238,244,253);         /* Table cell background - extracted exact */
    --color-table-border: rgb(0,0,0);                  /* Table border - extracted exact */
    --color-highlight-row-bg: rgb(243,244,246);        /* Row highlight background */
    --color-shadow: rgba(0,0,0,0.1);                   /* Shadow color */
    --color-card-border: rgb(229,231,235);             /* Card border color */

    /* Typography */
    --font-family-primary: 'DM Sans', sans-serif;
    --font-size-base: 14px;
    --font-size-sm: 0.875rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;

    /* Spacing and Layout */
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-6: 1.5rem;
    --spacing-8: 2rem;

    /* Border Radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;

    /* Transitions */
    --transition-theme: all 0.3s ease;
    --transition-colors: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
    --transition-shadow: box-shadow 0.2s ease;

    /* Legacy Variables (for backwards compatibility) */
    --dark-gray: #232a35;
    --middle-gray: #727272;
    --light-gray: #f2f2f2;
    --gray: #dadada;
    --blue: #0530bc;
    --dark-blue: #04195f;
    --light-blue: #354edb;
    --blue-bg: #eef4fd;
    --more-blue-bg: #d3dcff;
    --dark-blue-bg: #b1c0ee;
    --orange: #b28741;
    --orange-bg: #f7e5c8;
    --orange-bg-light: #f7eee0;
    --gray-text: #555;
    --theme-font-color: #232a35;
    --border-color: #d4d6dc;
    --bold-border-color: #cccccb;
    --link-color: #0530bc;
    --highlight: #0530bc;
    --pure-background-color: #fff;
    --bold-text-color: #000;
    --dropdown-shadow: 0 4px 11px rgba(0, 0, 0, 0.2);
    --indistinct-background: #d7d8dd;
    --page-color: #e8eaf0;
    --phi: 1.618;
}

[data-theme="dark"] {
    /* Colors - Dark Theme (extracted from transhumanica.com/asts/model dark mode) */
    --color-primary: rgb(18,33,83);                    /* Header background - extracted exact */
    --color-background: rgb(42,48,65);                 /* Page background - extracted exact */
    --color-text-primary: rgb(255,255,255);            /* Primary text color - extracted exact */
    --color-text-secondary: rgb(156,163,175);          /* Secondary text color */
    --color-card-background: rgb(31,33,39);            /* Card background */
    --color-input-border: rgb(75,85,99);               /* Input border - subtle gray for dark mode */
    --color-input-border-hover: rgb(107,114,128);      /* Input border hover state for dark mode */
    --color-input-border-focus: rgb(5,48,188);         /* Focus state border - consistent blue */
    --color-input-background: rgb(31,33,39);           /* Input background - matches card background */
    --color-input-background-focus: rgb(31,33,39);     /* Input background on focus for dark mode */
    --color-table-header-bg: rgb(13,23,55);            /* Table cell background - extracted exact */
    --color-table-border: rgb(255,255,255);            /* Table border - extracted exact */
    --color-highlight-row-bg: rgb(31,33,39);           /* Row highlight background */
    --color-shadow: rgba(0,0,0,0.3);                   /* Shadow color */
    --color-card-border: rgb(75,85,99);                /* Card border color for dark mode */

    /* Legacy Variables (dark theme overrides) */
    --blue: #122153;
    --dark-blue: #000;
    --light-blue: #253876;
    --lighter-blue: #3d4b99;
    --blue-bg: #131f47;
    --more-blue-bg: #0d1737;
    --gray-text: #818695;
    --light-gray: #272931;
    --gray: #525664;
    --theme-font-color: #dadada;
    --border-color: #232632;
    --bold-border-color: #46539d;
    --link-color: #b1c0ee;
    --highlight: #fff;
    --pure-background-color: #000;
    --bold-text-color: #fff;
    --dropdown-shadow: 0 4px 11px #253876;
    --indistinct-background: #3c445c;
    --page-color: #2a3041;
}