/* Design tokens: colors, typography, spacing, shadows */

:root {
    /* Brand */
    --teal: #2596be;
    --teal-600: #1f82a8;
    --blue: #4686b4;
    --blue-600: #3a7099;
    --accent: #f5a623;

    /* Surfaces */
    --bg: #eef4f8;
    --bg-2: #e3eef4;
    --paper: #ffffff;
    --glass: rgba(255, 255, 255, 0.72);
    --glass-strong: rgba(255, 255, 255, 0.88);

    /* Ink */
    --ink: #15252f;
    --ink-soft: #3c5260;
    --muted: #6b8190;
    --line: rgba(70, 134, 180, 0.16);
    --line-strong: rgba(70, 134, 180, 0.3);

    /* Semantic */
    --success: #18996b;
    --success-soft: rgba(24, 153, 107, 0.12);
    --danger: #d65a5a;
    --danger-soft: rgba(214, 90, 90, 0.12);

    /* Effects */
    --radius-sm: 12px;
    --radius: 18px;
    --radius-lg: 26px;
    --radius-full: 999px;

    --shadow-sm: 0 4px 14px rgba(21, 37, 47, 0.06);
    --shadow: 0 18px 40px -18px rgba(21, 60, 82, 0.32);
    --shadow-lg: 0 40px 80px -30px rgba(21, 60, 82, 0.45);
    --shadow-glow: 0 0 0 4px rgba(37, 150, 190, 0.14);

    --grad-brand: linear-gradient(120deg, var(--teal), var(--blue));
    --grad-brand-soft: linear-gradient(120deg, rgba(37, 150, 190, 0.16), rgba(70, 134, 180, 0.16));

    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    --font: "Kalameh", Tahoma, Arial, sans-serif;
}