/* ==========================================================
   Turkish Vet Clinic
   Design Tokens
========================================================== */

:root{

/*==========================================================
= COLORS
==========================================================*/

--tvc-primary:#443935;
--tvc-primary-dark:#332924;

--tvc-accent:#f39a3f;
--tvc-accent-hover:#e7892a;

--tvc-white:#ffffff;
--tvc-black:#111111;

--tvc-text:#797979;
--tvc-heading:#443935;

--tvc-bg:#ffffff;
--tvc-bg-light:#f8fafc;
--tvc-bg-soft:#f5f7f9;

--tvc-border:#e7eaee;
--tvc-border-light:#f2f4f6;


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

--tvc-font-body:"Nunito",sans-serif;
--tvc-font-heading:"Paytone One",sans-serif;

--tvc-fs-h1:clamp(2.9rem,5vw,4rem);
--tvc-fs-h2:clamp(2.3rem,4vw,3.2rem);
--tvc-fs-h3:clamp(1.8rem,3vw,2.3rem);
--tvc-fs-h4:1.7rem;
--tvc-fs-h5:1.35rem;
--tvc-fs-h6:1.1rem;

--tvc-fs-body:1rem;
--tvc-fs-small:.9rem;

--tvc-line-heading:1.15;
--tvc-line-body:1.75;

--tvc-fw-300:300;
--tvc-fw-400:400;
--tvc-fw-500:500;
--tvc-fw-600:600;
--tvc-fw-700:700;
--tvc-fw-800:800;


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

--tvc-container:1240px;

--tvc-container-padding:24px;

--tvc-container-small:980px;


/*==========================================================
= SECTION SPACING
==========================================================*/

--tvc-space-4:4px;
--tvc-space-8:8px;
--tvc-space-12:12px;
--tvc-space-16:16px;
--tvc-space-20:20px;
--tvc-space-24:24px;
--tvc-space-32:32px;
--tvc-space-40:40px;
--tvc-space-48:48px;
--tvc-space-56:56px;
--tvc-space-64:64px;
--tvc-space-72:72px;
--tvc-space-80:80px;
--tvc-space-96:96px;
--tvc-space-120:120px;

--tvc-section-space:96px;
--tvc-section-space-tablet:80px;
--tvc-section-space-mobile:64px;


/*==========================================================
= BORDER RADIUS
==========================================================*/

--tvc-radius-xs:8px;
--tvc-radius-sm:12px;
--tvc-radius-md:18px;
--tvc-radius-lg:24px;
--tvc-radius-xl:32px;
--tvc-radius-pill:999px;


/*==========================================================
= SHADOWS
==========================================================*/

--tvc-shadow-sm:
0 4px 12px rgba(0,0,0,.05);

--tvc-shadow-md:
0 12px 30px rgba(0,0,0,.08);

--tvc-shadow-lg:
0 22px 55px rgba(0,0,0,.12);

--tvc-shadow-hover:
0 28px 70px rgba(0,0,0,.16);


/*==========================================================
= BORDERS
==========================================================*/

--tvc-border-width:1px;
--tvc-border-style:solid;


/*==========================================================
= BUTTONS
==========================================================*/

--tvc-btn-height:58px;
--tvc-btn-padding:0 34px;
--tvc-btn-radius:999px;


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

--tvc-input-height:58px;
--tvc-input-radius:16px;


/*==========================================================
= TRANSITIONS
==========================================================*/

--tvc-transition-fast:.2s ease;

--tvc-transition:.35s ease;

--tvc-transition-slow:.5s ease;


/*==========================================================
= HEADER
==========================================================*/

--tvc-header-height:120px;

--tvc-header-sticky:90px;


/*==========================================================
= Z INDEX
==========================================================*/

--tvc-z-header:999;

--tvc-z-dropdown:1000;

--tvc-z-overlay:9998;

--tvc-z-modal:9999;


/*==========================================================
= IMAGE RATIOS
==========================================================*/

--tvc-ratio-square:1/1;

--tvc-ratio-landscape:16/9;

--tvc-ratio-portrait:4/5;

--tvc-ratio-card:4/4.8;


/*==========================================================
= MAX CONTENT WIDTHS
==========================================================*/

--tvc-text-width:720px;

--tvc-content-width:860px;

--tvc-small-content:640px;

}