/* ============================================================
   DM Suite Default Theme — Pale Dark Blue Theme
   ============================================================ */

@font-face {
  font-family: "0xProto";
  src: url("/fonts/0xProto-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "0xProto";
  src: url("/fonts/0xProto-Bold.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "0xProto";
  src: url("/fonts/0xProto-Italic.woff2") format("woff2");
  font-weight: normal;
  font-style: italic;
  font-display: block;
}

body {
     padding-top: env(safe-area-inset-top);
}

:root {
    .theme {
        font-family: "0xProto", monospace, system-ui, -apple-mono, sans-serif;
        background-color: var(--bg-primary);
        color: var(--text-primary);
        line-height: 1.6;
        transition: background-color 0.2s ease, color 0.2s ease;

        button {
            font-family: inherit;
        }
    }

    /* --- Palletes --- */
    /* Pale Blue */
    --color-blue-50: #f0f7ff;
    --color-blue-100: #e0efff;
    --color-blue-200: #bfe0ff;
    --color-blue-300: #8fc4ff;
    --color-blue-400: #5fa3ff;
    --color-blue-500: #3a7fd8;
    --color-blue-600: #2a6bb3;
    --color-blue-700: #22558f;
    --color-blue-800: #1e4473;
    --color-blue-900: #1a385c;

    /* Slate */
    --color-slate-50: #f8f9fa;
    --color-slate-100: #e9ecef;
    --color-slate-200: #dee2e6;
    --color-slate-300: #ced4da;
    --color-slate-400: #adb5bd;
    --color-slate-500: #868e96;
    --color-slate-600: #6c757d;
    --color-slate-700: #495057;
    --color-slate-800: #343a40;
    --color-slate-900: #212529;

    /* Ice Green */
    --color-ice-50: #f0faf6;
    --color-ice-100: #dff3ec;
    --color-ice-200: #bfe7da;
    --color-ice-300: #93d4c2;
    --color-ice-400: #5fb9a4;
    --color-ice-500: #3a9d88;
    --color-ice-600: #2a7d6e;
    --color-ice-700: #226358;
    --color-ice-800: #1e4f47;
    --color-ice-900: #1a413c;

    /* Blood Coral */
    --color-coral-50: #fff5f3;
    --color-coral-100: #ffe4dd;
    --color-coral-200: #ffc4b3;
    --color-coral-300: #ff9e80;
    --color-coral-400: #ff7e67;
    --color-coral-500: #ff5c4d;
    --color-coral-600: #e04838;
    --color-coral-700: #bf3628;
    --color-coral-800: #9d2a1e;
    --color-coral-900: #822016;

    /* Violet */
    --color-violet-50: #f5f0ff;
    --color-violet-100: #ebe0ff;
    --color-violet-200: #d6c2ff;
    --color-violet-300: #b89aff;
    --color-violet-400: #9a72ff;
    --color-violet-500: #7c4dff;
    --color-violet-600: #6633cc;
    --color-violet-700: #5226a3;
    --color-violet-800: #3e1d80;
    --color-violet-900: #2e1560;

    /* Yellow */
    --color-yellow-50: #fffdf5;
    --color-yellow-100: #fef9e7;
    --color-yellow-200: #fdf0c4;
    --color-yellow-300: #fbe492;
    --color-yellow-400: #f9d44f;
    --color-yellow-500: #f0c020;
    --color-yellow-600: #d4a518;
    --color-yellow-700: #a8800f;
    --color-yellow-800: #7c5e0a;
    --color-yellow-900: #5c4506;
}

/* --- Light Variant --- */
:root,
[data-theme="light"] {
    .theme-default {
        --bg-header: #0d1b2a;

        /* Semantic Surfaces */
        --bg-primary: #f5f8ff;
        --bg-secondary: #ebf2ff;
        --bg-tertiary: #f0f2f5;
        --bg-elevated: #ffffff;
        --bg-overlay: rgba(245, 248, 255, 0.85);

        /* Text */
        --text-primary: #1a2a3a;
        --text-secondary: #3d5a7a;
        --text-muted: #6e8a9d;
        --text-inverse: var(--color-blue-50);

        /* Borders & Dividers */
        --border-default: #c2d2e2;
        --border-subtle: var(--color-blue-100);
        --border-strong: var(--color-blue-300);

        /* Accent (Primary Action) */
        --accent: var(--color-blue-600);
        --accent-hover: var(--color-blue-700);
        --accent-light: var(--color-blue-100);
        --accent-text: #ffffff;

        /* Secondary Accent */
        --accent-secondary: var(--color-slate-400);
        --accent-secondary-hover: var(--color-slate-600);
        --accent-secondary-text: #ebf2ff;
        --accent-secondary-light: var(--color-slate-200);

        /* Data Visualization */
        --chart-line-1: var(--color-blue-500);
        --chart-line-2: var(--color-blue-400);
        --chart-line-3: var(--color-slate-500);
        --chart-line-4: var(--color-slate-400);
        --chart-fill-1: rgba(58, 127, 216, 0.15);
        --chart-fill-2: rgba(95, 163, 255, 0.15);
        --chart-grid: #e8eff5;

        /* Shadows */
        --shadow-sm: 1px 1px 2px rgb(26, 65, 100);
        --shadow-md: 2px 4px 8px rgb(26, 65, 100);
        --shadow-lg: 4px 8px 24px rgb(26, 65, 100);

        /* Focus Ring */
        --focus-ring: 0 0 0 2px var(--accent-light),
            0 0 0 4px var(--accent);
    }

    .theme-finance {
        --bg-header: #0f1f1c;

        /* Semantic Surfaces */
        --bg-primary: #f4faf7;
        --bg-secondary: #eaf5f0;
        --bg-tertiary: #f0f0f6;
        --bg-elevated: #ffffff;
        --bg-overlay: rgba(244, 250, 247, 0.85);

        /* Text */
        --text-primary: #1a3a32;
        --text-secondary: #3d6b5e;
        --text-muted: #6e9a8d;
        --text-inverse: #f0faf6;

        /* Borders & Dividers */
        --border-default: #c2ddd2;
        --border-subtle: #dff3ec;
        --border-strong: #93d4c2;

        /* Accent (Primary Action) */
        --accent: #2a7d6e;
        --accent-hover: #226358;
        --accent-light: #dff3ec;
        --accent-text: #ffffff;

        /* Secondary Accent */
        --accent-secondary: var(--color-coral-400);
        --accent-secondary-hover: var(--color-coral-600);
        --accent-secondary-text: #eaf5f0;
        --accent-secondary-light: var(--color-coral-100);

        /* Data Visualization */
        --chart-line-1: #3a9d88;
        --chart-line-2: #ff5c4d;
        --chart-line-3: #5fb9a4;
        --chart-line-4: #ff9e80;
        --chart-fill-1: rgba(58, 157, 136, 0.15);
        --chart-fill-2: rgba(255, 92, 77, 0.15);
        --chart-grid: #e0efe8;

        /* Shadows */
        --shadow-sm: 1px 1px 2px rgb(26, 65, 60);
        --shadow-md: 2px 4px 8px rgb(26, 65, 60);
        --shadow-lg: 4px 8px 24px rgb(26, 65, 60);

        /* Focus Ring */
        --focus-ring: 0 0 0 2px var(--accent-light), 0 0 0 4px var(--accent);
    }

    .theme-trainer {
        --bg-header: #14102e;

        /* Semantic Surfaces */
        --bg-primary: #f8f5ff;
        --bg-secondary: #efe8ff;
        --bg-tertiary: #f0f0f6;
        --bg-elevated: #ffffff;
        --bg-overlay: rgba(248, 245, 255, 0.85);

        /* Text */
        --text-primary: #2a1d52;
        --text-secondary: #4d3a7a;
        --text-muted: #8070a8;
        --text-inverse: #f5f0ff;

        /* Borders & Dividers */
        --border-default: #c4bce2;
        --border-subtle: #ebe0ff;
        --border-strong: #b89aff;

        /* Accent (Primary Action) */
        --accent: #6633cc;
        --accent-hover: #5226a3;
        --accent-light: #ebe0ff;
        --accent-text: #ffffff;

        /* Secondary Accent */
        --accent-secondary: var(--color-yellow-600);
        --accent-secondary-hover: var(--color-yellow-700);
        --accent-secondary-text: #efe8ff;
        --accent-secondary-light: var(--color-yellow-200);

        /* Data Visualization */
        --chart-line-1: #7c4dff;
        --chart-line-2: #f9d44f;
        --chart-line-3: #9a72ff;
        --chart-line-4: #fbe492;
        --chart-fill-1: rgba(124, 77, 255, 0.15);
        --chart-fill-2: rgba(249, 212, 79, 0.15);
        --chart-grid: #ece5f5;

        /* Shadows */
        --shadow-sm: 1px 1px 2px rgb(46, 21, 96);
        --shadow-md: 2px 4px 8px rgb(46, 21, 96);
        --shadow-lg: 4px 8px 24px rgb(46, 21, 96);

        /* Focus Ring */
        --focus-ring: 0 0 0 2px var(--accent-light), 0 0 0 4px var(--accent);
    }

    /* Status */
    --color-success: #2a8a5e;
    --color-success-bg: #e0f5eb;
    --color-warning: #b08930;
    --color-warning-bg: #fdf5e0;
    --color-danger: #b04040;
    --color-danger-bg: #fde8e8;
    --color-info: #3a7fd8;
    --color-info-bg: #d9e7f7;

    --chart-negative: #b04040;
    --chart-positive: #2a8a5e;
}

/* --- Dark Variant --- */
[data-theme="dark"] {
    .theme-default {
        /* Semantic Surfaces */
        --bg-primary: #0d1b2a;
        --bg-secondary: #14273a;
        --bg-tertiary: #1a364a;
        --bg-elevated: #1e3f5a;
        --bg-overlay: rgba(13, 27, 42, 0.90);

        /* Text */
        --text-primary: #e8f0f7;
        --text-secondary: #a8bccf;
        --text-muted: #5e7a8d;
        --text-inverse: #1a2a3a;

        /* Borders & Dividers */
        --border-default: #2a4a6a;
        --border-subtle: #1e3f5a;
        --border-strong: #3a6b8a;

        /* Accent (Primary Action) */
        --accent: var(--color-blue-400);
        --accent-active: var(--color-blue-600);
        --accent-hover: #78b3ff;
        --accent-light: #1e3f5a;
        --accent-text: #0d1b2a;

        /* Secondary Accent */
        --accent-secondary: var(--color-slate-500);
        --accent-secondary-active: var(--color-slate-700);
        --accent-secondary-hover: var(--color-slate-400);
        --accent-secondary-text: #14273a;
        --accent-secondary-light: var(--color-slate-700);

        /* Data Visualization */
        --chart-line-1: var(--color-blue-400);
        --chart-line-2: var(--color-blue-500);
        --chart-line-3: var(--color-blue-300);
        --chart-line-4: var(--color-slate-400);
        --chart-fill-1: rgba(95, 163, 255, 0.18);
        --chart-fill-2: rgba(58, 127, 216, 0.18);
        --chart-grid: #1e3f5a;

        /* Shadows */
        --shadow-sm: 2px 2px 4px rgba(0, 0, 0);
        --shadow-md: 2px 4px 8px rgba(0, 0, 0);
        --shadow-lg: 4px 8px 24px rgba(0, 0, 0);

        /* Focus Ring */
        --focus-ring: 0 0 0 2px var(--accent-light), 0 0 0 4px var(--accent);
    }

    .theme-finance {
        /* Semantic Surfaces */
        --bg-primary: #0f1f1c;
        --bg-secondary: #162b27;
        --bg-tertiary: #1a3632;
        --bg-elevated: #1e3f3a;
        --bg-overlay: rgba(15, 31, 28, 0.90);

        /* Text */
        --text-primary: #e0f0ea;
        --text-secondary: #a8cfc2;
        --text-muted: #5e8a73;
        --text-inverse: #1a3a32;

        /* Borders & Dividers */
        --border-default: #2a4f46;
        --border-subtle: #1e3f3a;
        --border-strong: #3a6b5e;

        /* Accent (Primary Action) */
        --accent: #5fb9a4;
        --accent-active: var(--color-ice-600);
        --accent-hover: #78ccba;
        --accent-light: #1e3f3a;
        --accent-text: #0f1f1c;

        /* Secondary Accent */
        --accent-secondary: var(--color-coral-500);
        --accent-secondary-active: var(--color-coral-800);
        --accent-secondary-hover: var(--color-coral-400);
        --accent-secondary-text: var(--accent-text);
        --accent-secondary-light: #531410;

        /* Data Visualization */
        --chart-line-1: #5fb9a4;
        --chart-line-2: #ff7e67;
        --chart-line-3: #93d4c2;
        --chart-line-4: #ff5c4d;
        --chart-fill-1: rgba(95, 185, 164, 0.18);
        --chart-fill-2: rgba(255, 126, 103, 0.18);
        --chart-grid: #1e3f3a;

        /* Shadows */
        --shadow-sm: 2px 2px 4px rgba(0, 0, 0);
        --shadow-md: 2px 4px 8px rgba(0, 0, 0);
        --shadow-lg: 4px 8px 24px rgba(0, 0, 0);

        /* Focus Ring */
        --focus-ring: 0 0 0 2px var(--accent-light), 0 0 0 4px var(--accent);
    }

    .theme-trainer {
        /* Semantic Surfaces */
        --bg-primary: #14102e;
        --bg-secondary: #1a1739;
        --bg-tertiary: #25204a;
        --bg-elevated: #2d2858;
        --bg-overlay: rgba(20, 16, 46, 0.90);

        /* Text */
        --text-primary: #ece5ff;
        --text-secondary: #b8afe0;
        --text-muted: #7d70a8;
        --text-inverse: #2a1d52;

        /* Borders & Dividers */
        --border-default: #3a3470;
        --border-subtle: #2d2858;
        --border-strong: #5246a0;

        /* Accent (Primary Action) */
        --accent: #9a72ff;
        --accent-active: var(--color-violet-500);
        --accent-hover: #ae8aff;
        --accent-light: #2d2858;
        --accent-text: #14102e;

        /* Secondary Accent */
        --accent-secondary: var(--color-yellow-800);
        --accent-secondary-active: var(--color-yellow-900);
        --accent-secondary-hover: var(--color-yellow-700);
        --accent-secondary-text: var(--accent-text);
        --accent-secondary-light: rgba(249, 212, 79, 0.15);

        /* Data Visualization */
        --chart-line-1: #9a72ff;
        --chart-line-2: #f9d44f;
        --chart-line-3: #b89aff;
        --chart-line-4: #fbe492;
        --chart-fill-1: rgba(154, 114, 255, 0.18);
        --chart-fill-2: rgba(249, 212, 79, 0.18);
        --chart-grid: #2d2858;

        /* Shadows */
        --shadow-sm: 2px 2px 4px rgba(0, 0, 0);
        --shadow-md: 2px 4px 8px rgba(0, 0, 0);
        --shadow-lg: 4px 8px 24px rgba(0, 0, 0);

        /* Focus Ring */
        --focus-ring: 0 0 0 2px var(--accent-light), 0 0 0 4px var(--accent);
    }

    /* Status */
    --color-success: #5fbf8a;
    --color-success-bg: #1a3632;
    --color-warning: #d4a843;
    --color-warning-bg: #2a2818;
    --color-danger: #d46060;
    --color-danger-bg: #2a1818;
    --color-info: #59add4;
    --color-info-bg: #1e3a4f;

    --chart-negative: #d46060;
    --chart-positive: #5fbf8a;
}