/* ==========================================================================
   CB Design System
   Design Tokens
   Version: 1.0.0
   ========================================================================== */

:root {

    /* ==========================================================
       Typography
    ========================================================== */

    --font-base: "Peyda", system-ui, sans-serif;

    --font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;
    
    /* ==========================================================
   Font Size
========================================================== */

--text-xs: .75rem;
--text-sm: .875rem;
--text-md: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;


/* ==========================================================
   Font Weight
========================================================== */

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


/* ==========================================================
   Line Height
========================================================== */

--leading-tight: 1.2;
--leading-normal: 1.5;
--leading-relaxed: 1.7;


    /* ==========================================================
       Brand Colors
    ========================================================== */

    --color-brand: #22C55E;
    --color-brand-hover: #16A34A;
    --color-brand-soft: #DCFCE7;


    /* ==========================================================
       Surface
    ========================================================== */

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


    /* ==========================================================
       Text
    ========================================================== */

    --color-text: #111827;
    --color-text-soft: #6B7280;
    --color-text-disabled: #9CA3AF;


    /* ==========================================================
       Border
    ========================================================== */

    --color-border: #E5E7EB;


    /* ==========================================================
       Status
    ========================================================== */

    --color-success: #16A34A;
    --color-warning: #F59E0B;
    --color-danger: #DC2626;
    --color-info: #2563EB;


    /* ==========================================================
       Radius
    ========================================================== */

    --radius-xs: .5rem;
    --radius-sm: .75rem;
    --radius-md: 1rem;
    --radius-lg: 1.5rem;
    --radius-xl: 2rem;
    --radius-full: 999rem;


    /* ==========================================================
       Shadow
    ========================================================== */

    --shadow-sm: 0 2px 8px rgba(15,23,42,.06);

    --shadow-md: 0 8px 24px rgba(15,23,42,.08);

    --shadow-lg: 0 20px 48px rgba(15,23,42,.12);


    /* ==========================================================
       Space
    ========================================================== */

    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;

/* ==========================================================
   Component Size
========================================================== */

--control-sm: 2.5rem;
--control-md: 3rem;
--control-lg: 3.5rem;

    /* ==========================================================
       Container
    ========================================================== */

    --container: 80rem;


    /* ==========================================================
       Motion
    ========================================================== */

    --transition-fast: .2s ease;

    --transition-base: .3s ease;

    --transition-slow: .45s ease;

/* ==========================================================
   Focus
========================================================== */

--focus-ring:
    0 0 0 .1875rem rgba(34, 197, 94, .18);

    /* ==========================================================
       Layer
    ========================================================== */

    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal: 400;
    --z-toast: 500;
    --z-tooltip: 600;

}