/**
 * Tranquility Counselling Services — Design System
 * Phase 2 tokens. All other theme CSS references these via var().
 * Source of truth for colour, type, spacing, radius, shadow, z-index.
 */

/* ─── 1. COLOUR TOKENS ──────────────────────────────────────────────────── */
:root {
    /* Brand palette */
    --tc-gold:          #B9905D;   /* primary accent — buttons, links, highlights */
    --tc-gold-dark:     #9A7344;   /* hover / pressed state */
    --tc-gold-light:    #D4B48A;   /* tints, backgrounds */
    --tc-gold-muted:    #F0E6D8;   /* very light tint — section backgrounds */

    --tc-navy:          #293B46;   /* dark text, headings */
    --tc-navy-mid:      #384E5C;   /* primary dark — nav, footers */
    --tc-navy-light:    #4E6878;   /* secondary text on dark bg */

    --tc-warm-white:    #F6F2ED;   /* off-white page sections */
    --tc-warm-border:   #EBE2D8;   /* rule lines, card borders */

    --tc-white:         #ffffff;
    --tc-black:         #0E1A20;   /* near-black for max-contrast text */

    /* Semantic */
    --tc-text:          var(--tc-navy);
    --tc-text-muted:    #6B7C86;
    --tc-bg:            var(--tc-white);
    --tc-bg-alt:        var(--tc-warm-white);
    --tc-accent:        var(--tc-gold);
    --tc-accent-hover:  var(--tc-gold-dark);
    --tc-border:        var(--tc-warm-border);

    /* Status */
    --tc-success:       #4A8C6F;
    --tc-error:         #C0392B;

    /* RGB helpers for rgba() */
    --tc-gold-rgb:      185, 144, 93;
    --tc-navy-rgb:      41, 59, 70;
    --tc-white-rgb:     255, 255, 255;
}

/* ─── 2. TYPOGRAPHY TOKENS ──────────────────────────────────────────────── */
:root {
    /* Families */
    --tc-font-body:     "Lexend", sans-serif;
    --tc-font-heading:  "Castoro", serif;
    --tc-font-display:  "Castoro", serif;

    /* Scale — mobile first, desktop overrides in media query below */
    --tc-fs-display:    2.5rem;    /* 40px */
    --tc-fs-h1:         2rem;      /* 32px */
    --tc-fs-h2:         1.625rem;  /* 26px */
    --tc-fs-h3:         1.25rem;   /* 20px */
    --tc-fs-h4:         1.125rem;  /* 18px */
    --tc-fs-h5:         1rem;      /* 16px */
    --tc-fs-h6:         0.9375rem; /* 15px */
    --tc-fs-body:       0.9375rem; /* 15px */
    --tc-fs-small:      0.8125rem; /* 13px */
    --tc-fs-caption:    0.75rem;   /* 12px */

    /* Line heights */
    --tc-lh-heading:    1.2;
    --tc-lh-body:       1.75;
    --tc-lh-tight:      1.1;

    /* Letter spacing */
    --tc-ls-heading:    -0.01em;
    --tc-ls-label:      0.08em;
    --tc-ls-body:       0;

    /* Font weights */
    --tc-fw-regular:    400;
    --tc-fw-medium:     500;
    --tc-fw-semibold:   600;
    --tc-fw-bold:       700;
}

@media (min-width: 992px) {
    :root {
        --tc-fs-display:  3.5rem;   /* 56px */
        --tc-fs-h1:       2.75rem;  /* 44px */
        --tc-fs-h2:       2.125rem; /* 34px */
        --tc-fs-h3:       1.625rem; /* 26px */
        --tc-fs-h4:       1.25rem;  /* 20px */
        --tc-fs-h5:       1.0625rem;/* 17px */
        --tc-fs-h6:       0.9375rem;/* 15px */
    }
}

/* ─── 3. SPACING TOKENS ─────────────────────────────────────────────────── */
:root {
    --tc-space-2:   0.125rem;  /*  2px */
    --tc-space-4:   0.25rem;   /*  4px */
    --tc-space-8:   0.5rem;    /*  8px */
    --tc-space-12:  0.75rem;   /* 12px */
    --tc-space-16:  1rem;      /* 16px */
    --tc-space-24:  1.5rem;    /* 24px */
    --tc-space-32:  2rem;      /* 32px */
    --tc-space-40:  2.5rem;    /* 40px */
    --tc-space-48:  3rem;      /* 48px */
    --tc-space-64:  4rem;      /* 64px */
    --tc-space-80:  5rem;      /* 80px */
    --tc-space-96:  6rem;      /* 96px */
    --tc-space-120: 7.5rem;    /* 120px */

    /* Section vertical rhythm */
    --tc-section-py:    var(--tc-space-80);
    --tc-section-py-sm: var(--tc-space-48);
}

@media (min-width: 992px) {
    :root {
        --tc-section-py:    var(--tc-space-96);
        --tc-section-py-sm: var(--tc-space-64);
    }
}

/* ─── 4. LAYOUT TOKENS ──────────────────────────────────────────────────── */
:root {
    --tc-container:         1200px;
    --tc-container-narrow:  780px;
    --tc-container-wide:    1400px;
    --tc-gutter:            1.5rem;
}

/* ─── 5. RADIUS & SHADOW ─────────────────────────────────────────────────── */
:root {
    --tc-radius-sm:   4px;
    --tc-radius:      8px;
    --tc-radius-lg:   16px;
    --tc-radius-pill: 9999px;

    --tc-shadow-sm:   0 1px 3px rgba(var(--tc-navy-rgb), 0.08);
    --tc-shadow:      0 4px 16px rgba(var(--tc-navy-rgb), 0.10);
    --tc-shadow-lg:   0 12px 40px rgba(var(--tc-navy-rgb), 0.14);
}

/* ─── 6. Z-INDEX ─────────────────────────────────────────────────────────── */
:root {
    --tc-z-below:   -1;
    --tc-z-base:     0;
    --tc-z-raised:   10;
    --tc-z-dropdown: 100;
    --tc-z-sticky:   200;
    --tc-z-modal:    300;
    --tc-z-toast:    400;
}

/* ─── 7. TRANSITIONS ────────────────────────────────────────────────────── */
:root {
    --tc-ease:       cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --tc-ease-out:   cubic-bezier(0.0, 0.0, 0.2, 1);
    --tc-duration:   220ms;
    --tc-duration-slow: 380ms;
}

/* ─── 8. UTILITY CLASSES ────────────────────────────────────────────────── */

/* Buttons */
.tc-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             var(--tc-space-8);
    padding:         var(--tc-space-12) var(--tc-space-32);
    font-family:     var(--tc-font-body);
    font-size:       var(--tc-fs-body);
    font-weight:     var(--tc-fw-semibold);
    line-height:     1;
    letter-spacing:  var(--tc-ls-label);
    text-transform:  uppercase;
    border-radius:   var(--tc-radius-pill);
    border:          2px solid transparent;
    cursor:          pointer;
    text-decoration: none;
    transition:      background var(--tc-duration) var(--tc-ease),
                     color      var(--tc-duration) var(--tc-ease),
                     border-color var(--tc-duration) var(--tc-ease),
                     box-shadow var(--tc-duration) var(--tc-ease);
}

.tc-btn--primary {
    background:   var(--tc-gold);
    color:        var(--tc-white);
    border-color: var(--tc-gold);
}
.tc-btn--primary:hover,
.tc-btn--primary:focus-visible {
    background:   var(--tc-gold-dark);
    border-color: var(--tc-gold-dark);
    box-shadow:   0 4px 14px rgba(var(--tc-gold-rgb), 0.4);
    color:        var(--tc-white);
}

.tc-btn--outline {
    background:   transparent;
    color:        var(--tc-gold);
    border-color: var(--tc-gold);
}
.tc-btn--outline:hover,
.tc-btn--outline:focus-visible {
    background:   var(--tc-gold);
    color:        var(--tc-white);
}

.tc-btn--ghost {
    background:   transparent;
    color:        var(--tc-white);
    border-color: rgba(var(--tc-white-rgb), 0.6);
}
.tc-btn--ghost:hover,
.tc-btn--ghost:focus-visible {
    background:   rgba(var(--tc-white-rgb), 0.15);
    border-color: var(--tc-white);
    color:        var(--tc-white);
}

/* Section wrappers */
.tc-section {
    padding-top:    var(--tc-section-py);
    padding-bottom: var(--tc-section-py);
}
.tc-section--sm {
    padding-top:    var(--tc-section-py-sm);
    padding-bottom: var(--tc-section-py-sm);
}
.tc-section--alt {
    background: var(--tc-bg-alt);
}
.tc-section--dark {
    background: var(--tc-navy-mid);
    color:      var(--tc-white);
}
.tc-section--gold {
    background: var(--tc-gold);
    color:      var(--tc-white);
}

/* Section heading group */
.tc-section-head {
    max-width:     600px;
    margin-bottom: var(--tc-space-48);
}
.tc-section-head--center {
    margin-left:  auto;
    margin-right: auto;
    text-align:   center;
}
.tc-section-head__label {
    display:        inline-block;
    font-family:    var(--tc-font-body);
    font-size:      var(--tc-fs-caption);
    font-weight:    var(--tc-fw-semibold);
    letter-spacing: var(--tc-ls-label);
    text-transform: uppercase;
    color:          var(--tc-gold);
    margin-bottom:  var(--tc-space-12);
}
.tc-section-head__title {
    font-family:    var(--tc-font-heading);
    font-size:      var(--tc-fs-h2);
    font-weight:    var(--tc-fw-regular);
    line-height:    var(--tc-lh-heading);
    letter-spacing: var(--tc-ls-heading);
    color:          var(--tc-navy);
    margin:         0 0 var(--tc-space-16);
}
.tc-section--dark  .tc-section-head__title,
.tc-section--gold  .tc-section-head__title { color: var(--tc-white); }
.tc-section-head__text {
    font-size:  var(--tc-fs-body);
    color:      var(--tc-text-muted);
    line-height: var(--tc-lh-body);
    margin:     0;
}
.tc-section--dark .tc-section-head__text,
.tc-section--gold .tc-section-head__text { color: rgba(var(--tc-white-rgb), 0.8); }

/* Cards */
.tc-card {
    background:    var(--tc-white);
    border:        1px solid var(--tc-border);
    border-radius: var(--tc-radius-lg);
    overflow:      hidden;
    box-shadow:    var(--tc-shadow-sm);
    transition:    box-shadow var(--tc-duration) var(--tc-ease),
                   transform  var(--tc-duration) var(--tc-ease);
}
.tc-card:hover {
    box-shadow: var(--tc-shadow);
    transform:  translateY(-2px);
}
.tc-card__body {
    padding: var(--tc-space-32);
}
.tc-card__img img {
    width:       100%;
    height:      220px;
    object-fit:  cover;
    display:     block;
}

/* ─── 9. ACCESSIBILITY ──────────────────────────────────────────────────── */
:focus-visible {
    outline:        2px solid var(--tc-gold);
    outline-offset: 3px;
}