/* ==========================================================
   Pinch Reservoir
   Design Variables
   Version: v0.2.0
   ========================================================== */

:root {

    /* Colours */

    --color-primary: #007AFF;
    --color-primary-light: #5AC8FA;

    --color-background: #F2F2F7;
    --color-surface: #FFFFFF;

    --color-text: #1C1C1E;
    --color-text-secondary: #6E6E73;

    --color-border: #E5E5EA;

    /* Water */

    --water-top: #73D6FF;
    --water-middle: #2FA8FF;
    --water-bottom: #007AFF;

    /* Success / Warning */

    --color-success: #34C759;
    --color-warning: #FF9F0A;
    --color-danger: #FF453A;

    /* Typography */

    --font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    --font-title: 2.2rem;
    --font-heading: 1.1rem;
    --font-body: 1rem;
    --font-small: .9rem;

    /* Spacing */

    --space-xs: .4rem;
    --space-sm: .75rem;
    --space-md: 1.25rem;
    --space-lg: 2rem;
    --space-xl: 3rem;

    /* Radius */

    --radius-small: 12px;
    --radius-medium: 20px;
    --radius-large: 28px;

    /* Shadows */

    --shadow-card:
        0 12px 30px rgba(0,0,0,.08);

    --shadow-hover:
        0 20px 40px rgba(0,0,0,.12);

    /* Animation */

    --transition:
        .25s ease;

}

/* ==========================================================
   Dark Mode
   ========================================================== */

@media (prefers-color-scheme: dark){

:root{

    --color-background:#000;

    --color-surface:#1C1C1E;

    --color-text:#F2F2F7;

    --color-text-secondary:#AEAEB2;

    --color-border:#3A3A3C;

}

}