/* Figtree and Manrope are self-hosted (variable fonts) so the app never blocks
   on fonts.googleapis.com, which is unreachable behind some networks.
   The font files include Romanian diacritics (ă â î ș ț). */

@font-face {
    font-family: "Figtree";
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url('/fonts/figtree/Figtree-VariableFont_wght.woff2') format('woff2');
}

@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('/fonts/manrope/Manrope-VariableFont_wght.woff2') format('woff2');
}

@font-face {
    font-family: "Fira Code";
    font-style: normal;
    font-weight: 300 700;
    font-display: fallback;
    src: url('/fonts/fira-code/FiraCode-VariableFont_wght.woff2') format('woff2');
}

@font-face {
    font-family: "Material Icons";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url('/fonts/material-icons/material-icons.woff2') format('woff2');
}

@font-face {
    font-family: "Material Icons Outlined";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url('/fonts/material-icons/material-icons-outlined.woff2') format('woff2');
}

/* DESIGN SYSTEM - GLOBAL CSS VARIABLES */
:root {
    /* Legacy variables (keep for backward compatibility) */
    --primary: #1d4ed8;
    --primary-hover: #1e40af;
    --text: #111827;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    --border: #e9e6f2;
    --surface: #f9fafb;
    --error: #dc2626;
    --error-bg: #fef2f2;
    --success: #059669;
    --success-bg: #f0fdf4;

    /* New design system variables (aligned with the marketing site palette) */
    --brand: #6d4aff;
    --brand-dark: #5936e4;
    --brand-light: #9d85ff;
    --brand-soft: #f1edff;
    --brand-tint: #faf8ff;

    --accent: #ec4899;

    --ink: #14121f;
    --ink-soft: #3f3b52;

    --muted: #6e6a80;
    --faint: #9d99ad;

    --bg: #fbfaff;
    --surface-2: #f5f3fb;

    --border-strong: #d9d4e8;

    --green: #129d70;
    --green-soft: #e3f8ef;

    --red: #dc3f4e;
    --red-soft: #fdeaec;

    --amber: #d97706;
    --amber-soft: #fdf1dd;

    /* Radius */
    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 24px;

    /* Pill radius (semantic usage) */
    --radius-pill: 999px;        /* Filter pills, badges, fully rounded buttons */
    --radius-pill-nav: 12px;     /* Navigation tabs, segmented controls */

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(20, 18, 31, 0.05);
    --shadow-md: 0 6px 24px -6px rgba(20, 18, 31, 0.1);
    --shadow-lg: 0 24px 70px -20px rgba(45, 28, 110, 0.25);
    --shadow-brand: 0 8px 24px -6px rgba(109, 74, 255, 0.35);

    /* Easing */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* GLOBAL TYPOGRAPHY BASE */
body {
    font-style: normal;
    font-weight: 400;
    letter-spacing: -0.1px;
    line-height: 1.4;
    font-family: Figtree, sans-serif;
}

/* GLOBAL RESET */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* MATERIAL ICONS BASE */
.material-icons {
    font-family: 'Material Icons', 'Material Icons Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

.material-icons-outlined {
    font-family: 'Material Icons Outlined', 'Material Icons';
}

/* PAGE LAYOUT COMPONENTS */
.page-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.page-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 4px 0 0;
}

/* COMMON UTILITY CLASSES */
.text-primary { color: var(--primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-error { color: var(--error); }
.text-success { color: var(--success); }

.bg-primary { background-color: var(--primary); }
.bg-surface { background-color: var(--surface); }
.bg-error { background-color: var(--error-bg); }
.bg-success { background-color: var(--success-bg); }

.border-default { border: 1px solid var(--border); }
.border-primary { border: 1px solid var(--primary); }
.border-error { border: 1px solid var(--error); }

/* Google Fonts CDN overrides: self-hosted fonts are subsetted (391 glyphs)
   and may not render all Romanian diacritics. CDN fonts are full. */
@font-face {
    font-family: "Figtree";
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url('https://fonts.gstatic.com/s/figtree/v9/_Xms-HUzqDCFdgfMq4a3CoZt.woff2') format('woff2');
}
@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRsgW7TdXc.woff2') format('woff2');
}