/* ============================================================
   Kinn Design Tokens
   ============================================================ */

/* --- Fonts --- */

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

@font-face {
    font-family: "JetBrains Mono";
    src: url("../fonts/JetBrainsMono-VariableFont_wght.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* --- Typography --- */

:root {
    --font-sans: "DM Sans", system-ui, -apple-system, sans-serif;

    --text-display-xl: 2.25rem;    /* 36px */
    --text-display-lg: 1.75rem;    /* 28px */
    --text-heading-xl: 1.5rem;     /* 24px */
    --text-heading-lg: 1.25rem;    /* 20px */
    --text-heading-md: 1.0625rem;  /* 17px */
    --text-body-lg: 0.9375rem;     /* 15px */
    --text-body-sm: 0.8125rem;     /* 13px */
    --text-label: 0.6875rem;       /* 11px */
    --text-code: 0.8125rem;        /* 13px */

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
}

/* --- Colors --- */

:root {
    /* Brand */
    --color-mint: #6BDEB4;
    --color-blue: #47A2C9;
    --color-yellow: #F4CF6C;
    --color-purple: #9149A9;

    /* Neutral */
    --color-white: #ffffff;
    --color-grey-50: #F8F8F8;
    --color-grey-100: #F0F0F0;
    --color-grey-200: #E4E4E4;
    --color-grey-300: #CACACA;
    --color-grey-400: #AAAAAA;
    --color-grey-500: #8D8D8D;
    --color-grey-700: #4F4F4F;
    --color-grey-900: #1F1D20;

    /* Semantic */
    --color-bg: var(--color-white);
    --color-surface: var(--color-grey-50);
    --color-border: var(--color-grey-200);
    --color-text: var(--color-grey-900);
    --color-text-muted: var(--color-grey-500);
    --color-primary: var(--color-purple);
    --color-primary-hover: #7A3D8F;
    --color-danger: #E05252;
    --color-success: var(--color-mint);
    --color-warning: var(--color-yellow);
    --color-info: var(--color-blue);
    --color-link: var(--color-blue);
    --color-link-hover: #2f8aae;
}

/* --- Spacing --- */

:root {
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-7: 2rem;      /* 32px */
    --space-8: 2.5rem;    /* 40px */
    --space-9: 3rem;      /* 48px */
    --space-10: 4rem;     /* 64px */
}

/* --- Border Radius --- */

:root {
    --radius-btn: 0.25rem;   /* 4px */
    --radius-sm: 0.375rem;   /* 6px */
    --radius-md: 0.625rem;   /* 10px */
    --radius-lg: 0.875rem;   /* 14px */
    --radius-xl: 1.25rem;    /* 20px */
    --radius-2xl: 1.75rem;   /* 28px */
    --radius-full: 9999px;
}

/* --- Shadows --- */

:root {
    --shadow-sm: 0 2px 6px 0 rgba(31, 28, 33, 0.14);
    --shadow-md: 0 4px 12px 0 rgba(31, 28, 33, 0.14);
    --shadow-lg: 0 8px 24px 0 rgba(31, 28, 33, 0.14);
    --shadow-focus: 0 0 0 3px rgba(145, 73, 169, 0.6);
}

/* --- Layout --- */

:root {
    --sidebar-width: 72px;
}