.yeketo-site {

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

    --yekto-color-primary: #6c5ce7;
    --yekto-color-primary-hover: #5b4bd8;
    --yekto-color-primary-light: #f2f0ff;

    --yekto-color-secondary: #00cfef;
    --yekto-color-secondary-light: #e9fbfe;

    --yekto-color-accent: #ffb000;
    --yekto-color-accent-light: #fff7e0;


    /* =========================
       Semantic Colors
    ========================== */

    --yekto-color-success: #22c55e;
    --yekto-color-success-light: #ecfdf3;

    --yekto-color-error: #ef4444;
    --yekto-color-error-light: #fef2f2;


    /* =========================
       Backgrounds
    ========================== */

    --yekto-color-background: #ffffff;
    --yekto-color-surface: #f8f9fc;
    --yekto-color-surface-soft: #f3f5f9;


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

    --yekto-color-text: #171923;
    --yekto-color-text-secondary: #4b5563;
    --yekto-color-text-muted: #7b8493;


    /* =========================
       Borders
    ========================== */

    --yekto-color-border: #e5e7eb;
    --yekto-color-border-strong: #d1d5db;


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

    --yekto-font-primary:  inherit;

    --yekto-font-size-xs: 0.875rem;
    --yekto-font-size-sm: 0.9375rem;
    --yekto-font-size-base: 1rem;
    --yekto-font-size-lg: 1.125rem;
    --yekto-font-size-xl: 1.25rem;
    --yekto-font-size-2xl: 1.5rem;
    --yekto-font-size-3xl: clamp(1.75rem, 3vw, 2.25rem);
    --yekto-font-size-display: clamp(2.25rem, 5vw, 3.5rem);


    /* =========================
       Spacing
    ========================== */

    --yekto-space-1: 0.25rem;
    --yekto-space-2: 0.5rem;
    --yekto-space-3: 0.75rem;
    --yekto-space-4: 1rem;
    --yekto-space-6: 1.5rem;
    --yekto-space-8: 2rem;
    --yekto-space-12: 3rem;
    --yekto-space-16: 4rem;
    --yekto-space-24: 6rem;


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

    --yekto-radius-sm: 0.5rem;
    --yekto-radius-md: 0.75rem;
    --yekto-radius-lg: 1rem;
    --yekto-radius-xl: 1.5rem;
    --yekto-radius-pill: 999px;


    /* =========================
       Shadows
    ========================== */

    --yekto-shadow-sm:
        0 2px 8px rgba(17, 24, 39, 0.05);

    --yekto-shadow-md:
        0 8px 24px rgba(17, 24, 39, 0.07);

    --yekto-shadow-lg:
        0 16px 40px rgba(17, 24, 39, 0.09);


    /* =========================
       Layout
    ========================== */

    --yekto-container: 77.5rem;
    --yekto-header-height: 5rem;


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

    --yekto-transition-fast: 150ms ease;
    --yekto-transition: 200ms ease;


    /* =========================
       Base
    ========================== */

    min-width: 20rem;
    overflow: visible;

    color: var(--yekto-color-text);
    background: var(--yekto-color-background);

    font-family: var(--yekto-font-primary);
    font-size: var(--yekto-font-size-base);
    line-height: 1.8;

    direction: rtl;
    text-align: right;
}