/*
==================================================
DAVID JOURNAL
DESIGN SYSTEM FOUNDATION
==================================================
*/

:root {

    /* Brand */

    --dj-primary: #00c896;
    --dj-primary-dark: #00a97e;
    --dj-accent: #4f46e5;

    /* Neutrals */

    --dj-white: #ffffff;

    --dj-text: #111827;
    --dj-text-soft: #374151;
    --dj-text-light: #6b7280;

    --dj-border: #e5e7eb;
    --dj-border-soft: #f3f4f6;

    --dj-surface: #f8fafc;
    --dj-surface-alt: #f1f5f9;

    /* Shadows */

    --shadow-xs: 0 2px 8px rgba(0, 0, 0, .04);
    --shadow-sm: 0 8px 24px rgba(0, 0, 0, .06);
    --shadow-md: 0 20px 60px rgba(0, 0, 0, .08);
    --shadow-lg: 0 35px 100px rgba(0, 0, 0, .12);

    /* Radius */

    --radius-sm: 12px;
    --radius-md: 24px;
    --radius-lg: 36px;
    --radius-xl: 48px;

    /* Typography */

    --font-heading: Inter, system-ui, sans-serif;
    --font-body: Inter, system-ui, sans-serif;

    /* Layout */

    --container-width: 1280px;

    /* Motion */

    --transition-fast: .25s ease;
    --transition: .35s ease;
    --transition-slow: .6s ease;
}

/*
==================================================
RESET
==================================================
*/

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {

    margin: 0;
    padding: 0;

    min-height: 100vh;

    overflow-x: hidden;

    font-family: var(--font-body);

    color: var(--dj-text);

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fcfcfd 100%
        );

    text-rendering: optimizeLegibility;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    line-height: 1.7;
}

/*
==================================================
MEDIA
==================================================
*/

img,
picture,
video,
canvas,
svg {

    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

/*
==================================================
LINKS
==================================================
*/

a {

    color: inherit;

    text-decoration: none;

    transition: var(--transition-fast);
}

/*
==================================================
LISTS
==================================================
*/

ul,
ol {

    margin: 0;
    padding: 0;

    list-style: none;
}

/*
==================================================
TYPOGRAPHY
==================================================
*/

h1,
h2,
h3,
h4,
h5,
h6 {

    margin: 0;

    color: var(--dj-text);

    font-family: var(--font-heading);

    font-weight: 800;

    letter-spacing: -0.06em;
}

h1 {

    font-size: clamp(
        3.5rem,
        5vw,
        5.5rem
    );

    line-height: .92;
}

h2 {

    font-size: clamp(
        2.5rem,
        3.5vw,
        4rem
    );

    line-height: .95;
}

h3 {

    font-size: clamp(
        1.5rem,
        2vw,
        2rem
    );

    line-height: 1.1;
}

h4,
h5,
h6 {

    line-height: 1.2;
}

p {

    margin: 0;

    font-size: 1.05rem;

    line-height: 1.8;

    color: var(--dj-text-light);
}

strong {
    color: var(--dj-text);
}

/*
==================================================
LAYOUT
==================================================
*/

.dj-container {

    width: min(
        calc(100% - 80px),
        var(--container-width)
    );

    margin-inline: auto;
}

section {
    position: relative;
}

/*
==================================================
FORMS
==================================================
*/

input,
textarea,
select,
button {

    font: inherit;
}

button {

    border: 0;

    background: none;

    cursor: pointer;
}

/*
==================================================
UTILITY CLASSES
==================================================
*/

.dj-glass {

    background:
        rgba(255,255,255,.75);

    backdrop-filter:
        blur(20px);

    -webkit-backdrop-filter:
        blur(20px);
}

.dj-shadow {
    box-shadow: var(--shadow-md);
}

.dj-radius {
    border-radius: var(--radius-lg);
}

/*
==================================================
FOCUS
==================================================
*/

:focus-visible {

    outline: 2px solid var(--dj-primary);

    outline-offset: 4px;
}

/*
==================================================
TEXT SELECTION
==================================================
*/

::selection {

    background:
        rgba(0,200,150,.18);

    color:
        var(--dj-text);
}

/*
==================================================
SCROLLBAR
==================================================
*/

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f3f4f6;
}

::-webkit-scrollbar-thumb {

    background: #d1d5db;

    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--dj-primary);
}