@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=Playpen+Sans+Arabic:wght@300;400;500;600;700&display=swap');

:root {
    --background: 270 20% 98%;
    --foreground: 270 25% 18%;

    --card: 0 0% 100%;
    --card-foreground: 270 25% 18%;

    --popover: 0 0% 100%;
    --popover-foreground: 270 25% 18%;

    --primary: 270 60% 38%;
    --primary-foreground: 0 0% 100%;

    --secondary: 42 75% 55%;
    --secondary-foreground: 270 30% 12%;

    --muted: 270 15% 92%;
    --muted-foreground: 43 89% 38%;;

    --accent: 42 80% 50%;
    --accent-foreground: 270 30% 12%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;

    --border: 270 15% 88%;
    --input: 270 15% 88%;
    --ring: 270 60% 38%;

    --radius: 0.75rem;

    /* Custom palette tokens */
    --deep-purple: 270 60% 20%;
    --royal-purple: 270 60% 38%;
    --soft-purple: 270 40% 60%;
    --light-purple: 270 40% 88%;
    --ice-purple: 270 30% 95%;
    --gold: 42 75% 55%;
    --deep-gold: 38 80% 45%;
    --light-gold: 42 60% 85%;
    --ice-gold: 42 50% 94%;
    --steel: 270 10% 45%;
    --slate: 270 25% 18%;
    --cloud: 270 15% 97%;

    --font-heading: 'IBM Plex Sans Arabic', sans-serif;
    --font-body: 'IBM Plex Sans Arabic', sans-serif;

    --shadow-card: 0 4px 24px -4px hsl(var(--royal-purple) / 0.08);
    --shadow-elevated: 0 8px 32px -8px hsl(var(--royal-purple) / 0.14);
}

* {
    border-color: hsl(var(--border) / 1);
}

html {
    direction: rtl;
}

body {
    background-color: hsl(var(--background) / 1);
    color: hsl(var(--foreground) / 1);
    font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
}

.text-primary-foreground {
    color: hsl(var(--primary-foreground));
}
.editorial-divider {
    width: 6rem;
    height: 1px;
    margin-left: auto;
    margin-right: auto;
    background: linear-gradient(
      to left,
      transparent,
      hsl(var(--gold) / 1),
      transparent
    );
}

.editorial-divider-wide {
    width: 12rem;
    height: 1px;
    margin-left: auto;
    margin-right: auto;
    background: linear-gradient(
      to left,
      transparent,
      hsl(var(--soft-purple) / 1),
      transparent
    );
}

.quote-block {
    background-color: hsl(var(--deep-purple) / 1);
    color: hsl(var(--light-gold) / 1);
}

.section-card {
    border-radius: 1rem;
    padding: 2rem;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    box-shadow: var(--shadow-card);
}

.section-card:hover {
    box-shadow: var(--shadow-elevated);
    transform: translateY(-2px);
}

.badge-label {
    display: inline-block;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    background-color: hsl(var(--ice-gold) / 1);
    color: hsl(var(--deep-gold) / 1);
}

.article-card {
    border-radius: 0.75rem;
    padding: 1.5rem;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    background-color: hsl(var(--cloud) / 1);
    box-shadow: var(--shadow-card);
}

.article-card:hover {
    box-shadow: var(--shadow-elevated);
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fade-in-up 0.6s ease-out forwards;
}