/* Saudi Readymix Design System tokens.
   Concatenated from the design system's tokens/{colors,typography,spacing,borders,motion}.css.
   fonts.css is NOT included verbatim — it @imports Google Fonts, which inc/enqueue-assets/css.php
   already does per language; only its font vars are mirrored below.
   deck.css is slide-only. Regenerate by re-concatenating if the design system updates. */
:root{--font-sans:"Inter Tight",sans-serif;--font-arabic:"Noto Kufi Arabic",sans-serif;--font-body:var(--font-sans);--font-display:var(--font-sans)}
[dir="rtl"],[lang="ar"],.rtl{--font-body:var(--font-arabic);--font-display:var(--font-arabic)}


/* ---- tokens/colors.css ---- */
/* Base palette - names kept identical to the production theme (assets/stylesheets/main.scss :root)
   so that markup written against this system pastes cleanly into the live codebase. */
:root{
--primary:#19AB70;
--primary-dark:#007254;
--dark-green:#007355;
--light-green:#eaf7f3;
--warning:#FFBD00;
--warning-dark:#FAA918;
--warning-lighter:#E8E3DA;
--warning-lighter2:#DDC9B2;
--black:#000000;
--white:#ffffff;
--gray-dark:#242731;
--gray1:#585B65;
--gray1-1:#a7a9ab;
--gray2:#a7a9ab33;
--gray3:#D2D2D2;
--gray4:#EDEEEE;
--gray5:#EDE9E5;
--gray:#E8E4DA;
--purple-light:#B78ABE;
--teal-rule:#B0D4CB;
--green-tint-09:rgba(25,171,112,0.09);

/* Semantic aliases */
--text-body:var(--gray1);
--text-strong:var(--gray-dark);
--text-heading:var(--black);
--text-accent:var(--primary-dark);
--text-on-dark:var(--white);
--text-link:var(--primary-dark);
--text-link-hover:var(--primary);
--text-muted:var(--gray1-1);

--surface-page:var(--white);
--surface-card:var(--white);
--surface-subtle:var(--gray2);
--surface-muted:var(--gray4);
--surface-warm:var(--gray5);
--surface-warm-alt:var(--warning-lighter);
--surface-inverse:var(--primary-dark);
--surface-stat:var(--green-tint-09);
--surface-header:rgba(0,0,0,0.9);

--border-card:var(--gray3);
--border-field:transparent;
--border-strong:var(--gray1);
--rule-accent:var(--warning-dark);
--rule-secondary:var(--purple-light);
--rule-tabs:var(--teal-rule);

--marker-square:var(--warning-dark);
--action-primary-bg:var(--purple-light);
--action-primary-fg:var(--white);
--action-focus-ring:rgba(183,138,190,0.25);
--overlay-photo:rgba(0,0,0,0.5);
--overlay-photo-soft:rgba(0,0,0,0.15);
--overlay-photo-banner:rgba(0,0,0,0.2);
--scrim-top:linear-gradient(180deg,rgba(0,0,0,0.9) 1%,rgba(0,0,0,0) 54%) /* @kind other */
}

/* ---- tokens/typography.css ---- */
/* Fluid type scale lifted verbatim from main.scss - clamp() pairs, no rounding. */
:root{
--fs-display-1:clamp(30px,4.5vw,64px); /* @kind font */
--fs-display-2:clamp(29px,4.5vw,54px); /* @kind font */
--fs-display-3:clamp(29px,4.5vw,50px); /* @kind font */
--fs-display-4:clamp(28px,4vw,45px); /* @kind font */
--fs-heading-1:clamp(28px,4vw,43px); /* @kind font */
--fs-heading-2:clamp(24px,2.6vw,36px); /* @kind font */
--fs-heading-3:clamp(24px,2.6vw,32px); /* @kind font */
--fs-heading-4:clamp(19px,2vw,24px); /* @kind font */
--fs-heading-5:clamp(16px,2vw,20px); /* @kind font */
--fs-heading-6:14px; /* @kind font */
--fs-hero-title:clamp(32px,5vw,54px); /* @kind font */
--fs-hero-sub:clamp(28px,4vw,40px); /* @kind font */
--fs-section-title:clamp(34px,4vw,55px); /* @kind font */
--fs-lead:clamp(18px,2vw,25px); /* @kind font */
--fs-text-1:clamp(18px,2vw,22px); /* @kind font */
--fs-text-2:clamp(16px,1.5vw,18px); /* @kind font */
--fs-text-3:clamp(18px,2vw,28px); /* @kind font */
--fs-body:15px; /* @kind font */
--fs-card-body:16px; /* @kind font */
--fs-nav:17px; /* @kind font */
--fs-breadcrumb:12px; /* @kind font */
--fs-tab:22px; /* @kind font */
--fs-tab-active:30px; /* @kind font */

--fw-thin:100; /* @kind font */
--fw-light:300; /* @kind font */
--fw-regular:400; /* @kind font */
--fw-medium:500; /* @kind font */
--fw-semibold:600; /* @kind font */
--fw-bold:700; /* @kind font */
--fw-black:900; /* @kind font */

--lh-tight:1.2; /* @kind font */
--lh-body:1.25; /* @kind font */
--lh-normal:normal; /* @kind font */
--lh-lead:1.6; /* @kind font */
--lh-btn:calc(28/15) /* @kind font */
}

/* ---- tokens/spacing.css ---- */
/* Section rhythm and gutters as used by the theme (.section, .gx-90, .gx-70, containers). */
:root{
--space-1:4px;
--space-2:7px;
--space-3:11px;
--space-4:13px;
--space-5:16px;
--space-6:20px;
--space-7:23px;
--space-8:28px;
--space-9:34px;
--space-10:40px;
--space-11:45px;
--space-12:55px;
--space-13:67px;
--space-14:74px;
--space-15:84px;
--space-16:90px;
--space-17:120px;
--space-18:140px;

--section-y:55px;
--section-y-lg:90px;
--section-y-sm:40px;
--gutter-90:2.8125rem;
--gutter-70:2.1875rem;

--container:1458px;
--container-wide:1744px;
--container-narrow:1233px;
--container-header:1775px;
--container-footer:1784px;

--card-pad:23px;
--card-pad-lg:42px 52px;
--card-pad-alt2:34px 40px;
--field-pad:16px 28px;
--field-h:58px
}

/* ---- tokens/borders.css ---- */
/* Square-cornered brand: radius is 0 nearly everywhere. The only rounded things in the
   theme are slider dots (pills) and the mobile nav drawer. No shadow system on cards. */
:root{
--radius-none:0;
--radius-dot:15px;
--radius-drawer:14px;
--radius-hamburger:4px;

--border-w-hairline:1px;
--border-w-btn:2px;
--border-w-rule:3px;
--border-w-topline:4px;
--border-w-callout:10px;

--marker-lg:20px;
--marker-md:17px;
--marker-sm:11px;
--marker-xs:7px;

--rule-heading-w:160px; /* @kind spacing */

--shadow-drawer:0 6px 8px rgba(8,8,8,0.08);
--shadow-none:none;
--focus-ring:0 0 0 .25rem var(--action-focus-ring) /* @kind shadow */
}

/* ---- tokens/motion.css ---- */
/* Two easings only: a long expo ease for links/buttons, 0.3s linear-ish for everything else. */
:root{
--ease-expo:cubic-bezier(0.19,1,0.22,1); /* @kind other */
--dur-link:1s; /* @kind other */
--dur-ui:0.3s; /* @kind other */
--transition-link:all var(--dur-link) var(--ease-expo) 0s; /* @kind other */
--transition-ui:all var(--dur-ui) ease /* @kind other */
}