/* ==========================================
   RELLET DESIGN SYSTEM v2
   RTL foundation + design tokens
   ========================================== */

:root {
    /* === PRIMARY (Crimson Red) === */
    --primary-950: #000000;
    --primary-900: #000000;
    --primary-800: #150308;
    --primary-700: #390716;
    --primary-600: #5e0c23;
    --primary-500: #821031;
    --primary-400: #af1642;
    --primary-300: #dd1b53;
    --primary-200: #e84373;
    --primary-100: #ed7195;
    --primary-50:  #f9d9e1;

    /* === SECONDARY (Gold) === */
    --secondary-950: #c09427;
    --secondary-900: #d6a630;
    --secondary-800: #e0bc63;
    --secondary-700: #e5c77d;
    --secondary-600: #ead296;
    --secondary-500: #f0e0b6;
    --secondary-400: #f7edd6;
    --secondary-300: #fffef6;
    --secondary-100: #ffffff;
    --secondary-50:  #ffffff;

    /* === NEUTRAL (Greys) === */
    --neutral-950: #1a1a1a;
    --neutral-900: #2e2e2e;
    --neutral-800: #434343;
    --neutral-700: #575757;
    --neutral-600: #6c6c6c;
    --neutral-500: #808080;
    --neutral-400: #9a9a9a;
    --neutral-300: #b3b3b3;
    --neutral-200: #cdcdcd;
    --neutral-100: #e6e6e6;
    --neutral-50:  #f6f6f6;

    /* === BRAND SHORTCUTS === */
    --color-primary: var(--primary-500);
    --color-primary-light: var(--primary-300);
    --color-secondary: var(--secondary-950);
    --color-bg: var(--neutral-50);
    --color-surface: #fff;
    --color-border: var(--neutral-200);
    --color-text: var(--neutral-950);
    --color-muted: var(--neutral-500);

    /* === SHADOWS === */
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.12);

    /* === TYPOGRAPHY === */
    --font-base: 'Vazirmatn', 'IRANSans', 'Segoe UI', sans-serif;
    --font-size-sm: 0.9rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.75rem;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
}

/* === UTILITIES === */
.bg-primary { background-color: var(--color-primary); color: #fff; }
.bg-secondary { background-color: var(--color-secondary); color: #fff; }
.bg-surface { background-color: var(--color-surface); }
.bg-muted { background-color: var(--neutral-100); }

.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-muted { color: var(--color-muted); }
.text-light { color: #fff; }
.text-dark { color: var(--color-text); }

.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }

.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

.btn {
    font-family: var(--font-base);
    font-weight: 600;
    border-radius: var(--radius-md);
    border: none;
    padding: 0.8rem 1.2rem;
    cursor: pointer;
    transition: 0.2s ease-in-out;
    display: inline-block;
}

.btn-primary {
    background: var(--color-secondary);
    color: #fff;
}
.btn-primary:hover { background: var(--secondary-800); }

.btn-accent {
    background: var(--color-primary);
    color: #fff;
}
.btn-accent:hover { background: var(--primary-700); }

input,
select,
textarea {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.8rem;
    background: var(--color-surface);
    font-family: var(--font-base);
    color: var(--color-text);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 2px rgba(192, 148, 39, 0.15);
}