/* OperLytic Brand v1.0 — design tokens, typography, wordmark.
   Source: OperLytic Brand Style Guide v1.0 (July 2026). */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap');

:root {
    /* Palette */
    --op-navy: #081D34;
    --op-deep-navy: #0B2B56;
    --op-blue: #1677FF;
    --op-bright-blue: #00A3FF;
    --op-sky-blue: #66C2FF;
    --op-slate: #64748B;
    --op-light-gray: #E5E7EB;
    --op-white: #FFFFFF;
    /* Gradient */
    --op-gradient: linear-gradient(135deg, #1677FF 0%, #00A3FF 100%);
    /* Fonts */
    --op-font-head: "Poppins", Arial, Helvetica, sans-serif;
    --op-font-body: "Inter", Arial, Helvetica, sans-serif;
}

body { font-family: var(--op-font-body); color: var(--op-navy); }
h1, h2, h3, h4, h5, h6 { font-family: var(--op-font-head); }
h1 { font-weight: 700; }
h2 { font-weight: 600; }
h3 { font-weight: 500; }

/* Wordmark: "Opera" navy + "Lytic" gradient, Poppins Bold, -2% tracking.
   Add .op-wordmark--reverse on dark backgrounds to flip "Opera" to white. */
.op-wordmark { font-family: var(--op-font-head); font-weight: 700; letter-spacing: -0.02em; line-height: 1; text-decoration: none; }
.op-wordmark .op-opera { color: var(--op-navy); }
.op-wordmark .op-lytic {
    background: var(--op-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.op-wordmark--reverse .op-opera { color: var(--op-white); }

/* Brand button — gradient fill, Poppins SemiBold */
.btn-brand { background: var(--op-gradient); border: none; color: #fff; font-family: var(--op-font-head); font-weight: 600; }
.btn-brand:hover, .btn-brand:focus { color: #fff; opacity: 0.92; }