/* Font faces, CSS custom properties (design tokens), resets, and base element styles. */

@font-face {
    font-family: "Mindstien Swar Notation Gujarati";
    src: url("../../fonts/MindstienSwarNotation-Regular.woff2") format("woff2"),
        url("../../fonts/MindstienSwarNotation-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Mindstien Swar Notation Hindi";
    src: url("../../fonts/MindstienSwarNotationHindi-Regular.woff2") format("woff2"),
        url("../../fonts/MindstienSwarNotationHindi-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Mindstien Swar Notation English";
    src: url("../../fonts/MindstienSwarNotationEnglish-Regular.woff2") format("woff2"),
        url("../../fonts/MindstienSwarNotationEnglish-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --page-bg: #eef2f7;
    --surface: #ffffff;
    --surface-soft: #f7f9fc;
    --surface-muted: #eef3f9;
    --border: #d8e0eb;
    --border-strong: #b7c3d4;
    --text: #172033;
    --muted: #667085;
    --accent: #1d4ed8;
    --accent-soft: #eaf0ff;
    --success: #087443;
    --danger: #b42318;
    --warning: #9a6700;
    --shadow: 0 18px 50px rgba(22, 34, 55, 0.12);
    --radius: 14px;
    --matra-font-size: 27px;
    --line-column-width: 96px;
    --notation-font-family: "Mindstien Swar Notation Gujarati";
}

:root[data-notation-lang="hindi"] {
    --notation-font-family: "Mindstien Swar Notation Hindi";
}

:root[data-notation-lang="english"] {
    --notation-font-family: "Mindstien Swar Notation English";
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    min-height: 100%;
    margin: 0;
    background: var(--page-bg);
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.45;
}

button,
input,
textarea,
select {
    font: inherit;
}

button,
select,
input,
textarea,
[contenteditable="true"] {
    outline: none;
}

button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
[contenteditable="true"]:focus-visible {
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.18);
}

[hidden] {
    display: none !important;
}