/* ==========================================================================
   BizDirect · Design System  (theme.css)
   פלטת צבעים סמנטית עם מצב בהיר/כהה, אנימציות ומיקרו-אינטראקציות
   ========================================================================== */

:root {
    /* צבעי מותג — נשארים עקביים */
    --c-brand: 25 37 57;          /* #192539 navy */
    --c-accent: 201 106 64;       /* #c96a40 copper */
    --c-accent-2: 224 138 95;     /* #e08a5f copper-light */

    /* משטחים ורקעים — מצב בהיר */
    --c-bg: 246 247 249;
    --c-surface: 255 255 255;
    --c-surface-2: 238 241 244;
    --c-surface-3: 228 233 238;
    --c-text: 26 29 33;
    --c-text-muted: 86 91 100;
    --c-outline: 214 218 224;
    --c-chip: 244 230 222;
    --c-on-chip: 123 74 48;

    --shadow-sm: 0 1px 2px rgba(25,37,57,.06), 0 1px 3px rgba(25,37,57,.04);
    --shadow-md: 0 8px 20px -6px rgba(25,37,57,.14);
    --shadow-lg: 0 20px 40px -12px rgba(25,37,57,.22);
    --shadow-accent: 0 10px 30px -8px rgba(201,106,64,.45);
    --ring: 0 0 0 3px rgba(201,106,64,.28);
}

.dark {
    --c-brand: 224 231 245;       /* בהיר על רקע כהה */
    --c-accent: 224 138 95;
    --c-accent-2: 240 160 120;

    --c-bg: 11 17 27;
    --c-surface: 22 32 46;
    --c-surface-2: 30 42 58;
    --c-surface-3: 38 54 74;
    --c-text: 230 235 242;
    --c-text-muted: 154 166 182;
    --c-outline: 44 58 77;
    --c-chip: 51 38 31;
    --c-on-chip: 224 168 131;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow-md: 0 10px 24px -8px rgba(0,0,0,.55);
    --shadow-lg: 0 24px 48px -12px rgba(0,0,0,.65);
    --shadow-accent: 0 12px 34px -8px rgba(224,138,95,.5);
    --ring: 0 0 0 3px rgba(224,138,95,.35);
}

/* ---- בסיס ---------------------------------------------------------------- */
* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Heebo', system-ui, sans-serif;
    background-color: rgb(var(--c-bg));
    color: rgb(var(--c-text));
    transition: background-color .4s ease, color .4s ease;
}

h1, h2, h3, h4, .font-display {
    font-family: 'Rubik', 'Heebo', sans-serif;
    letter-spacing: -.01em;
}

::selection { background: rgb(var(--c-accent) / .28); }

/* ---- פס גלילה מותאם ------------------------------------------------------ */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: rgb(var(--c-surface-2)); }
::-webkit-scrollbar-thumb {
    background: rgb(var(--c-outline));
    border-radius: 99px;
    border: 3px solid rgb(var(--c-surface-2));
}
::-webkit-scrollbar-thumb:hover { background: rgb(var(--c-accent) / .7); }

/* ---- אנימציות כניסה ------------------------------------------------------ */
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes shimmer { 100% { background-position: -200% 0; } }
@keyframes pop { 0% { transform: scale(.9); opacity: 0; } 60% { transform: scale(1.03); } 100% { transform: scale(1); opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }

.animate-fade-up { opacity: 0; animation: fadeUp .7s cubic-bezier(.22,1,.36,1) forwards; }
.animate-fade-in { animation: fadeIn .6s ease forwards; }
.animate-pop { animation: pop .35s cubic-bezier(.22,1,.36,1) forwards; }
.animate-floaty { animation: floaty 6s ease-in-out infinite; }
.spin { animation: spin 1s linear infinite; }

/* השהיה מדורגת לרשתות */
.stagger > * { opacity: 0; animation: fadeUp .6s cubic-bezier(.22,1,.36,1) forwards; }
.stagger > *:nth-child(1){animation-delay:.05s}.stagger > *:nth-child(2){animation-delay:.12s}
.stagger > *:nth-child(3){animation-delay:.19s}.stagger > *:nth-child(4){animation-delay:.26s}
.stagger > *:nth-child(5){animation-delay:.33s}.stagger > *:nth-child(6){animation-delay:.40s}
.stagger > *:nth-child(7){animation-delay:.47s}.stagger > *:nth-child(8){animation-delay:.54s}

/* ---- כותרת זכוכית (glassmorphism) --------------------------------------- */
.glass {
    background: rgb(var(--c-surface) / .72);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid rgb(var(--c-outline) / .6);
}

/* ---- טקסט גרדיאנט -------------------------------------------------------- */
.text-gradient {
    background: linear-gradient(120deg, rgb(var(--c-brand)), rgb(var(--c-accent)));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.dark .text-gradient {
    background: linear-gradient(120deg, rgb(var(--c-brand)), rgb(var(--c-accent-2)));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- כפתור פרימיום עם ברק ------------------------------------------------ */
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after {
    content: ""; position: absolute; top: 0; right: -60%; width: 40%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
    transform: skewX(-20deg); transition: right .6s ease;
}
.btn-shine:hover::after { right: 130%; }

/* ---- כרטיס עם הרמה ------------------------------------------------------- */
.card-hover { transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, border-color .3s ease; }
.card-hover:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

/* ---- Skeleton loader ----------------------------------------------------- */
.skeleton {
    background: linear-gradient(90deg, rgb(var(--c-surface-2)) 25%, rgb(var(--c-surface-3)) 37%, rgb(var(--c-surface-2)) 63%);
    background-size: 200% 100%;
    animation: shimmer 1.4s ease infinite;
    border-radius: .5rem;
}

/* ---- שדות טופס ----------------------------------------------------------- */
.field {
    width: 100%;
    background: rgb(var(--c-surface));
    border: 1px solid rgb(var(--c-outline));
    color: rgb(var(--c-text));
    border-radius: .6rem;
    padding: .6rem .9rem;
    transition: border-color .2s, box-shadow .2s, background .2s;
    outline: none;
}
.field::placeholder { color: rgb(var(--c-text-muted) / .7); }
.field:focus { border-color: rgb(var(--c-accent)); box-shadow: var(--ring); }

/* ---- מתג מצב כהה --------------------------------------------------------- */
.theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 99px;
    border: 1px solid rgb(var(--c-outline));
    background: rgb(var(--c-surface));
    color: rgb(var(--c-text));
    cursor: pointer; transition: transform .3s, background .3s, color .3s;
}
.theme-toggle:hover { transform: rotate(18deg) scale(1.06); color: rgb(var(--c-accent)); }

/* ---- הופעה בגלילה (reveal on scroll) ------------------------------------ */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.in { opacity: 1; transform: none; }

/* ---- Material Symbols ---------------------------------------------------- */
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.icon-fill { font-variation-settings: 'FILL' 1; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .reveal { opacity: 1; transform: none; }
}