/* ==========================================================
   Zoothy Design Tokens v1.0
   ----------------------------------------------------------
   DO NOT USE HARD-CODED VALUES IN CSS.
   Always use these variables.
========================================================== */

:root {

    /* ======================================================
       COLORS
    ====================================================== */

    --z-primary: #2563EB;
    --z-primary-hover: #1D4ED8;

    --z-background: #FCFCFD;
    --z-surface: #FFFFFF;

    --z-text: #111827;
    --z-text-secondary: #6B7280;

    --z-border: #E5E7EB;

    --z-success: #16A34A;
    --z-warning: #D97706;
    --z-danger: #DC2626;


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

    --z-font-family: "Inter", sans-serif;

    /* Page Title */
    --z-font-title-size: 32px;
    --z-font-title-weight: 700;

    /* Labels */
    --z-font-label-size: 14px;
    --z-font-label-weight: 600;

    /* Body / Inputs / Buttons */
    --z-font-body-size: 16px;
    --z-font-body-weight: 400;

    /* Line Heights */
    --z-line-height-title: 1.2;
    --z-line-height-body: 1.6;


    /* ======================================================
       FIELD WIDTHS
    ====================================================== */

    --z-field-small: 180px;
    --z-field-medium: 320px;
    --z-field-large: 480px;
    --z-field-full: 100%;


    /* ======================================================
       COMPONENT HEIGHTS
    ====================================================== */

    --z-input-height: 48px;
    --z-button-height: 48px;


    /* ======================================================
       SPACING (8px Grid)
    ====================================================== */

    --z-space-1: 4px;
    --z-space-2: 8px;
    --z-space-3: 16px;
    --z-space-4: 24px;
    --z-space-5: 32px;
    --z-space-6: 40px;
    --z-space-7: 48px;
    --z-space-8: 64px;
    --z-space-9: 80px;


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

    --z-page-max-width: 960px;

    --z-label-gap: 8px;

    --z-field-gap: 16px;

    --z-section-gap: 48px;


    /* ======================================================
       BORDER RADIUS
    ====================================================== */

    --z-radius-sm: 6px;
    --z-radius-md: 10px;
    --z-radius-lg: 14px;


    /* ======================================================
       BORDERS
    ====================================================== */

    --z-border-width: 1px;


    /* ======================================================
       SHADOWS
    ====================================================== */

    --z-shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.04);

    --z-shadow-md: 0 8px 20px rgba(15, 23, 42, 0.06);


    /* ======================================================
       ANIMATION
    ====================================================== */

    --z-transition-fast: 150ms ease;

    --z-transition: 180ms ease;

    --z-transition-slow: 250ms ease;

}