/* ==========================================================
   TARG DESIGN SYSTEM
   Foundation 1.0

   Global visual language:
   - typography
   - spacing
   - radii
   - shadows
   - containers
   - transitions
   - image behaviour
   - shared component roles

   This file defines tokens only.
   It should not change existing layouts by itself.
   ========================================================== */

:root {

/* ======================================================
   1. COLORS
   ====================================================== */

--tds-color-navy-950: #0b1324;
--tds-color-navy-900: #111b31;
--tds-color-navy-850: #172033;
--tds-color-navy-800: #1c2840;

--tds-color-gold-700: #9a6f42;
--tds-color-gold-600: #ad7e49;
--tds-color-gold-500: #c99b5f;
--tds-color-gold-400: #d4b17a;
--tds-color-gold-200: #ead7bc;
--tds-color-gold-100: #f4e9da;

--tds-color-paper-100: #ffffff;
--tds-color-paper-200: #fbfaf8;
--tds-color-paper-300: #f7f5f1;
--tds-color-paper-400: #f1ede7;
--tds-color-paper-500: #e8e4de;

--tds-color-text-primary: #172033;
--tds-color-text-secondary: #596171;
--tds-color-text-muted: #747b89;
--tds-color-text-soft: #8b93a3;
--tds-color-text-inverse: #ffffff;

--tds-color-border-soft: rgba(23, 32, 51, .06);
--tds-color-border: rgba(23, 32, 51, .09);
--tds-color-border-strong: rgba(23, 32, 51, .14);

--tds-color-success: #2b7a51;
--tds-color-success-bg: rgba(43, 122, 81, .10);

--tds-color-error: #9a3030;
--tds-color-error-bg: rgba(154, 48, 48, .09);


/* ======================================================
   2. TYPOGRAPHY
   ====================================================== */

--tds-font-family:
var(--font-ui),
Satoshi,
Arial,
sans-serif;

--tds-font-heading:
var(--font-heading),
var(--font-ui),
Satoshi,
Arial,
sans-serif;

/*
 * Font weights.
 * Satoshi may map intermediate values to the closest
 * available font file depending on loaded variants.
 */

--tds-font-weight-regular: 400;
--tds-font-weight-medium: 500;
--tds-font-weight-semibold: 600;
--tds-font-weight-strong: 650;
--tds-font-weight-bold: 700;
--tds-font-weight-heavy: 800;

/*
 * Display and heading scale.
 */

--tds-display-xl-size: clamp(3.25rem, 6vw, 5.75rem);
--tds-display-xl-line: .98;
--tds-display-xl-weight: 650;
--tds-display-xl-tracking: -.052em;

--tds-h1-size: clamp(2.75rem, 5vw, 4.875rem);
--tds-h1-line: 1.01;
--tds-h1-weight: 650;
--tds-h1-tracking: -.048em;

--tds-h2-size: clamp(2rem, 3.2vw, 2.75rem);
--tds-h2-line: 1.12;
--tds-h2-weight: 650;
--tds-h2-tracking: -.038em;

--tds-h3-size: clamp(1.5rem, 2.3vw, 2rem);
--tds-h3-line: 1.22;
--tds-h3-weight: 600;
--tds-h3-tracking: -.028em;

--tds-h4-size: 1.3125rem;
--tds-h4-line: 1.3;
--tds-h4-weight: 650;
--tds-h4-tracking: -.018em;

/*
 * Text roles.
 */

--tds-lead-xl-size: clamp(1.375rem, 2vw, 1.8125rem);
--tds-lead-xl-line: 1.48;
--tds-lead-xl-weight: 450;
--tds-lead-xl-tracking: -.018em;

--tds-lead-size: clamp(1.0625rem, 1.5vw, 1.25rem);
--tds-lead-line: 1.65;
--tds-lead-weight: 400;
--tds-lead-tracking: -.01em;

--tds-body-lg-size: 1.25rem;
--tds-body-lg-line: 1.82;
--tds-body-lg-weight: 400;

--tds-body-size: 1.0625rem;
--tds-body-line: 1.74;
--tds-body-weight: 400;

--tds-body-sm-size: 1rem;
--tds-body-sm-line: 1.68;
--tds-body-sm-weight: 400;

--tds-meta-size: .8125rem;
--tds-meta-line: 1.5;
--tds-meta-weight: 500;
--tds-meta-tracking: .01em;

--tds-label-size: .6875rem;
--tds-label-line: 1.2;
--tds-label-weight: 700;
--tds-label-tracking: .15em;
--tds-label-transform: uppercase;


/* ======================================================
   3. SPACING
   ====================================================== */

/*
 * Base rhythm: 4 px.
 * Preferred layout rhythm:
 * 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96.
 */

--tds-space-1: .25rem;    /* 4px  */
--tds-space-2: .5rem;     /* 8px  */
--tds-space-3: .75rem;    /* 12px */
--tds-space-4: 1rem;      /* 16px */
--tds-space-5: 1.25rem;   /* 20px */
--tds-space-6: 1.5rem;    /* 24px */
--tds-space-7: 1.75rem;   /* 28px */
--tds-space-8: 2rem;      /* 32px */
--tds-space-10: 2.5rem;   /* 40px */
--tds-space-12: 3rem;     /* 48px */
--tds-space-14: 3.5rem;   /* 56px */
--tds-space-16: 4rem;     /* 64px */
--tds-space-20: 5rem;     /* 80px */
--tds-space-24: 6rem;     /* 96px */
--tds-space-28: 7rem;     /* 112px */
--tds-space-32: 8rem;     /* 128px */

--tds-section-gap-sm: clamp(3rem, 6vw, 4rem);
--tds-section-gap-md: clamp(4rem, 7vw, 6rem);
--tds-section-gap-lg: clamp(5rem, 9vw, 8rem);


/* ======================================================
   4. BORDER RADII
   ====================================================== */

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

/*
 * Semantic radii.
 */

--tds-radius-control: var(--tds-radius-sm);
--tds-radius-button: 14px;
--tds-radius-card: var(--tds-radius-md);
--tds-radius-image: var(--tds-radius-lg);
--tds-radius-panel: var(--tds-radius-lg);
--tds-radius-hero: var(--tds-radius-xl);


/* ======================================================
   5. SHADOWS
   ====================================================== */

--tds-shadow-xs:
0 6px 20px rgba(15, 23, 42, .035);

--tds-shadow-sm:
0 12px 38px rgba(15, 23, 42, .045);

--tds-shadow-md:
0 22px 58px rgba(15, 23, 42, .07);

--tds-shadow-lg:
0 28px 80px rgba(15, 23, 42, .10);

--tds-shadow-dark:
0 28px 80px rgba(0, 0, 0, .28);


/* ======================================================
   6. CONTAINERS
   ====================================================== */

--tds-container-wide: 1320px;
--tds-container-main: 1180px;
--tds-container-content: 820px;
--tds-container-reading: 760px;

--tds-page-gutter-desktop: 32px;
--tds-page-gutter-tablet: 24px;
--tds-page-gutter-mobile: 20px;


/* ======================================================
   7. IMAGE RATIOS
   ====================================================== */

--tds-ratio-cinematic: 16 / 9;
--tds-ratio-landscape: 3 / 2;
--tds-ratio-card: 4 / 3;
--tds-ratio-square: 1 / 1;
--tds-ratio-portrait: 4 / 5;


/* ======================================================
   8. TRANSITIONS
   ====================================================== */

--tds-duration-fast: 160ms;
--tds-duration-normal: 240ms;
--tds-duration-slow: 500ms;

--tds-ease-standard: cubic-bezier(.2, .7, .2, 1);
--tds-ease-enter: cubic-bezier(.16, 1, .3, 1);

--tds-transition-color:
color var(--tds-duration-fast) ease,
background-color var(--tds-duration-fast) ease,
border-color var(--tds-duration-fast) ease;

--tds-transition-card:
transform var(--tds-duration-normal) var(--tds-ease-standard),
box-shadow var(--tds-duration-normal) var(--tds-ease-standard),
border-color var(--tds-duration-normal) ease;

--tds-transition-image:
transform var(--tds-duration-slow) var(--tds-ease-standard);


/* ======================================================
   9. COMPONENT DIMENSIONS
   ====================================================== */

--tds-control-height-sm: 42px;
--tds-control-height-md: 52px;
--tds-control-height-lg: 56px;

--tds-button-height: 54px;
--tds-icon-button-size: 44px;

--tds-header-height-desktop: 124px;
--tds-header-height-tablet: 112px;
--tds-header-height-mobile: 112px;


/* ======================================================
   10. Z-INDEX
   ====================================================== */

--tds-z-base: 1;
--tds-z-content: 10;
--tds-z-dropdown: 100;
--tds-z-header: 1000;
--tds-z-overlay: 5000;
--tds-z-modal: 10000;

}


/* ==========================================================
   SEMANTIC TYPOGRAPHY CLASSES

   These classes are optional.
   Existing components will be migrated gradually.
   ========================================================== */

.tds-type-display {
font-family: var(--tds-font-family);
font-size: var(--tds-display-xl-size);
line-height: var(--tds-display-xl-line);
font-weight: var(--tds-display-xl-weight);
letter-spacing: var(--tds-display-xl-tracking);
}

.tds-type-h1 {
font-family: var(--tds-font-family);
font-size: var(--tds-h1-size);
line-height: var(--tds-h1-line);
font-weight: var(--tds-h1-weight);
letter-spacing: var(--tds-h1-tracking);
}

.tds-type-h2 {
font-family: var(--tds-font-family);
font-size: var(--tds-h2-size);
line-height: var(--tds-h2-line);
font-weight: var(--tds-h2-weight);
letter-spacing: var(--tds-h2-tracking);
}

.tds-type-h3 {
font-family: var(--tds-font-family);
font-size: var(--tds-h3-size);
line-height: var(--tds-h3-line);
font-weight: var(--tds-h3-weight);
letter-spacing: var(--tds-h3-tracking);
}

.tds-type-lead {
font-family: var(--tds-font-family);
font-size: var(--tds-lead-size);
line-height: var(--tds-lead-line);
font-weight: var(--tds-lead-weight);
letter-spacing: var(--tds-lead-tracking);
}

.tds-type-body {
font-family: var(--tds-font-family);
font-size: var(--tds-body-size);
line-height: var(--tds-body-line);
font-weight: var(--tds-body-weight);
}

.tds-type-meta {
font-family: var(--tds-font-family);
font-size: var(--tds-meta-size);
line-height: var(--tds-meta-line);
font-weight: var(--tds-meta-weight);
letter-spacing: var(--tds-meta-tracking);
}

.tds-type-label {
font-family: var(--tds-font-family);
font-size: var(--tds-label-size);
line-height: var(--tds-label-line);
font-weight: var(--tds-label-weight);
letter-spacing: var(--tds-label-tracking);
text-transform: var(--tds-label-transform);
}


/* ==========================================================
   SEMANTIC CONTAINERS
   ========================================================== */

.tds-container-wide {
width: min(
var(--tds-container-wide),
calc(100% - (var(--tds-page-gutter-desktop) * 2))
);
margin-inline: auto;
}

.tds-container-main {
width: min(
var(--tds-container-main),
calc(100% - (var(--tds-page-gutter-desktop) * 2))
);
margin-inline: auto;
}

.tds-container-content {
width: min(
var(--tds-container-content),
calc(100% - (var(--tds-page-gutter-desktop) * 2))
);
margin-inline: auto;
}

.tds-container-reading {
width: min(
var(--tds-container-reading),
calc(100% - (var(--tds-page-gutter-desktop) * 2))
);
margin-inline: auto;
}


/* ==========================================================
   SHARED MEDIA BEHAVIOUR

   Applied only when a component explicitly uses these classes.
   ========================================================== */

.tds-media {
position: relative;
display: block;
overflow: hidden;

background: var(--tds-color-paper-500);
}

.tds-media--card {
border-radius: var(--tds-radius-card);
}

.tds-media--image {
border-radius: var(--tds-radius-image);
}

.tds-media > img,
.tds-media > picture,
.tds-media > picture > img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

.tds-media--interactive > img,
.tds-media--interactive > picture > img {
transition: var(--tds-transition-image);
}

.tds-media--interactive:hover > img,
.tds-media--interactive:hover > picture > img {
transform: scale(1.03);
}


/* ==========================================================
   SHARED CARD BEHAVIOUR

   Existing cards will be migrated to these tokens later.
   ========================================================== */

.tds-surface {
border: 1px solid var(--tds-color-border-soft);
border-radius: var(--tds-radius-card);

background: var(--tds-color-paper-100);
box-shadow: var(--tds-shadow-sm);
}

.tds-surface--interactive {
transition: var(--tds-transition-card);
}

.tds-surface--interactive:hover {
transform: translateY(-3px);
border-color: rgba(154, 111, 66, .18);
box-shadow: var(--tds-shadow-md);
}


/* ==========================================================
   RESPONSIVE TOKEN ADJUSTMENTS
   ========================================================== */

@media (max-width: 1024px) {

:root {
--tds-page-gutter-desktop: var(--tds-page-gutter-tablet);
}

}

@media (max-width: 767px) {

:root {
--tds-page-gutter-desktop: var(--tds-page-gutter-mobile);

--tds-display-xl-size: clamp(2.75rem, 13vw, 3.75rem);
--tds-h1-size: clamp(2.5rem, 11vw, 3.25rem);
--tds-h2-size: clamp(1.875rem, 8vw, 2.25rem);
--tds-h3-size: clamp(1.5rem, 6vw, 1.875rem);

--tds-body-lg-size: 1.125rem;

--tds-section-gap-sm: 3rem;
--tds-section-gap-md: 4rem;
--tds-section-gap-lg: 5rem;
}

}


/* ==========================================================
   ACCESSIBILITY
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

:root {
--tds-duration-fast: 0ms;
--tds-duration-normal: 0ms;
--tds-duration-slow: 0ms;
}

.tds-surface--interactive,
.tds-media--interactive > img,
.tds-media--interactive > picture > img {
transition: none !important;
}

}