/**
 * ==========================================================
 * GM DESIGN SYSTEM
 * File: tokens.css
 * Description: Global Design Tokens
 * Single Source of Truth
 *
 * Project:
 * Güvencem Mobilya
 *
 * Version:
 * 2.0.1
 *
 * Last Update:
 * 16.08.2026
 * ==========================================================
 */

:root {

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

	--gm-color-primary: #f58220;
	--gm-color-primary-hover: #e36f0b;
	--gm-color-primary-dark: #cf6205;

	--gm-color-brand-amber: #f59e0b;
	--gm-color-brand-amber-hover: #e38b00;
	--gm-color-brand-amber-active: #cf7e00;

	--gm-color-secondary: #2d2d2d;

	--gm-color-white: #ffffff;
	--gm-color-black: #000000;

	--gm-color-text: #1d1d1f;
	--gm-color-text-light: #6e6e73;

	--gm-color-border: #e5e5e7;
	--gm-color-border-light: #f3f3f4;

	--gm-color-background: #ffffff;
	--gm-color-background-soft: #fafafa;
	--gm-color-background-muted: #f5f5f7;

	--gm-color-success: #2ea44f;
	--gm-color-warning: #f4b400;
	--gm-color-danger: #d93025;


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

	--gm-font-family:
		"Poppins",
		-system-ui,
		BlinkMacSystemFont,
		"Segoe UI",
		sans-serif;

	--gm-font-size-xs: .75rem;
	--gm-font-size-sm: .875rem;
	--gm-font-size-md: 1rem;
	--gm-font-size-lg: 1.125rem;
	--gm-font-size-xl: 1.375rem;
	--gm-font-size-2xl: 1.75rem;
	--gm-font-size-3xl: 2.25rem;

	--gm-font-weight-light: 300;
	--gm-font-weight-regular: 400;
	--gm-font-weight-medium: 500;
	--gm-font-weight-semibold: 600;
	--gm-font-weight-bold: 700;

	--gm-line-height-tight: 1.2;
	--gm-line-height-normal: 1.5;
	--gm-line-height-loose: 1.8;


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

	--gm-space-2xs: 4px;
	--gm-space-xs: 8px;
	--gm-space-sm: 12px;
	--gm-space-md: 16px;
	--gm-space-lg: 24px;
	--gm-space-xl: 32px;
	--gm-space-2xl: 48px;
	--gm-space-3xl: 64px;


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

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


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

	--gm-shadow-xs:
		0 1px 2px rgba(0,0,0,.05);

	--gm-shadow-sm:
		0 2px 6px rgba(0,0,0,.08);

	--gm-shadow-md:
		0 6px 18px rgba(0,0,0,.10);

	--gm-shadow-lg:
		0 16px 40px rgba(0,0,0,.14);


	/* ======================================================
	   FOCUS
	====================================================== */

	--gm-focus-ring-color:
		rgba(245,130,32,.24);

	--gm-focus-ring:
		3px solid var(--gm-focus-ring-color);

	--gm-focus-ring-offset:
		3px;


	/* ======================================================
	   MOTION TOKENS
	====================================================== */

	--gm-motion-fast: .18s;
	--gm-motion-normal: .28s;
	--gm-motion-slow: .40s;

	--gm-motion-bounce:
		cubic-bezier(.22,1,.36,1);

	--gm-motion-smooth:
		cubic-bezier(.4,0,.2,1);

	--gm-motion-premium:
		cubic-bezier(.19,1,.22,1);


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

	--gm-transition-fast:
		all var(--gm-motion-fast) var(--gm-motion-smooth);

	--gm-transition-normal:
		all var(--gm-motion-normal) var(--gm-motion-smooth);

	--gm-transition-slow:
		all var(--gm-motion-slow) var(--gm-motion-premium);


	/* ======================================================
	   LAYOUT
	====================================================== */

	--gm-container-width: 1320px;

	--gm-container-padding: 24px;

	--gm-section-spacing:
		clamp(64px,8vw,120px);

	--gm-content-width: 820px;

	--gm-grid-gap: 32px;


	/* ======================================================
	   COMPONENT TOKENS
	====================================================== */

	/* Buttons */

	--gm-button-height-sm: 40px;
	--gm-button-height-md: 48px;
	--gm-button-height-lg: 56px;

	--gm-button-padding:
		0 24px;


	/* Inputs */

	--gm-input-height: 52px;

	--gm-input-radius:
		var(--gm-radius-pill);


	/* Cards */

	--gm-card-radius:
		var(--gm-radius-xl);

	--gm-card-padding:
		32px;

	--gm-card-shadow:
		var(--gm-shadow-sm);

	--gm-card-shadow-hover:
		var(--gm-shadow-lg);


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

	--gm-z-header: 100;
	--gm-z-dropdown: 300;
	--gm-z-sticky: 500;
	--gm-z-modal: 900;
	--gm-z-toast: 999;
	--gm-z-loader: 1000;

}