/*
 * Elliot Theme — Semantic & Application Tokens
 * Use these in all component CSS. Primitives (--*-raw-*) live in primitives.css
 * and are only referenced here — never use raw tokens directly in component files.
 *
 * Layer 3 — Semantic : text / background / border
 * Layer 4 — Application : radii / spacing / layout / borders / buttons / sections / blog
 */

:root {

/* =========================================================
   3. SEMANTIC TOKENS — TEXT
   ========================================================= */

--color-text-pri-dark:  var(--color-raw-neutral-1100);
--color-text-sec-dark:  var(--color-raw-neutral-900);
--color-text-ter-dark:  var(--color-raw-neutral-800);

--color-text-pri-light: var(--color-raw-neutral-50);
--color-text-sec-light: var(--color-raw-neutral-600);
--color-text-ter-light: var(--color-raw-neutral-700);


/* =========================================================
   3. SEMANTIC TOKENS — BACKGROUND
   ========================================================= */

--color-bg-light-50:  var(--color-raw-neutral-50);
--color-bg-light-200: var(--color-raw-neutral-200);

--color-bg-dark-50:  var(--color-raw-neutral-1200);
--color-bg-dark-200: var(--color-raw-neutral-1100);
--color-bg-dark-300: var(--color-raw-neutral-1050);
--color-bg-dark-400: #111111;


/* =========================================================
   3. SEMANTIC TOKENS — BORDER
   ========================================================= */

--color-border-light-100: var(--color-raw-neutral-300);
--color-border-light-200: var(--color-raw-neutral-500);
--color-border-light-300: var(--color-raw-neutral-600);

--color-border-dark-50:  var(--color-raw-neutral-950);
--color-border-dark-100: var(--color-raw-neutral-1000);


/* =========================================================
   4. APPLICATION TOKENS — RADII
   ========================================================= */

--radius-btn:  0.5rem;    /* 8px  — v2 button corners */
--radius-card: 1.25rem;   /* 20px — v2 card corners  */
--radius-media: var(--size-raw-12); /* 12px — compact media and small card shells */
--radius-pill: 99rem;     /* pill tabs and capsule controls */
--radius-tag:  0.1875rem; /* 3px — compact badges and stat labels */
--radius-section-inset: 1.875rem; /* 30px — inset dark section container */

/* ── Metric tag tokens (case study stat pills) ─────────── */
--metric-tag-fs:      0.8rem;
--metric-tag-pad:     0.3rem 0.6rem;
--metric-tag-gap:     0.3rem;
--metric-tag-row-gap: 0.4rem;


/* =========================================================
   4. APPLICATION TOKENS — SPACING
   ========================================================= */

--size-pad-xxs: var(--size-raw-17);
--size-pad-2xs: var(--size-raw-24);
--size-pad-xs:  var(--size-raw-32);
--size-pad-sm:  var(--size-raw-40);
--size-pad-sm2: var(--size-raw-48);
--size-pad-md:  var(--size-raw-56);
--size-pad-lg:  var(--size-raw-72);
--size-pad-xl:  var(--size-raw-80);

--size-v-pad-xs:  clamp(2rem,    1.8rem + 1.4vw,  4rem);     /* ~57→64px   — 2.0× h2 @1440 */
--size-v-pad-sm:  clamp(2.5rem,  2.3rem + 1.8vw,  5rem);    /* ~72→80px   — 2.5× h2 @1440 */
--size-v-pad-md:  clamp(3rem,    2.8rem + 2.2vw, 6rem);   /* ~87→96px   — 2.7× h2 @1440 */
--size-v-pad-lg:  clamp(3.5rem,  3.2rem + 2.6vw,    7rem);   /* ~101→112px — 3.0× h2 @1440 */
--size-v-pad-xl:  clamp(4rem,    3.8rem + 3vw,   8rem);   /* ~111→128px — 3.2× h2 @1440 */

--size-gap-cards: var(--size-raw-20);
--size-section-title-mb: clamp(2rem, 1rem + 1.53vw, 3.5rem); /* fluid: 40→56px */
--size-section-cta-mt:   clamp(3rem, 1.5rem + 1.5vw, 4rem);  /* fluid: 40→64px */
--size-section-block-mt: clamp(3rem, 1.8rem + 2.8vw, 6rem);  /* fluid: 48→96px */
--size-section-block-lg-mt: clamp(4rem, 2.5rem + 4vw, 7.8125rem); /* fluid: 64→125px */
--size-section-subcontent-mt: clamp(2rem, 1.5rem + 1.2vw, 3.125rem); /* fluid: 32→50px */
--size-slider-pagination-mt: clamp(2rem, 1.3rem + 1.7vw, 3.4375rem); /* fluid: 32→55px */
--size-section-stack-mt: 1.5625rem; /* 25px — stacked media/rows within a section */
--size-section-nav-mt:   clamp(2.5rem, 1.3rem + 5.2vw, 6rem); /* fluid: 40→96px — back-to-blog, load-more */
--size-card-title-mt: var(--size-pad-xs); /* 32px — icon/media to card title */
--size-card-body-mt: var(--size-gap-cards); /* 20px — title to supporting copy */
--size-card-meta-mt: 0.625rem; /* 10px — compact icon/meta rows */
--size-card-kicker-mt: 0.3125rem; /* 5px — label/subtitle after title */
--size-card-action-inline-mt: var(--size-pad-xs); /* 32px — inline card CTA after copy */
--size-card-actions-mt: clamp(2rem, 1.2rem + 2vw, 4.375rem); /* fluid: 32→70px */
--size-form-body-mt: 1.5625rem; /* 25px — heading to form body */


/* =========================================================
   4. APPLICATION TOKENS — LAYOUT
   ========================================================= */

--size-global-padding-h: var(--size-raw-40);

--size-content-max-width: 100rem;
--size-max-heading-center:  20ch;
--size-max-heading-left-md: 14ch;
--size-max-text:            48ch;

--size-icon-gap:         0.7rem;    /* standard gap between icon and text in links/buttons */
--size-icon-inline:      1.1rem;
--size-icon-nav:         1.25rem;    /* mobile/tablet header nav icons (email + phone) */
--size-icon-widget:      0.8rem;   /* icon glyph inside rounded-square widget buttons */
--size-icon-widget-wrap: 1.75rem;     /* rounded-square widget button container */
--size-icon-slider-btn:  2.5rem;      /* slider nav arrow button container (hero, testimonial) */

--btn-pad-v:    1.1rem;   /* button block padding — desktop */
--btn-pad-h:    1rem;   /* button inline padding — desktop */
--btn-sm-pad-v: 0.9rem;   /* btn-sm block padding — desktop */
--btn-sm-pad-h: 0.9rem;   /* btn-sm inline padding — desktop */

--size-button-gap: 1rem; /* gap between sibling buttons — desktop */


/* =========================================================
   4. APPLICATION TOKENS — STROKES / BORDERS
   ========================================================= */

--size-border-card-border:   0.0625rem;
--size-border-button-border: 0.0625rem;


/* =========================================================
   4. APPLICATION TOKENS — BUTTONS
   Surface-agnostic: btn-primary, btn-secondary
   Ghost on light:   btn-tertiary  (light bg, light border, dark text)
   Ghost on dark:    btn-ghost-light (transparent, dark border, light text)
   ========================================================= */

--color-bg-button-pri: var(--color-bg-dark-200);
--color-bg-button-sec: var(--color-bg-light-50);
--color-bg-button-ter: var(--color-bg-light-50);

--color-border-button-pri:        var(--color-border-dark-100);
--color-border-button-sec:        var(--color-border-light-300); /* v2: ghost style — light border */
--color-border-button-ter:        var(--color-border-light-300);
--color-border-button-ghost-dark: var(--color-border-dark-50);

/* =========================================================
   4. APPLICATION TOKENS — SECTIONS
   ========================================================= */

--color-border-section: var(--color-border-light-100);
--gradient-service: linear-gradient(89deg, #de3163 0.33%, #a975d3 51.21%, #00b7b7 98.49%);


/* =========================================================
   4. APPLICATION TOKENS — ACCESSIBILITY
   ========================================================= */

--color-focus: var(--color-raw-pri-500);
--color-accent-green:      var(--color-raw-sec-600);
--color-accent-green-dark: var(--color-raw-sec-700);  /* service-grid "Learn more" text */
--color-accent-dark:       var(--color-bg-dark-200);  /* icon buttons, WhatsApp btn, footer accordion */
--color-accent-gold:  #f4be44;
--color-accent-cyan:  #72fdd6;


/* =========================================================
   4. APPLICATION TOKENS — OVERLAYS / SHADOWS
   ========================================================= */

--color-overlay-dark-15:  rgba(0, 0, 0, 0.15);
--color-overlay-dark-30:  rgba(0, 0, 0, 0.30);
--color-overlay-dark-72:  rgba(0, 0, 0, 0.72);
--color-overlay-light-08: rgba(255, 255, 255, 0.08);
--color-overlay-light-10: rgba(255, 255, 255, 0.10);
--color-overlay-light-20: rgba(255, 255, 255, 0.20);
--color-overlay-gray-10:  rgba(205, 205, 205, 0.10);
--color-overlay-gray-30:  rgba(139, 139, 139, 0.30);
--color-shadow-card:      rgba(0, 0, 0, 0.08);


/* =========================================================
   4. APPLICATION TOKENS — BLOG CONTENT SPACING
   ========================================================= */

--size-blog-body-padding-top:  var(--size-raw-20);
--size-blog-h2-padding-top:    var(--size-raw-48);
--size-blog-h2-padding-bottom: var(--size-raw-24);
--size-blog-h3-padding-top:    var(--size-raw-40);
--size-blog-h3-padding-bottom: var(--size-raw-0);
--size-blog-img-padding-top:   var(--size-raw-32);

/* Max reading width for single post articles — edit freely */
--size-article-reading-width: 85ch;


/* =========================================================
   4. APPLICATION TOKENS — TYPOGRAPHY
   ========================================================= */

--fw-medium:   500;
--fw-regular:  var(--fw-medium);
--fw-semibold: 600;

--lh-base:    1.7;
--lh-tight:   1.1;   /* h1, h3 — Figma 110% */
--lh-display: 1.0;   /* hero display / h1 */
--lh-h1:      var(--lh-display);
--lh-heading: 1.05;  /* h2 — Figma 105% */
--lh-h4:      1.2;   /* h4 — Figma 120% */
--lh-quote:   1.75;
--lh-snug:    1.3;   /* h5 — Figma 130% */
--lh-normal:  1.4;   /* nav links, body UI elements */

--ls-xs: -0.04em;
--ls-sm: -0.03em;
--ls-md: -0.02em;
--ls-lg: 0em;

--fs-display: clamp(2.6rem, 1.923rem + 2.882vw, 5.381rem);   /* 42→86px  @ 390→1920 — range −10% */
--fs-h1:      clamp(2.6rem, 1.309rem + 2.938vw, 4.455rem);   /* 32→71px  @ 390→1920 — +8% */
--fs-h2:      clamp(1.9rem, 1.405rem + 1.400vw, 3.1rem);   /* ~28→49.4px @ 390→1920 — flatter scale */
--fs-h3:      clamp(1.4rem, 0.695rem + 1.765vw, 2.813rem);   /* 22→45px  @ 390→1920 */
--fs-h4:      clamp(1.3rem, 0.750rem + 0.900vw, 1.875rem);    /* 20→30px  @ 390→1920 — h4 > h5 */
--fs-h5:      clamp(1.2rem, 0.730rem + 0.650vw, 1.500rem);   /* 18→24px  @ 390→1920 — min > body */

--fs-body-l:  clamp(1.02rem, 1.028rem + 0.133vw, 1.1875rem);  /* 16.96→19px @ 390→1920 */
--fs-body-m:  clamp(0.97rem, 0.95rem + 0.042vw, 1rem);         /* 15.36→16px @ 390→1920 */
--fs-body-s:  0.94rem;

--fs-button:  1rem;
--fs-link:    0.9375rem;
--fs-quote-m: clamp(1.25rem, 1.19rem + 0.26vw, 1.5rem);
--fs-number:  clamp(2.4rem, 1.6rem + 1.926vw, 4.21875rem);


/* =========================================================
   4. APPLICATION TOKENS — MOTION
   ========================================================= */

--ease-default:    ease-in-out;
--ease-reveal:     cubic-bezier(0.25, 0.46, 0.45, 0.94);

--duration-fast:   0.15s;
--duration-base:   0.25s;
--duration-slow:   0.35s;

--transition-fast: all var(--duration-fast) var(--ease-default);
--transition-base: all var(--duration-base) var(--ease-default);

}

/* ── Responsive token overrides ─────────────────────────── */
@media only screen and (max-width: 991.98px) {
	:root {
		--size-section-cta-mt: 2rem;
		--size-section-block-mt: 3rem;
		--size-section-block-lg-mt: 4rem;
		--size-section-subcontent-mt: 2rem;
		--size-slider-pagination-mt: 2rem;
		--btn-pad-v:    0.9rem;
		--btn-pad-h:    0.9rem;
		--btn-sm-pad-v: 0.6rem;
		--btn-sm-pad-h: 0.8rem;
		--fs-button:              0.9rem;
		--radius-section-inset:   1rem;
		--radius-card:            0.7rem;
		--radius-btn:             0.4rem;
		--size-button-gap:        0.5rem;
		--size-global-padding-h: 1rem;
		--size-section-stack-mt: 1.25rem;
	}
}