/**
 * DEKA design tokens
 *
 * The single source of truth for colour, type, space, motion and layout.
 * Components may only reference these variables — never raw values. Values were
 * derived from the production site so the rebuild matches the existing look.
 */

/* ==========================================================================
   Fonts — self-hosted, subset to Latin + Georgian (see tools/ font pipeline)
   ========================================================================== */

@font-face {
  font-family: 'TBCCaps';
  src: url('../fonts/TBCContracticaCAPS-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'TBCCaps';
  src: url('../fonts/TBCContracticaCAPS-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'TBCCaps';
  src: url('../fonts/TBCContracticaCAPS-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'TBCCaps';
  src: url('../fonts/TBCContracticaCAPS-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'FiraGO';
  src: url('../fonts/FiraGO-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'FiraGO';
  src: url('../fonts/FiraGO-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'FiraGO';
  src: url('../fonts/FiraGO-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'FiraGO';
  src: url('../fonts/FiraGO-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ==========================================================================
     Colour — raw palette. Use the semantic aliases below in components.
     ========================================================================== */

  --deka-oxblood-900: #3A0808;
  --deka-oxblood-800: #510B0B; /* brand primary — listings, buttons */
  --deka-oxblood-700: #5D1520; /* brand secondary — logo, menu overlay */
  --deka-oxblood-600: #7A1B2A; /* interactive hover */
  --deka-oxblood-500: #8B2E3F; /* lighter burgundy — header call-to-action */
  --deka-oxblood-050: #FFF5F5; /* tint */

  --deka-sand-050: #F5F5F0;    /* warm page background */
  --deka-sand-075: #EEEAE7;    /* filter controls on the warm background */
  --deka-sand-100: #EAE5E1;    /* header once scrolled */
  --deka-sand-300: #BBB7B4;    /* hairline on warm surfaces */
  --deka-taupe-500: #8B7865;   /* muted text on warm surfaces */
  --deka-white: #FFFFFF;
  --deka-black: #000000;

  --deka-grey-700: #4A4A4A;
  --deka-grey-500: #767676;
  --deka-grey-400: #999999;
  --deka-grey-300: #C6C6C6;
  --deka-grey-200: #D0D0D0;
  --deka-grey-100: #E5E5E5;
  --deka-grey-050: #F2F2F2;

  /* Deep teal used for the project headline figures. */
  --deka-teal-900: #072634;

  /* Deep green the live site sets news articles in. */
  --deka-green-900: #19391F;

  --deka-green-600: #16A34A;
  --deka-amber-500: #D97706;
  --deka-red-600: #DC2626;

  /* --- Semantic: surfaces --- */
  --deka-surface-page: var(--deka-sand-050);
  --deka-surface-raised: var(--deka-white);
  /* Cards over the warm page: translucent white, so the background tints them. */
  --deka-surface-card: rgb(255 255 255 / 38%);
  --deka-surface-control: var(--deka-sand-075);
  --deka-surface-sunken: var(--deka-grey-050);
  --deka-surface-inverse: var(--deka-oxblood-800);
  --deka-surface-tint: var(--deka-oxblood-050);

  /* --- Semantic: text --- */
  --deka-text: var(--deka-black);
  --deka-text-muted: var(--deka-grey-500);
  --deka-text-subtle: var(--deka-grey-400);
  --deka-text-on-inverse: var(--deka-white);
  --deka-text-brand: var(--deka-oxblood-800);
  --deka-text-article: var(--deka-green-900);

  /* --- Semantic: lines --- */
  --deka-border: var(--deka-grey-200);
  --deka-border-strong: var(--deka-grey-300);
  --deka-border-card: rgb(0 0 0 / 20%);
  --deka-divider: var(--deka-grey-100);
  --deka-divider-warm: var(--deka-grey-300); /* hairline between filter sections */
  --deka-divider-card: rgb(0 0 0 / 10%);     /* rows inside a card */
  --deka-track: rgb(93 21 32 / 13%);         /* unfilled part of a range slider */
  --deka-focus-ring: var(--deka-oxblood-600);

  /* --- Semantic: interactive --- */
  --deka-action: var(--deka-oxblood-800);
  --deka-action-hover: var(--deka-oxblood-600);
  --deka-action-text: var(--deka-white);

  /* --- Semantic: apartment status --- */
  --deka-status-available: var(--deka-green-600);
  --deka-status-reserved: var(--deka-amber-500);
  --deka-status-sold: var(--deka-red-600);

  /* Per-project accent. Overridden inline from the ACF `project_color` field. */
  --deka-project-accent: var(--deka-oxblood-800);

  /* ==========================================================================
     Typography
     ========================================================================== */

  --deka-font-display: 'TBCCaps', 'FiraGO', 'Noto Sans Georgian', sans-serif;
  --deka-font-body: 'FiraGO', 'Noto Sans Georgian', system-ui, sans-serif;

  /* Fluid scale: min at 360px viewport, max at 1440px. */
  --deka-text-xs: clamp(0.6875rem, 0.66rem + 0.12vw, 0.75rem);   /* 11 → 12 */
  --deka-text-sm: clamp(0.75rem, 0.71rem + 0.19vw, 0.875rem);    /* 12 → 14 */
  --deka-text-base: clamp(0.875rem, 0.85rem + 0.12vw, 1rem);     /* 14 → 16 */
  --deka-text-md: clamp(1rem, 0.95rem + 0.23vw, 1.125rem);       /* 16 → 18 */
  --deka-text-lg: clamp(1.125rem, 1.03rem + 0.42vw, 1.5rem);     /* 18 → 24 */
  --deka-text-xl: clamp(1.375rem, 1.16rem + 0.93vw, 2rem);       /* 22 → 32 */
  --deka-text-2xl: clamp(1.75rem, 1.38rem + 1.62vw, 2.75rem);    /* 28 → 44 */
  --deka-text-3xl: clamp(2rem, 1.4rem + 2.7vw, 3.75rem);         /* 32 → 60 */

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

  --deka-leading-tight: 1.1;
  --deka-leading-snug: 1.25;
  --deka-leading-normal: 1.5;
  --deka-leading-relaxed: 1.7;

  --deka-tracking-tight: -0.02em;
  --deka-tracking-normal: 0;
  --deka-tracking-wide: 0.04em;
  --deka-tracking-wider: 0.12em;

  /* ==========================================================================
     Space — 4px base, used for both gaps and rhythm
     ========================================================================== */

  --deka-space-3xs: 0.25rem; /* 4 */
  --deka-space-2xs: 0.5rem;  /* 8 */
  --deka-space-xs: 0.75rem;  /* 12 */
  --deka-space-sm: 1rem;     /* 16 */
  --deka-space-md: 1.5rem;   /* 24 */
  --deka-space-lg: 2rem;     /* 32 */
  --deka-space-xl: 3rem;     /* 48 */
  --deka-space-2xl: 4rem;    /* 64 */
  --deka-space-3xl: 6rem;    /* 96 */

  /* Vertical rhythm between page sections, fluid. */
  --deka-section-gap: clamp(3rem, 2rem + 5vw, 7.5rem);

  /* ==========================================================================
     Layout
     ========================================================================== */

  --deka-container-max: 82.5rem;  /* 1320 */
  --deka-container-wide: 97.5rem; /* 1560 — filter + results browsing, needs the width for a 3-up grid */
  --deka-container-narrow: 46rem; /* 736 — long-form reading measure */
  --deka-gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --deka-header-height: 5.625rem; /* 90 — matches the live header */

  /* ==========================================================================
     Radii & elevation
     ========================================================================== */

  --deka-radius-2xs: 0.1875rem; /* 3 — form controls */
  --deka-radius-xs: 0.3125rem;  /* 5 — buttons */
  --deka-radius-sm: 0.5rem;   /* 8 */
  --deka-radius-md: 0.75rem;  /* 12 */
  --deka-radius-lg: 1.25rem;  /* 20 */
  --deka-radius-pill: 62.4375rem;

  --deka-shadow-sm: 0 1px 3px rgb(0 0 0 / 6%);
  --deka-shadow-md: 0 4px 16px rgb(0 0 0 / 8%);
  --deka-shadow-lg: 0 10px 50px rgb(0 0 0 / 18%);

  /* ==========================================================================
     Motion — one vocabulary for CSS transitions and GSAP alike
     ========================================================================== */

  --deka-duration-fast: 150ms;
  --deka-duration-base: 300ms;
  --deka-duration-slow: 600ms;
  --deka-duration-slower: 1000ms;

  --deka-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --deka-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --deka-ease-emphasis: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Distance a revealed element travels. */
  --deka-reveal-distance: 1.5rem;

  /* ==========================================================================
     Layering — a closed set, so nothing needs z-index: 999999 again
     ========================================================================== */

  --deka-z-base: 1;
  --deka-z-dropdown: 50;   /* menus anchored to in-flow content */
  --deka-z-sticky: 100;
  --deka-z-overlay: 200;   /* fullscreen menu */
  --deka-z-header: 300;    /* above the overlay: its close button lives here */
  --deka-z-drawer: 400;
  --deka-z-backdrop: 500;
  --deka-z-modal: 600;
  --deka-z-toast: 700;
}

/* Dark sections (used by benefit carousels and inverse bands). */
.deka-theme-dark {
  --deka-surface-page: var(--deka-oxblood-900);
  --deka-surface-raised: var(--deka-oxblood-800);
  --deka-text: var(--deka-white);
  --deka-text-muted: var(--deka-grey-300);
  --deka-text-subtle: var(--deka-grey-400);
  --deka-border: rgb(255 255 255 / 18%);
  --deka-divider: rgb(255 255 255 / 12%);
  --deka-action: var(--deka-white);
  --deka-action-text: var(--deka-oxblood-800);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --deka-duration-fast: 1ms;
    --deka-duration-base: 1ms;
    --deka-duration-slow: 1ms;
    --deka-duration-slower: 1ms;
    --deka-reveal-distance: 0;
  }
}