@font-face {
	font-family: "Archivo";
	src: url("assets/fonts/archivo-var-tr.woff2") format("woff2-variations");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Archivo Fallback";

	src: local("Arial"), local("Helvetica Neue"), local("Roboto");
	size-adjust: 97%;
	ascent-override: 92%;
	descent-override: 24%;
}

:root {

	--color-primary: #175A66;
	--color-primary-hover: #0F454F;
	--color-on-primary: #F4F7F8;

	--color-surface: #F4F7F8;

	--color-surface-raised: #FFFFFF;

	--color-surface-alt: #E4EBED;

	--color-ink: #0B1316;
	--color-muted: #46585F;

	--color-line: #CDD9DC;

	--color-line-strong: #6A7F86;
	--color-focus: var(--color-primary);

	--color-danger: #A8231C;

	--color-success: #16663A;
	--color-warning: #855200;
	--color-highlight: #D9E6E9;

	--color-inverse-surface: #0C1417;
	--color-inverse-surface-alt: #162126;
	--color-inverse-ink: #E7EFF1;
	--color-inverse-muted: #9BB0B8;
	--color-inverse-line: #22313A;
	--color-inverse-line-strong: #637C85;

	--color-inverse-primary: #B9CFD7;

	--color-inverse-primary-hover: #5CC8E8;
	--color-inverse-on-primary: #071114;
	--color-inverse-highlight: #12303A;

	--sina-zinc: #B9CFD7;

	--sina-cyan: #5CC8E8;

	--sina-blueprint: #1C6A8F;
	--sina-blueprint-inverse: #7FC4E8;

	--sina-alarm: #A8231C;

	--sina-alarm-inverse: #FF7A5C;

	--sina-wa: #0F7A5F;
	--sina-wa-hover: #0B6249;

	--sina-hairline: #22313A;

	--font-sans: "Archivo", "Archivo Fallback", ui-sans-serif, system-ui, Arial, sans-serif;
	--font-heading: var(--font-sans);

	--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--text-display: clamp(2.625rem, 1.6625rem + 4.82vw, 6rem);
	--text-display--line-height: 1.02;
	--text-display--letter-spacing: -0.032em;
	--text-display--font-weight: 700;

	--text-h1: clamp(2.125rem, 1.589rem + 2.68vw, 4rem);
	--text-h1--line-height: 1.05;
	--text-h1--letter-spacing: -0.028em;
	--text-h1--font-weight: 700;

	--text-h2: clamp(1.75rem, 1.25rem + 2.5vw, 3.5rem);
	--text-h2--line-height: 1.08;
	--text-h2--letter-spacing: -0.024em;
	--text-h2--font-weight: 700;

	--text-h2-icerik: clamp(1.5rem, 1.25rem + 1.25vw, 2.375rem);
	--text-h2-icerik--line-height: 1.18;
	--text-h2-icerik--letter-spacing: -0.018em;

	--text-h3: clamp(1.25rem, 1.107rem + 0.71vw, 1.75rem);
	--text-h3--line-height: 1.22;
	--text-h3--letter-spacing: -0.01em;
	--text-h3--font-weight: 600;

	--text-h4: 1.125rem;
	--text-h4--line-height: 1.35;
	--text-h4--font-weight: 600;

	--text-lead: clamp(1.1875rem, 1.12rem + 0.3vw, 1.375rem);
	--text-lead--line-height: 1.58;

	--text-body: 1.0625rem;
	--text-body--line-height: 1.7;

	--text-small: 0.875rem;
	--text-small--line-height: 1.5;

	--text-label: 0.8125rem;
	--text-label--line-height: 1.25;
	--text-label--letter-spacing: 0.12em;
	--text-label--font-weight: 500;

	--text-eyebrow: 0.75rem;
	--text-eyebrow--line-height: 1.2;
	--text-eyebrow--letter-spacing: 0.14em;
	--text-eyebrow--font-weight: 500;

	--container-content: 40rem;
	--container-site: 74rem;
	--container-wide: 84rem;

	--radius-small: 0.125rem;
	--radius-medium: 0.125rem;
	--radius-large: 3px;

	--radius-card: 0.25rem;
	--radius-button: 0.125rem;
	--radius-field: 0.125rem;

	--radius-pill: 9999px;

	--shadow-soft: 0 1px 0 0 #CDD9DC;
	--shadow-raised: 0 10px 24px -16px rgb(11 19 22 / 0.28);
	--shadow-overlay: 0 10px 24px -8px rgb(11 19 22 / 0.30);
	--shadow-panel: 0 12px 24px -12px rgb(11 19 22 / 0.24);
	--shadow-floating: 0 20px 40px -16px rgb(11 19 22 / 0.34);
}

.tone-inverse {
	--color-danger: var(--sina-alarm-inverse);
	--color-success: #6FD39C;
	--color-warning: #F0B86A;
}