/**
 * DOYIL Theme - CSS Custom Properties
 *
 * Design tokens for the entire theme.
 * Reference: Mau Pets modern minimalist style.
 */

:root {
    /* ========== Colors: Primary ========== */
    --color-primary:            #2d2d2d;
    --color-primary-light:      #4a4a4a;
    --color-primary-dark:       #1a1a1a;

    /* ========== Colors: Background ========== */
    --color-bg-primary:         #ffffff;
    --color-bg-secondary:       #f8f7f5;
    --color-bg-tertiary:        #f0ede8;
    --color-bg-dark:            #1e1e1e;
    --color-bg-dark-alt:        #2a2a2a;

    /* ========== Colors: Text ========== */
    --color-text-primary:       #1a1a1a;
    --color-text-secondary:     #555555;
    --color-text-muted:         #888888;
    --color-text-light:         #ffffff;
    --color-text-light-dim:     #cccccc;

    /* ========== Colors: Accent ========== */
    --color-accent-wood:        #b8956a;
    --color-accent-wood-light:  #d4bc98;
    --color-accent-wood-dark:   #9a7b52;
    --color-accent-warm:        #e8d5c4;
    --color-accent-green:       #7a9a7e;

    /* ========== Colors: Border ========== */
    --color-border:             #e8e5e0;
    --color-border-light:       #f0ede8;
    --color-border-dark:        #3a3a3a;

    /* ========== Colors: Functional ========== */
    --color-success:            #6b9e7a;
    --color-error:              #c4544f;
    --color-info:               #7a9aae;

    /* ========== Typography: Font Families ========== */
    --font-primary:             'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-heading:             'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono:                'SF Mono', 'Fira Code', 'Consolas', monospace;

    /* ========== Typography: Font Sizes (rem) ========== */
    --text-xs:                  0.75rem;    /* 12px */
    --text-sm:                  0.875rem;   /* 14px */
    --text-base:                1rem;       /* 16px */
    --text-lg:                  1.125rem;   /* 18px */
    --text-xl:                  1.25rem;    /* 20px */
    --text-2xl:                 1.5rem;     /* 24px */
    --text-3xl:                 1.875rem;   /* 30px */
    --text-4xl:                 2.25rem;    /* 36px */
    --text-5xl:                 3rem;       /* 48px */
    --text-6xl:                 3.75rem;    /* 60px */

    /* ========== Typography: Font Weights ========== */
    --font-light:               300;
    --font-normal:              400;
    --font-medium:              500;
    --font-semibold:            600;
    --font-bold:                700;

    /* ========== Typography: Line Heights ========== */
    --leading-tight:            1.2;
    --leading-snug:             1.375;
    --leading-normal:           1.6;
    --leading-relaxed:          1.75;

    /* ========== Spacing (8px baseline) ========== */
    --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-8:                  2rem;       /* 32px */
    --space-10:                 2.5rem;     /* 40px */
    --space-12:                 3rem;       /* 48px */
    --space-16:                 4rem;       /* 64px */
    --space-20:                 5rem;       /* 80px */
    --space-24:                 6rem;       /* 96px */

    /* ========== Border Radius ========== */
    --radius-sm:                4px;
    --radius-md:                8px;
    --radius-lg:                12px;
    --radius-xl:                16px;
    --radius-full:              9999px;

    /* ========== Shadows ========== */
    --shadow-sm:                0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md:                0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-lg:                0 8px 30px rgba(0, 0, 0, 0.08);
    --shadow-xl:                0 16px 48px rgba(0, 0, 0, 0.10);

    /* ========== Transitions ========== */
    --transition-fast:          150ms ease;
    --transition-base:          250ms ease;
    --transition-slow:          400ms ease;

    /* ========== Layout ========== */
    --container-max:            1280px;
    --container-narrow:         960px;
    --container-wide:           1440px;
    --header-height:            80px;
    --header-height-mobile:     64px;

    /* ========== Z-Index Layers ========== */
    --z-dropdown:               100;
    --z-sticky:                 200;
    --z-fixed:                  300;
    --z-offcanvas:              400;
    --z-modal:                  500;
    --z-tooltip:                600;
}