/*
 * Turicum Cloud — Design-System-Grundlage (base.css)
 * Verbindliche Referenz: design-system.md aus dem Projektordner
 * Ersetzt die alte base.css (DogCare-Design, entfernt).
 *
 * Diese Datei definiert:
 *   1. Google-Fonts-Einbindung (Space Grotesk + Instrument Sans)
 *   2. CSS-Custom-Properties (Design-Tokens)
 *   3. Reset + Typografie-Grundlage
 *   4. Body/Main/Footer-Basics
 *
 * Alles Weitere (Komponenten, Portal-Layouts, Utility-Klassen)
 * steht in styles.css.
 */

/* ------------------------------------------------------------------ */
/* 1. Fonts                                                            */
/* ------------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Instrument+Sans:wght@400;500;600;700&display=swap');

/* ------------------------------------------------------------------ */
/* 2. Design-Tokens                                                    */
/* ------------------------------------------------------------------ */
:root {
    /* Primary Blue */
    --tc-blue:          #1a5cf5;
    --tc-blue-hover:    #0f3fb8;
    --tc-blue-tint:     #eef3ff;
    --tc-blue-tint-2:   #e2f4ff;
    --tc-blue-tint-ink: #1a3a8f;

    /* Navy */
    --tc-navy:          #1a5cf5;
    --tc-navy-soft:     #3d75f7;
    --tc-navy-hover:    #0f3fb8;
    --tc-blue-on-navy:  #c9d9ff;

    /* Grounds */
    --tc-bg:            #f7f7f5;
    --tc-surface:       #ffffff;
    --tc-surface-alt:   #f4f4f2;
    --tc-line:          #e6e6e3;
    --tc-line-soft:     #f0f0ed;
    --tc-line-strong:   #cfcfca;

    /* Ink (Text) — volle Deckkraft, nie Alpha ueber Hintergrund */
    --tc-ink:           #0a1f44;
    --tc-ink-2:         #505d78;
    --tc-ink-3:         #4a5670;
    --tc-ink-inactive:  #5a6580;

    /* Auf Navy-Flaechen */
    --tc-on-navy:            #ffffff;
    --tc-on-navy-label:      rgba(255, 255, 255, 0.75);
    --tc-on-navy-body:       rgba(255, 255, 255, 0.80);
    --tc-on-navy-chip-bg:    rgba(255, 255, 255, 0.09);
    --tc-on-navy-border:     rgba(255, 255, 255, 0.10);

    /* Status */
    --tc-ok-bg:         #dcfce7;
    --tc-ok-ink:        #15803d;
    --tc-info-bg:       #eef3ff;
    --tc-info-ink:      #1a3a8f;
    --tc-warn-bg:       #fef3c7;
    --tc-warn-ink:      #92400e;
    --tc-alert-bg:      #fee7d6;
    --tc-alert-ink:     #9a3412;
    --tc-block-bg:      #fee2e2;
    --tc-block-ink:     #991b1b;
    --tc-neutral-bg:    #eceae5;
    --tc-neutral-ink:   #4a5670;

    --tc-dot-green:     #22c55e;
    --tc-dot-orange:    #ea580c;
    --tc-dot-yellow:    #f59e0b;
    --tc-stripe:        #635bff;

    /* Typografie */
    --tc-font-display:  "Space Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
    --tc-font-text:     "Instrument Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;

    /* Radien */
    --tc-r-pill:        7px;
    --tc-r-btn:         9px;
    --tc-r-btn-lg:      11px;
    --tc-r-tile-sm:     13px;
    --tc-r-tile:        17px;
    --tc-r-list:        18px;
    --tc-r-card:        20px;
    --tc-r-sheet:       22px;
    --tc-r-chip:        100px;
    --tc-r-avatar:      50%;

    /* Schatten */
    --tc-shadow-card:      0 1px 2px rgba(10, 31, 68, 0.04);
    --tc-shadow-segment:   0 1px 3px rgba(10, 31, 68, 0.12);
    --tc-shadow-tile:      0 4px 12px rgba(26, 92, 245, 0.30);
    --tc-shadow-action:    0 -6px 24px rgba(10, 31, 68, 0.07);
    --tc-shadow-hover:     0 4px 16px rgba(10, 31, 68, 0.08);

    /* Layout */
    --tc-content-max:      1120px;
    --tc-content-max-xl:   1280px;
    --tc-page-pad:         22px;
    --tc-page-pad-md:      40px;
    --tc-page-pad-lg:      56px;
    --tc-gap-card:         12px;
    --tc-gap-grid:         14px;
    --tc-nav-w:            224px;

    /* Erdtoene / Warm-Akzente (fuer Marketing-Sektionen der Startseite) */
    --tc-warm-gold:        #ffd15c;
    --tc-warm-peach:       #ffe9d6;
    --tc-warm-sand:        #f0e2d2;
    --tc-warm-taupe:       #8b7a6a;
}

/* ------------------------------------------------------------------ */
/* 3. Reset + Typografie-Grundlage                                     */
/* ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--tc-bg);
    color: var(--tc-ink);
    font-family: var(--tc-font-text);
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Ueberschriften nutzen Display-Schrift mit negativem Letterspacing */
h1, h2, h3, h4, h5, h6,
.tc-display {
    font-family: var(--tc-font-display);
    color: var(--tc-ink);
    font-weight: 600;
    letter-spacing: -0.4px;
    margin: 0 0 0.5em;
}
h1 { font-size: 31px; line-height: 1.1;  letter-spacing: -1.1px; }
h2 { font-size: 27px; line-height: 1.15; letter-spacing: -1px;   }
h3 { font-size: 21px; line-height: 1.2;  letter-spacing: -0.7px; }
h4 { font-size: 17px; line-height: 1.3;  letter-spacing: -0.4px; }
h5 { font-size: 15px; }
h6 { font-size: 13px; }

@media (min-width: 700px) {
    h1 { font-size: 40px; line-height: 1.08; letter-spacing: -1.7px; }
    h2 { font-size: 30px; }
}
@media (min-width: 1000px) {
    h1 { font-size: 56px; line-height: 1.02; letter-spacing: -2.4px; }
}

p { margin: 0 0 1em; }

a {
    color: var(--tc-blue);
    text-decoration: none;
    transition: color 0.15s ease;
}
a:hover { color: var(--tc-blue-hover); }

img { max-width: 100%; height: auto; display: block; }

hr {
    border: 0;
    border-top: 1px solid var(--tc-line);
    margin: 24px 0;
}

/* Selection */
::selection { background: var(--tc-blue); color: #fff; }

/* Fokus-Ring (WCAG-konform) */
:focus-visible {
    outline: 2px solid var(--tc-blue);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ------------------------------------------------------------------ */
/* 4. Layout-Grundgerueste                                             */
/* ------------------------------------------------------------------ */
main {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    width: 100%;
}

/* Bootstrap-.container-Override auf Turicum-Werte */
.container,
.container-fluid,
.tc-container {
    width: 100%;
    max-width: var(--tc-content-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--tc-page-pad);
    padding-right: var(--tc-page-pad);
}
@media (min-width: 700px) {
    .container, .container-fluid, .tc-container {
        padding-left: var(--tc-page-pad-md);
        padding-right: var(--tc-page-pad-md);
    }
}
@media (min-width: 1000px) {
    .container, .container-fluid, .tc-container {
        padding-left: var(--tc-page-pad-lg);
        padding-right: var(--tc-page-pad-lg);
    }
}
@media (min-width: 1400px) {
    .container, .container-fluid, .tc-container {
        max-width: var(--tc-content-max-xl);
    }
}

footer {
    /* base.html umschliesst layouts/footer.html mit <footer>. Eine
       Navy-Flaeche hier liess oberhalb und unterhalb des weissen
       .site-footer je ein blaues Band stehen. Der Footer bringt seine
       eigene Flaeche mit — das Element bleibt neutral. */
    background: var(--tc-surface);
    color: var(--tc-ink);
    padding: 0;
    font-size: 12px;
    font-family: var(--tc-font-text);
}

/* Alte Legacy-Klassen kurz gebrueckt, damit vorhandene Templates nicht crashen */
.roboto-regular { font-family: var(--tc-font-text); font-weight: 400; }
.roboto-bold    { font-family: var(--tc-font-text); font-weight: 600; }

/* Sichtbarkeits-Helper */
[hidden] { display: none !important; }
.tc-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}