/* Shared font and theme tokens. */

@font-face {
    font-family: 'DM Sans';
    src: url('../fonts/DM_Sans/DMSans-VariableFont_opsz,wght.ttf') format('truetype-variations');
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: 'DM Sans';
    src: url('../fonts/DM_Sans/DMSans-Italic-VariableFont_opsz,wght.ttf') format('truetype-variations');
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
}

:root {
    font-family: 'DM Sans', sans-serif;

    --accent: #c0392b;
    --accent-strong: #b03025;
    --accent-soft-bg: #c0392b20;
    --accent-border: #c0392b66;

    --success: #3dba6f;
    --success-soft-bg: #3dba6f20;
    --failure: #c0392b;
    --failure-soft-bg: #c0392b20;

    --ink: #1a1a2e;
    --white: #ffffff;
    --white-soft: #f0f0f0;
    --page-light: #f5f5f7;

    --neutral-100: #111111;
    --neutral-200: #242424;
    --neutral-300: #303030;
    --neutral-400: #444444;
    --neutral-500: #555555;
    --neutral-600: #666666;
    --neutral-700: #888888;
    --neutral-800: #cccccc;
    --neutral-900: #e5e5e5;
    --neutral-950: #f3f3f3;

    --scrim: #000000c8;
    --scrim-light: #ffffffe8;
    --scrim-soft: #00000014;
    --focus-ring: #ffffff80;
    --shadow-soft: #0000001f;

    --muted: var(--neutral-700);
    --muted-strong: var(--neutral-600);
}

:root[data-theme="dark"] {
    --bg: var(--neutral-100);
    --text: var(--white);
    --text-inv: var(--neutral-100);
    --surface: var(--neutral-200);
    --surface-alt: var(--neutral-300);
    --surface-border: transparent;
    --border-line: var(--neutral-300);
    --btn-border: var(--white);
    --btn-text: var(--white);
    --btn-hover-bg: var(--white);
    --btn-hover-text: var(--neutral-100);
    --input-border: var(--neutral-500);
    --input-focus: var(--focus-ring);
    --toggle-bg: var(--neutral-400);
    --toggle-color: var(--neutral-800);
    --icon-muted: var(--toggle-color);
    --icon-strong: var(--text);
    --icon-on-dark: var(--white);
    --icon-on-danger: var(--white);
}

:root[data-theme="light"] {
    --bg: var(--page-light);
    --text: var(--ink);
    --text-inv: var(--white);
    --surface: var(--white);
    --surface-alt: var(--neutral-950);
    --surface-border: var(--neutral-900);
    --border-line: var(--neutral-900);
    --btn-border: var(--ink);
    --btn-text: var(--ink);
    --btn-hover-bg: var(--ink);
    --btn-hover-text: var(--white);
    --input-border: var(--neutral-800);
    --input-focus: var(--ink);
    --toggle-bg: var(--neutral-900);
    --toggle-color: var(--neutral-500);
    --icon-muted: var(--toggle-color);
    --icon-strong: var(--text);
    --icon-on-dark: var(--white);
    --icon-on-danger: var(--white);
}