/*
 * Talking Time brand palette — CSS custom properties scoped under
 * ``.tt-area``. Every TT component CSS file MUST import these tokens
 * and MUST NOT declare selectors outside the ``.tt-area`` scope.
 *
 * Brand Guidelines V1.0 · 2026
 */

.tt-area {
    /* --- Brand Colours (from Brand Guidelines p.08) --- */
    --tt-chatter-red:      #F23041;
    --tt-sunshine-orange:  #F28705;
    --tt-talk-teal:        #03A696;
    --tt-sky-blue:         #0597F2;
    --tt-story-purple:     #7E4A8C;

    /* --- Primary / functional mappings --- */
    --tt-primary:          #03A696;   /* Talk Teal — primary buttons & actions */
    --tt-primary-dark:     #028578;   /* Teal darkened for hover states */
    --tt-primary-soft:     #d4f5f0;   /* Teal tint for backgrounds */

    /* --- Warm accents --- */
    --tt-accent-warm:      #F28705;   /* Sunshine Orange */
    --tt-accent-soft:      #fef0d4;   /* Pale orange tint */
    --tt-accent-warm-dark: #c06d04;

    /* --- Surfaces --- */
    --tt-surface:          #ffffff;
    --tt-surface-subtle:   #ffedda;   /* Pale sunshine orange — page background */
    --tt-surface-raised:   #f9f6fa;   /* Cards, section wells */

    /* --- Text (Brand Guidelines: Ink #2C2C2C) --- */
    --tt-text:             #2C2C2C;   /* Ink — body text */
    --tt-text-muted:       #6b6b6b;
    --tt-text-inverse:     #ffffff;

    /* --- State colours --- */
    --tt-success:          #03A696;   /* Talk Teal */
    --tt-warning:          #F28705;   /* Sunshine Orange */
    --tt-danger:           #F23041;   /* Chatter Red */
    --tt-info:             #0597F2;   /* Sky Blue */

    /* --- Buddy Group palette (Requirement 37.3) --- */
    --tt-buddy-1:          #f4a7a7;
    --tt-buddy-2:          #f5c98e;
    --tt-buddy-3:          #f4e28f;
    --tt-buddy-4:          #cfe7a5;
    --tt-buddy-5:          #9cd6bb;
    --tt-buddy-6:          #9cd1e0;
    --tt-buddy-7:          #a8b6e8;
    --tt-buddy-8:          #c3a7e0;
    --tt-buddy-9:          #e6a5d0;
    --tt-buddy-10:         #d6b69a;
    --tt-buddy-11:         #b5ceb5;
    --tt-buddy-12:         #bdbdbd;

    /* --- Typography (Brand Guidelines p.10) --- */
    --tt-font-heading: 'Fredoka', sans-serif;
    --tt-font-body: 'Nunito', sans-serif;
    --tt-font-size-sm: 12px;
    --tt-font-size-md: 15.5px;
    --tt-font-size-lg: 18px;
    --tt-font-size-xl: 24px;
    --tt-font-size-xxl: 40px;

    /* --- Shape / spacing --- */
    --tt-radius-sm: 4px;
    --tt-radius-md: 8px;
    --tt-radius-lg: 14px;
    --tt-shadow-sm: 0 1px 2px rgba(44, 44, 44, 0.05);
    --tt-shadow-md: 0 4px 10px rgba(44, 44, 44, 0.08);
    --tt-shadow-lg: 0 10px 30px rgba(44, 44, 44, 0.12);

    /* --- Baseline styles for the TT area --- */
    font-family: var(--tt-font-body);
    color: var(--tt-text);
    background: var(--tt-surface-subtle);
    min-height: 100vh;
}

.tt-area h1, .tt-area h2, .tt-area h3, .tt-area h4, .tt-area h5, .tt-area h6 {
    font-family: var(--tt-font-heading);
    font-weight: 600;
    color: var(--tt-story-purple);
}

.tt-area h1 {
    font-size: var(--tt-font-size-xxl);
    font-weight: 600;
}

.tt-area h2 {
    font-size: var(--tt-font-size-xl);
    font-weight: 500;
}

.tt-area small, .tt-area .caption, .tt-area .label {
    font-size: var(--tt-font-size-sm);
    font-weight: 700;
    text-transform: uppercase;
}

/* --- Colourful tab underlines (rotate through palette) --- */
.tt-area .tab-active-red { border-bottom: 3px solid var(--tt-chatter-red); color: var(--tt-chatter-red); }
.tt-area .tab-active-orange { border-bottom: 3px solid var(--tt-sunshine-orange); color: var(--tt-sunshine-orange); }
.tt-area .tab-active-teal { border-bottom: 3px solid var(--tt-talk-teal); color: var(--tt-talk-teal); }
.tt-area .tab-active-blue { border-bottom: 3px solid var(--tt-sky-blue); color: var(--tt-sky-blue); }
.tt-area .tab-active-purple { border-bottom: 3px solid var(--tt-story-purple); color: var(--tt-story-purple); }

/* --- Table headers with colour accent top border --- */
.tt-area table thead th {
    background: #f9f6fa;
    color: var(--tt-text);
    font-family: var(--tt-font-body);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-top: 3px solid var(--tt-talk-teal);
}

/* --- Colourful section accent bars --- */
.tt-area .section-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(44,44,44,0.06);
    border-left: 5px solid var(--tt-talk-teal);
}
.tt-area .section-card-red { border-left-color: var(--tt-chatter-red); }
.tt-area .section-card-orange { border-left-color: var(--tt-sunshine-orange); }
.tt-area .section-card-blue { border-left-color: var(--tt-sky-blue); }
.tt-area .section-card-purple { border-left-color: var(--tt-story-purple); }

/* --- Vibrant buttons (each colour variant) --- */
.tt-area .btn-red { background: var(--tt-chatter-red); color: white; border: none; border-radius: 6px; padding: 0.5rem 1.2rem; font-weight: 600; cursor: pointer; }
.tt-area .btn-orange { background: var(--tt-sunshine-orange); color: white; border: none; border-radius: 6px; padding: 0.5rem 1.2rem; font-weight: 600; cursor: pointer; }
.tt-area .btn-teal { background: var(--tt-talk-teal); color: white; border: none; border-radius: 6px; padding: 0.5rem 1.2rem; font-weight: 600; cursor: pointer; }
.tt-area .btn-blue { background: var(--tt-sky-blue); color: white; border: none; border-radius: 6px; padding: 0.5rem 1.2rem; font-weight: 600; cursor: pointer; }
.tt-area .btn-purple { background: var(--tt-story-purple); color: white; border: none; border-radius: 6px; padding: 0.5rem 1.2rem; font-weight: 600; cursor: pointer; }

/* --- Colour dot decorations (like the brand guidelines header) --- */
.tt-area .colour-bar {
    display: flex;
    height: 5px;
    border-radius: 3px;
    overflow: hidden;
    margin: 1rem 0;
}
.tt-area .colour-bar > span { flex: 1; }
.tt-area .colour-bar .cb-red { background: var(--tt-chatter-red); }
.tt-area .colour-bar .cb-orange { background: var(--tt-sunshine-orange); }
.tt-area .colour-bar .cb-teal { background: var(--tt-talk-teal); }
.tt-area .colour-bar .cb-blue { background: var(--tt-sky-blue); }
.tt-area .colour-bar .cb-purple { background: var(--tt-story-purple); }

/* --- Status badges with brand colours --- */
.tt-area .badge-ok { background: #d4f5f0; color: #03A696; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 10px; font-size: 0.8rem; }
.tt-area .badge-warning { background: #fef0d4; color: #F28705; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 10px; font-size: 0.8rem; }
.tt-area .badge-danger { background: #fde0e3; color: #F23041; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 10px; font-size: 0.8rem; }
.tt-area .badge-info { background: #dff0ff; color: #0597F2; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 10px; font-size: 0.8rem; }