/* ==========================================================================
   Topoprint brand tokens and primitives
   Canonical copy: web/src/css/brand.css
   Mirrored to:    web-designer/src/css/brand.css  (keep the two identical;
                   run `make sync-brand` from the repo root after editing)

   The rules behind these values are documented in docs/brand-guide.md.
   Two product colors carry meaning and must not be swapped:
     red    = Topodisc Designer / Switzerland
     orange = Print Your Track / worldwide
   ========================================================================== */

:root {
    /* Neutrals ----------------------------------------------------------- */
    --tp-ink: #2D3436;          /* headings, body text */
    --tp-ink-soft: #636E72;     /* secondary text */
    --tp-bg: #F5F6FA;           /* page background */
    --tp-surface: #FFFFFF;      /* cards, panels */
    --tp-border: #E3E6EF;       /* hairlines */

    /* Topodisc Designer — Switzerland ------------------------------------ */
    --tp-swiss: #D23B3B;
    --tp-swiss-top: #E54848;    /* gradient start */
    --tp-swiss-border: #CF3535;
    --tp-swiss-tint: #FDECEC;   /* badge / subtle fill */
    --tp-swiss-ink: #A32222;    /* text on tint — 6.1:1 */

    /* Print Your Track — worldwide --------------------------------------- */
    --tp-track: #F19A38;
    --tp-track-top: #FFB651;    /* gradient start; matches the app icon */
    --tp-track-border: #E08D2C;
    --tp-track-tint: #FDF0E1;
    --tp-track-ink: #8A4A08;    /* text on tint — 5.8:1 */
    --tp-track-label: #5A2D00;  /* text ON the orange button — 5.2:1.
                                   Never use white here: it is only 2.4:1. */
    --tp-track-strong: #A85900; /* orange as *text* or icon on a light
                                   background — 5.1:1 on white. The fill orange
                                   above is only 2.2:1 and must not carry text.
                                   This is the iOS AccentColor (light).
                                   Same hue (30°) as the fill: a darker orange
                                   with a redder hue reads as Topodisc red on
                                   small glyphs. Do not swap it for #C2410C. */

    /* Support ------------------------------------------------------------ */
    --tp-ok: #2E7D32;
    --tp-danger: #D32F2F;

    /* Shape and depth ---------------------------------------------------- */
    --tp-radius-card: 12px;
    --tp-radius-tile: 18px;     /* icon tiles, echoing the iOS app icon */
    --tp-radius-pill: 30px;     /* buttons */
    --tp-radius-badge: 999px;
    --tp-shadow-card: 0 10px 20px rgba(0,0,0,0.05);
    --tp-shadow-card-hover: 0 15px 30px rgba(0,0,0,0.1);

    /* Type --------------------------------------------------------------- */
    --tp-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Marks --------------------------------------------------------------------
   72px rounded tile. Same silhouette for both products so they read as a
   family: white motif on the product gradient. */
.tp-mark {
    width: 72px;
    height: 72px;
    border-radius: var(--tp-radius-tile);
    display: block;
    object-fit: cover;
    box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}

.tp-mark--sm { width: 40px; height: 40px; border-radius: 11px; }

/* Buttons ---------------------------------------------------------------- */
.tp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    border-radius: var(--tp-radius-pill);
    font-family: var(--tp-font);
    font-weight: 600;
    font-size: 1.1rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tp-btn--swiss {
    background: linear-gradient(180deg, var(--tp-swiss-top) 0%, var(--tp-swiss) 100%);
    border: 1px solid var(--tp-swiss-border);
    box-shadow: 0 8px 18px rgba(210,59,59,0.28);
    color: #fff;
}

.tp-btn--swiss:hover {
    background: linear-gradient(180deg, var(--tp-swiss) 0%, #C93333 100%);
    color: #fff;
}

.tp-btn--track {
    background: linear-gradient(180deg, var(--tp-track-top) 0%, var(--tp-track) 100%);
    border: 1px solid var(--tp-track-border);
    box-shadow: 0 8px 18px rgba(241,154,56,0.35);
    color: var(--tp-track-label);
}

.tp-btn--track:hover {
    background: linear-gradient(180deg, var(--tp-track) 0%, var(--tp-track-border) 100%);
    color: var(--tp-track-label);
}

/* Neutral action: anything that is not the one thing we want you to do. */
.tp-btn--quiet {
    background: #fff;
    border: 1px solid var(--tp-border);
    color: var(--tp-ink);
    box-shadow: none;
    font-size: 1rem;
    padding: 0.7rem 1.4rem;
}

.tp-btn--quiet:hover { background: var(--tp-bg); }

.tp-btn:disabled,
.tp-btn[disabled] {
    background: #95A5A6;
    border-color: #8B9A9B;
    color: #ECF0F1;
    box-shadow: none;
    cursor: not-allowed;
}

/* Badges ----------------------------------------------------------------- */
.tp-badge {
    display: inline-block;
    padding: 0.25rem 0.85rem;
    border-radius: var(--tp-radius-badge);
    font-family: var(--tp-font);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.tp-badge--swiss { background: var(--tp-swiss-tint); color: var(--tp-swiss-ink); }
.tp-badge--track { background: var(--tp-track-tint); color: var(--tp-track-ink); }

/* Cards ------------------------------------------------------------------ */
.tp-card {
    background: var(--tp-surface);
    border-radius: var(--tp-radius-card);
    box-shadow: var(--tp-shadow-card);
    padding: 2rem;
}

/* Checklist -------------------------------------------------------------- */
.tp-checklist { list-style: none; padding: 0; margin: 0; }

.tp-checklist li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.4rem;
    color: var(--tp-ink-soft);
}

.tp-checklist li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--tp-ok);
    font-weight: 700;
}