/* =========================================
   Design System - Design Tokens
   Monofix Theme
   ========================================= */

:root {
    /* --- Palette --- */
    --color-primary: #92C01F;
    --color-primary-dark: #92C01F;
    --color-primary-light: #92C01F;

    /* Dark Theme */
    --color-bg-dark: #1d1d1d;
    --color-bg-darker: #1d1d1d;
    --color-bg-footer: #1d1d1d;

    /* Neutrals */
    --color-bg-body: #f7f6ef;
    --color-bg-subtle: #f8f9fa;
    --color-text-main: #1d1d1d;
    --color-text-muted: #666666;
    --color-text-light: #ffffff;
    --color-border: #e0e0e0;
	
	/* Header */
	--header:#1d1d1d;

    /* Semantics */
    --color-success: #28a745;
    --color-error: #dc3545;

    /* --- Typography & colors --- */
    --font-heading: 'Poppins', sans-serif;
	--font-heading-weight: 700 !important;
    --font-body: 'Poppins', sans-serif;
	--font-body-weight: 500 !important;
	--color-heading: #92C01F;
	--color-heading-secondary: #1D1D1D;
	--color-heading-light: #ffffff;
	--color-body: #1D1D1D;

    /* Base Sizes */
    --fs-base: clamp(18px, 18px, 18px);
    --fs-sm: 0.875rem;
    /* 14px */
    --fs-md: 1rem;
    /* 16px */
    --fs-lg: clamp(20px, 20px, 20px);
    /* 20px */
    --fs-xl: clamp(24px, 24px, 24px);
    /* 24px */
    --fs-2xl: clamp(26px, 26px, 26px);
    /* 32px */
    --fs-3xl: clamp(30px, 30px, 30px);
    /* 40px */
    --fs-4xl: clamp(35px, 45px, 45px);
    /* 56px */
    --fs-hero: clamp(35px, 45px, 45px);
    /* 72px */

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 5rem;
	
	/* NOSTOJEN VÄLIT */
	--services-spacing: 1rem;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
}

/* Base Styles */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    background-color: var(--color-bg-body);
    color: var(--color-text-main);
    font-family: var(--font-body);
    font-weight: var(--font-body-weight);
    line-height: 1.6;
    margin: 0;
    font-size: var(--fs-base);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    line-height: 1.1;
    color: var(--color-heading);
    margin-bottom: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

h1 {
    font-size: var(--fs-hero);
	font-style: italic;
}

h2 {
    font-size: var(--fs-4xl);
	font-style: italic;
}

h3 {
    font-size: var(--fs-3xl);
	color: var(--color-heading-secondary) !important;
}

h4 {
    font-size: var(--fs-2xl);
	color: var(--color-heading-secondary) !important;
}

h5 {
	color: var(--color-heading-secondary) !important;
}

h6{
	color: var(--color-heading-secondary) !important;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-primary-light);
}

/* Container Utility */
.container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/* Button Styles */
.btn {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-lg);
    font-family: var(--font-heading);
    font-size: var(--fs-lg);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-normal);
    text-decoration: none;
}

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-bg-dark);
}

.btn-primary:hover {
    background-color: var(--color-primary-light);
    color: var(--color-bg-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-outline {
    background-color: transparent;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
}

.btn-outline:hover {
    background-color: var(--color-primary);
    color: var(--color-bg-dark);
}

/* Card Styles */
.card {
    background-color: var(--color-bg-body);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* Service Card */
.service-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
}

.service-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform var(--transition-normal);
}

.service-card:hover img {
    transform: scale(1.05);
}

.service-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    padding: var(--spacing-md);
}

.service-card-title {
    color: var(--color-text-light);
    margin: 0;
    font-size: var(--fs-2xl);
}

/* Tables */
table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--spacing-lg) 0;
}

th,
td {
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

th {
    font-family: var(--font-heading);
    font-size: var(--fs-lg);
    text-transform: uppercase;
    color: var(--color-primary);
    background-color: var(--color-bg-subtle);
}

/* Lists */
ul.service-list {
    list-style: none;
    padding: 0;
}

ul.service-list li {
    padding: var(--spacing-xs) 0;
    padding-left: var(--spacing-lg);
    position: relative;
}

ul.service-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background-color: var(--color-primary);
    border-radius: 50%;
}

/* Text Utilities */
.text-center {
    text-align: center;
}

.text-light {
    color: var(--color-text-light);
}

.text-muted {
    color: var(--color-text-muted);
}

.text-primary {
    color: var(--color-primary);
}

/* Background Utilities */
.bg-dark {
    background-color: var(--color-bg-dark);
}

.bg-darker {
    background-color: var(--color-bg-darker);
}

.bg-primary {
    background-color: var(--color-primary);
}

/* Spacing Utilities */
.mt-sm {
    margin-top: var(--spacing-sm);
}

.mt-md {
    margin-top: var(--spacing-md);
}

.mt-lg {
    margin-top: var(--spacing-lg);
}

.mt-xl {
    margin-top: var(--spacing-xl);
}

.mb-sm {
    margin-bottom: var(--spacing-sm);
}

.mb-md {
    margin-bottom: var(--spacing-md);
}

.mb-lg {
    margin-bottom: var(--spacing-lg);
}

.mb-xl {
    margin-bottom: var(--spacing-xl);
}

.py-lg {
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
}

.py-xl {
    padding-top: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
}

.py-2xl {
    padding-top: var(--spacing-2xl);
    padding-bottom: var(--spacing-2xl);
}