/* ==========================================================
   Transocean Design System (TDS)
   Version: 1.0.0
   Projekt: Transocean Sport

   Changelog
   ----------------------------------------------------------
   1.0.0
   - Design foundation
   - Variabler
   - Layout
   - UI-001 Card Grid (kommer)
========================================================== */


/* ==========================================================
   Design Tokens
========================================================== */

:root{

    /* Farver */
    --tds-primary:#23ad00;
    --tds-primary-hover:#1f9800;

    --tds-text:#222222;
    --tds-text-light:#666666;

    --tds-background:#ffffff;
    --tds-background-light:#f8f9fa;

    --tds-border:#e5e7eb;

    /* Radius */
    --tds-radius:12px;

    /* Skygger */
    --tds-shadow:0 4px 14px rgba(0,0,0,.06);
    --tds-shadow-hover:0 10px 24px rgba(0,0,0,.10);

    /* Spacing */
    --tds-xs:8px;
    --tds-sm:16px;
    --tds-md:24px;
    --tds-lg:40px;
    --tds-xl:64px;

    /* Max bredde */
    --tds-content-width:1200px;

}


/* ==========================================================
   Utilities
========================================================== */

.tds-section{
    margin:var(--tds-xl) 0;
}

.tds-center{
    text-align:center;
}

.tds-muted{
    color:var(--tds-text-light);
}

.tds-card{

    background:#fff;

    border:1px solid var(--tds-border);

    border-radius:var(--tds-radius);

    box-shadow:var(--tds-shadow);

    padding:24px;

    transition:.25s;

}

.tds-card:hover{

    transform:translateY(-3px);

    box-shadow:var(--tds-shadow-hover);

}

.tds-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:24px;

}

@media(max-width:768px){

.tds-grid{

grid-template-columns:1fr;

}

}

/* ==========================================================
   UI-002 - Trust Box
========================================================== */

.tds-trust{
    background:var(--tds-background-light);
    border:1px solid var(--tds-border);
    border-left:5px solid var(--tds-primary);
    border-radius:var(--tds-radius);
    padding:28px;
    margin:40px 0;
    box-shadow:var(--tds-shadow);
}

.tds-trust h2{
    margin:0 0 16px;
    font-size:1.6rem;
}

.tds-trust ul{
    list-style:none;
    margin:0;
    padding:0;
}

.tds-trust li{
    margin:12px 0;
    padding-left:28px;
    position:relative;
    color:var(--tds-text);
}

.tds-trust li:before{
    content:"\2713";
    color:var(--tds-primary);
    font-weight:700;
    position:absolute;
    left:0;
}
/* ==========================================================
   UI-003 - Expert Box
========================================================== */

.tds-expert{

    background:#f8fcf7;

    border-left:6px solid var(--tds-primary);

    border-radius:var(--tds-radius);

    padding:32px;

    margin:48px 0;

}

.tds-expert h2{

    margin:0 0 14px;

    font-size:1.5rem;

}

.tds-expert p{

    margin:0;

    line-height:1.8;

    color:var(--tds-text);

}
/* ==========================================================
   Reading Width
========================================================== */

.tds-reading {
    max-width: 860px;
}