/*
 * Tech City Real Estate: brand design tokens and shared brand pieces.
 * Source of truth: BRAND-DESIGN-BRIEF.md (Brand Guide Nov 2025 + Company Profile 2027).
 * Everything is namespaced "tc-" so it cannot clash with the old theme (main.css).
 */

:root {
    /* Colour */
    --tc-navy: #051133;
    --tc-navy-2: #0b1c4a;
    --tc-blue: #01579B;
    --tc-bright: #0288D1;
    --tc-sky: #84D8FF;
    --tc-yellow: #FFD602;
    --tc-white: #FFFFFF;
    --tc-tint: #F2F7FB;
    --tc-ink: #0d1630;
    --tc-muted: #5d6782;
    --tc-line: #dfe6f0;

    /* Type: Poppins everywhere */
    --tc-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* Brand asymmetric radius: 0 X 0 X (opposite corners rounded) */
    --tc-radius: 28px;
    --tc-radius-sm: 18px;

    /* Spacing */
    --tc-gutter: 20px;
    --tc-section: clamp(56px, 8vw, 104px);
    --tc-container: 1200px;

    /* Depth and focus */
    --tc-shadow: 0 12px 32px rgba(5, 17, 51, 0.10);
    --tc-shadow-lg: 0 24px 60px rgba(5, 17, 51, 0.22);
    --tc-focus: 0 0 0 3px #fff, 0 0 0 6px var(--tc-bright);
}

/* ---------- Layout helpers ---------- */
.tc-container {
    width: 100%;
    max-width: calc(var(--tc-container) + var(--tc-gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--tc-gutter);
}

.tc-radius {
    border-radius: 0 var(--tc-radius) 0 var(--tc-radius);
}

.tc-radius-sm {
    border-radius: 0 var(--tc-radius-sm) 0 var(--tc-radius-sm);
}

/* ---------- Building-bar motif (from the logo icon) ---------- */
.tc-bars {
    display: inline-flex;
    align-items: flex-end;
    gap: 5px;
    --tc-bar-w: 12px;
}

.tc-bars i {
    display: block;
    width: var(--tc-bar-w);
    background: var(--tc-bright);
    clip-path: polygon(0 18%, 100% 0, 100% 100%, 0 100%);
}

.tc-bars i:nth-child(1) { height: calc(var(--tc-bar-w) * 1.6); }
.tc-bars i:nth-child(2) { height: calc(var(--tc-bar-w) * 2.5); background: var(--tc-blue); }
.tc-bars i:nth-child(3) { height: calc(var(--tc-bar-w) * 3.4); }

.tc-bars--lg { --tc-bar-w: 18px; gap: 7px; }
.tc-bars--on-dark i:nth-child(2) { background: var(--tc-sky); }

/* ---------- Eyebrow label ---------- */
.tc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--tc-blue); /* AA on white; the bright blue is decorative only */
}

.tc-eyebrow::before {
    content: "";
    width: 34px;
    height: 2px;
    background: var(--tc-bright);
}

.tc-on-dark .tc-eyebrow,
.tc-eyebrow--light {
    color: var(--tc-sky);
}

.tc-on-dark .tc-eyebrow::before,
.tc-eyebrow--light::before {
    background: var(--tc-sky);
}

/* ---------- Buttons (44px+ tap targets) ---------- */
.tc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 26px;
    border: 2px solid transparent;
    border-radius: 999px;
    font-family: var(--tc-font);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.tc-btn:hover { transform: translateY(-1px); text-decoration: none; }

.tc-btn:focus-visible,
.tc-link:focus-visible,
.tc-home a:focus-visible,
.tc-home button:focus-visible {
    outline: none;
    box-shadow: var(--tc-focus);
}

.tc-btn--primary { background: var(--tc-blue); border-color: var(--tc-blue); color: #fff; }
.tc-btn--primary:hover { background: var(--tc-bright); border-color: var(--tc-bright); color: #fff; }

.tc-btn--outline { background: transparent; border-color: var(--tc-blue); color: var(--tc-blue); }
.tc-btn--outline:hover { background: var(--tc-blue); color: #fff; }

.tc-btn--outline-light { background: transparent; border-color: rgba(255, 255, 255, 0.75); color: #fff; }
.tc-btn--outline-light:hover { background: #fff; border-color: #fff; color: var(--tc-navy); }

/* The one key CTA that may use the accent yellow */
.tc-btn--yellow { background: var(--tc-yellow); border-color: var(--tc-yellow); color: var(--tc-navy); }
.tc-btn--yellow:hover { background: #fff; border-color: #fff; color: var(--tc-navy); }

.tc-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-weight: 600;
    color: var(--tc-blue);
    text-decoration: none;
}

.tc-link:hover { color: var(--tc-bright); text-decoration: none; }

/* ---------- Chips ---------- */
.tc-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--tc-tint);
    color: var(--tc-blue);
}

.tc-chip--navy { background: var(--tc-navy); color: #fff; }
.tc-chip--sky { background: rgba(132, 216, 255, 0.18); color: var(--tc-sky); }
.tc-chip--yellow { background: var(--tc-yellow); color: var(--tc-navy); }

@media (prefers-reduced-motion: reduce) {
    .tc-btn { transition: none; }
    .tc-btn:hover { transform: none; }
}

/* ======================================================================
 * Theme bridge: the old theme (main.css) is driven by its own variables.
 * Re-pointing them at the brand makes every existing page (buttons, links,
 * icons, headings, section tints) pick up the brand colours and Poppins
 * without rewriting each page.
 * ====================================================================== */
:root {
    --main-h: 207;            /* was orange; now the brand blue #01579B */
    --main-s: 99%;
    --main-l: 31%;
    --heading-font: var(--tc-font);
    --body-font: var(--tc-font);
    --poppins-font: var(--tc-font);
    --heading-color: 224 82% 11%;   /* navy #051133 */
    --body-color: 224 17% 44%;      /* muted #5d6782, AA on white */
    --body-bg: 0 0% 100%;           /* white main background */
    --section-bg: 207 60% 96%;
    --gray-100: #F2F7FB;            /* light tints are pale blue, not grey */
    --border-color: #dfe6f0;
}