/* CSS Variables - Premium Portfolio System */

:root {
     color-scheme: dark;

     /* Brand */
     --orange-yellow-crayola: hsl(42, 96%, 62%);
     --vegas-gold: hsl(39, 82%, 46%);
     --accent-cyan: hsl(190, 87%, 66%);
     --bittersweet-shimmer: hsl(2, 70%, 60%);

     /* Core surfaces */
     --smoky-black: hsl(222, 38%, 7%);
     --eerie-black-1: hsl(223, 30%, 10%);
     --eerie-black-2: hsl(225, 24%, 13%);
     --onyx: hsl(226, 18%, 18%);
     --jet: hsl(220, 15%, 28%);
     --white-1: hsl(220, 22%, 96%);
     --white-2: hsl(220, 30%, 99%);
     --light-gray: hsl(218, 18%, 76%);
     --light-gray-70: hsla(218, 18%, 76%, 0.74);

     /* Gradients */
     --bg-gradient-onyx: linear-gradient(155deg, hsl(226, 18%, 20%) 0%, hsl(223, 24%, 12%) 70%);
     --bg-gradient-jet: linear-gradient(155deg, hsla(220, 40%, 98%, 0.08) 0%, hsla(220, 40%, 98%, 0.01) 65%), hsl(224, 23%, 12%);
     --bg-gradient-yellow-1: linear-gradient(145deg, hsla(42, 96%, 62%, 0.8), hsla(42, 96%, 62%, 0));
     --bg-gradient-yellow-2: linear-gradient(145deg, hsla(42, 96%, 62%, 0.2), hsla(190, 87%, 66%, 0.06));
     --border-gradient-onyx: linear-gradient(160deg, hsla(220, 26%, 82%, 0.28), hsla(220, 26%, 82%, 0.02));
     --text-gradient-yellow: linear-gradient(90deg, hsl(42, 96%, 62%), hsl(190, 87%, 66%));

     /* Typography */
     --ff-poppins: 'Space Grotesk', sans-serif;
     --ff-heading: 'Sora', sans-serif;
     --fs-1: 26px;
     --fs-2: 20px;
     --fs-3: 18px;
     --fs-4: 16px;
     --fs-5: 15px;
     --fs-6: 14px;
     --fs-7: 13px;
     --fs-8: 11px;
     --fw-300: 300;
     --fw-400: 400;
     --fw-500: 500;
     --fw-600: 600;
     --fw-700: 700;

     /* Layout rhythm */
     --spacing-xs: 8px;
     --spacing-sm: 12px;
     --spacing-md: 16px;
     --spacing-lg: 24px;
     --spacing-xl: 32px;

     /* Radius */
     --radius-sm: 10px;
     --radius-md: 16px;
     --radius-lg: 20px;
     --radius-xl: 24px;

     /* Shadows */
     --shadow-1: 0 8px 20px hsla(0, 0%, 0%, 0.24);
     --shadow-2: 0 18px 36px hsla(0, 0%, 0%, 0.28);
     --shadow-3: 0 22px 54px hsla(0, 0%, 0%, 0.3);
     --shadow-4: 0 34px 80px hsla(0, 0%, 0%, 0.34);
     --shadow-5: 0 46px 110px hsla(0, 0%, 0%, 0.4);

     /* Motion */
     --transition-1: 0.25s ease;
     --transition-2: 0.5s ease-in-out;
}

html[data-theme="light"] {
     color-scheme: light;

     --smoky-black: hsl(205, 35%, 96%);
     --eerie-black-1: hsl(205, 45%, 98%);
     --eerie-black-2: hsl(0, 0%, 100%);
     --onyx: hsl(205, 38%, 93%);
     --jet: hsl(207, 22%, 80%);
     --white-1: hsl(220, 32%, 15%);
     --white-2: hsl(220, 24%, 20%);
     --light-gray: hsl(220, 14%, 40%);
     --light-gray-70: hsla(220, 14%, 40%, 0.74);

     --bg-gradient-onyx: linear-gradient(155deg, hsl(0, 0%, 100%) 0%, hsl(210, 40%, 95%) 72%);
     --bg-gradient-jet: linear-gradient(155deg, hsla(210, 30%, 20%, 0.04) 0%, hsla(210, 30%, 20%, 0.01) 70%), hsl(0, 0%, 100%);
     --bg-gradient-yellow-1: linear-gradient(145deg, hsla(42, 96%, 62%, 0.72), hsla(42, 96%, 62%, 0.1));
     --bg-gradient-yellow-2: linear-gradient(145deg, hsla(42, 96%, 62%, 0.2), hsla(190, 87%, 56%, 0.08));
     --border-gradient-onyx: linear-gradient(160deg, hsla(218, 22%, 24%, 0.22), hsla(218, 22%, 24%, 0.03));
     --text-gradient-yellow: linear-gradient(90deg, hsl(39, 93%, 42%), hsl(192, 90%, 35%));

     --shadow-1: 0 8px 20px rgba(19, 27, 40, 0.08);
     --shadow-2: 0 16px 34px rgba(19, 27, 40, 0.12);
     --shadow-3: 0 22px 54px rgba(19, 27, 40, 0.14);
     --shadow-4: 0 30px 72px rgba(19, 27, 40, 0.16);
     --shadow-5: 0 42px 96px rgba(19, 27, 40, 0.2);
}

html,
:root {
     transition: background-color 0.35s ease, color 0.35s ease;
}

html[data-theme="light"] body::-webkit-scrollbar-track {
     background: hsl(206, 34%, 92%);
     border-left: 1px solid hsl(206, 25%, 86%);
}

html[data-theme="light"] body::-webkit-scrollbar-thumb {
     background: var(--orange-yellow-crayola);
     border: 2px solid hsl(206, 34%, 92%);
}

html[data-theme="light"] * {
     scrollbar-color: var(--orange-yellow-crayola) hsl(206, 34%, 92%);
}

@media (min-width: 580px) {
     :root {
          --fs-1: 32px;
          --fs-2: 24px;
          --fs-3: 22px;
          --fs-4: 18px;
          --fs-6: 15px;
          --fs-7: 14px;
          --fs-8: 12px;
     }
}