/* =========================================================
RECIPE WORLD — BASE / GLOBAL CSS
========================================================= */

/* =========================================================
ROOT VARIABLES
========================================================= */

:root {


--rw-primary: #f97316;
--rw-primary-dark: #ea580c;
--rw-primary-light: #fff7ed;

--rw-text: #172033;
--rw-text-soft: #334155;
--rw-text-muted: #64748b;

--rw-bg: #fcfcf9;
--rw-white: #ffffff;

--rw-border: #e5e7eb;
--rw-border-light: #f1f5f9;

--rw-container: 1180px;

--rw-radius-sm: 10px;
--rw-radius-md: 14px;
--rw-radius-lg: 20px;
--rw-radius-xl: 28px;

--rw-shadow-sm:
    0 4px 14px rgba(15, 23, 42, 0.05);

--rw-shadow-md:
    0 12px 32px rgba(15, 23, 42, 0.08);

--rw-shadow-lg:
    0 25px 60px rgba(15, 23, 42, 0.10);


}

/* =========================================================
GLOBAL RESET
========================================================= */

*,
*::before,
*::after {
box-sizing: border-box;
}

html {
margin: 0;
padding: 0;


scroll-behavior: smooth;
scroll-padding-top: 90px;


}

body {
margin: 0;
padding: 0;


min-width: 320px;
min-height: 100vh;

font-family:
    "Plus Jakarta Sans",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

font-size: 16px;
line-height: 1.6;

color: var(--rw-text);
background: var(--rw-bg);

text-rendering: optimizeLegibility;

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;


}

/* =========================================================
TYPOGRAPHY
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0;
margin-bottom: 0;


color: var(--rw-text);

font-weight: 800;

text-wrap: balance;


}

p {
margin-top: 0;


text-wrap: pretty;


}

a {
color: inherit;
text-decoration: none;
}

ul,
ol {
margin: 0;
padding: 0;


list-style: none;


}

/* =========================================================
MEDIA
========================================================= */

img,
svg,
video,
canvas {
display: block;


max-width: 100%;


}

img {
height: auto;
}

/* =========================================================
FORMS
========================================================= */

button,
input,
textarea,
select {
font: inherit;
}

button {
cursor: pointer;
}

input,
textarea,
select {
outline: none;
}

/* =========================================================
MAIN CONTENT
========================================================= */

main {
display: block;
width: 100%;
}

/* =========================================================
GLOBAL CONTAINER
========================================================= */

.container {
width: min(
var(--rw-container),
calc(100% - 40px)
);


margin-left: auto;
margin-right: auto;


}

/* =========================================================
ACCESSIBILITY — SKIP LINK
========================================================= */

.skip-link {
position: fixed;


top: -100px;
left: 20px;

z-index: 99999;

padding: 12px 18px;

border-radius: 10px;

color: #ffffff;
background: var(--rw-text);

font-size: 14px;
font-weight: 700;

text-decoration: none;

transition: top 0.2s ease;


}

.skip-link:focus {
top: 20px;
}

/* =========================================================
FOCUS
========================================================= */

:focus-visible {
outline: 3px solid rgba(249, 115, 22, 0.35);
outline-offset: 3px;
}

/* =========================================================
TEXT SELECTION
========================================================= */

::selection {
color: #ffffff;
background: var(--rw-primary);
}

/* =========================================================
SCROLLBAR
========================================================= */

html {
scrollbar-width: thin;
scrollbar-color: #cbd5e1 transparent;
}

html::-webkit-scrollbar {
width: 8px;
}

html::-webkit-scrollbar-track {
background: transparent;
}

html::-webkit-scrollbar-thumb {
border-radius: 999px;
background: #cbd5e1;
}

html::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}

/* =========================================================
BUTTON RESET
========================================================= */

button {
border: 0;
background: transparent;
}

/* =========================================================
FORM FOCUS
========================================================= */

input:focus,
textarea:focus,
select:focus {
border-color: var(--rw-primary);


box-shadow:
    0 0 0 3px rgba(249, 115, 22, 0.10);


}

/* =========================================================
RESPONSIVE CONTAINER
========================================================= */

@media (max-width: 768px) {


.container {
    width: min(
        var(--rw-container),
        calc(100% - 28px)
    );
}

html {
    scroll-padding-top: 75px;
}


}

/* =========================================================
REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {


html {
    scroll-behavior: auto;
}

*,
*::before,
*::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}


}