/* ============================================================================
   ZANSYNC BRAND TOKENS + ETHOS NOVA WEBFONTS
   Single source of truth. Include via:
     <link rel="stylesheet" href="/brand/css/brand.css">
   ============================================================================ */

/* ── Ethos Nova — 5 weights (Light 300, Regular 400, Medium 500, Bold 700, Heavy 900) ── */
@font-face {
    font-family: 'Ethos Nova';
    src: url('/brand/fonts/EthosNova-Light.woff2') format('woff2'),
         url('/brand/fonts/EthosNova-Light.woff')  format('woff');
    font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Ethos Nova';
    src: url('/brand/fonts/EthosNova-Regular.woff2') format('woff2'),
         url('/brand/fonts/EthosNova-Regular.woff')  format('woff');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Ethos Nova';
    src: url('/brand/fonts/EthosNova-Medium.woff2') format('woff2'),
         url('/brand/fonts/EthosNova-Medium.woff')  format('woff');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Ethos Nova';
    src: url('/brand/fonts/EthosNova-Bold.woff2') format('woff2'),
         url('/brand/fonts/EthosNova-Bold.woff')  format('woff');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Ethos Nova';
    src: url('/brand/fonts/EthosNova-Heavy.woff2') format('woff2'),
         url('/brand/fonts/EthosNova-Heavy.woff')  format('woff');
    font-weight: 900; font-style: normal; font-display: swap;
}

/* ── Design tokens ── */
:root {
    /* Brand palette (from official Zansync brand guidelines) */
    --brand-primary:   #fd4b51;   /* Coral red — primary CTAs, links, focus rings */
    --brand-accent:    #fe7b5a;   /* Warm orange — gradients, highlights */
    --brand-gradient:  linear-gradient(135deg, #fd4b51 0%, #fe7b5a 100%);

    /* Neutral scale */
    --ink-900: #0f172a;
    --ink-700: #334155;
    --ink-500: #64748b;
    --ink-300: #cbd5e1;
    --ink-100: #f1f5f9;
    --ink-50:  #f8fafc;
    --paper:   #ffffff;

    /* Status */
    --ok:    #16a34a;
    --warn:  #d97706;
    --err:   #dc2626;

    /* Typography */
    --font-sans: 'Ethos Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                 Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* Radii / shadow */
    --radius-sm: 6px;
    --radius:    10px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow:    0 4px 12px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 16px 40px rgba(253, 75, 81, 0.18);
}

/* ── Optional global resets — only applied if html/body don't already set them ── */
html { font-family: var(--font-sans); }

/* ── Utility classes for the logo ── */
.zs-logo        { height: 40px; width: auto; display: inline-block; vertical-align: middle; }
.zs-logo-sm     { height: 28px; }
.zs-logo-lg     { height: 56px; }
.zs-logo-xl     { height: 80px; }
.zs-icon        { height: 32px; width: 32px; display: inline-block; vertical-align: middle; }

/* Buttons (use as a base — pages can override) */
.zs-btn-primary {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 12px 24px; border: 0; border-radius: var(--radius);
    font-family: var(--font-sans); font-weight: 600; font-size: 15px;
    color: #fff; background: var(--brand-gradient); cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
    box-shadow: var(--shadow);
}
.zs-btn-primary:hover  { transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.zs-btn-primary:active { transform: translateY(0); }
.zs-btn-primary:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.zs-link { color: var(--brand-primary); text-decoration: none; font-weight: 500; }
.zs-link:hover { text-decoration: underline; }