/* =========================================================================
   Dotinker — shared design tokens & base styles
   Brand green pulled from logo.png (#7CF104). Palette otherwise inspired by
   dark-tech / pixel-grid direction: navy backgrounds, lime/blue/purple/
   yellow accents, Pixelify Sans display type + Inter body + PT Mono labels.
   ========================================================================= */

:root {
    /* Brand */
    --brand-green: #7CF104;
    --brand-green-dark: #5FC200;
    --brand-blue: #2D62E0;
    --brand-purple: #A4A7FF;
    --brand-yellow: #FFF36E;

    /* Neutrals */
    --navy-900: #0F131A;
    --navy-800: #131B26;
    --navy-700: #1B2531;
    --navy-600: #26313F;
    --line-on-dark: rgba(255, 255, 255, 0.10);
    --text-on-dark: #F3F3F3;
    --text-on-dark-muted: rgba(243, 243, 243, 0.65);

    --ink-900: #10151C;
    --ink-700: #40495A;
    --ink-500: #6B7480;
    --paper: #FFFFFF;
    --paper-soft: #F5F6F8;
    --line: #E4E7EC;

    /* Status */
    --ok: #1FB463;
    --warn: #E0A62D;
    --danger: #E0472D;
    --info: var(--brand-blue);

    /* Type */
    --font-display: 'Pixelify Sans', 'Courier New', monospace;
    --font-mono: 'PT Mono', 'Courier New', monospace;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Layout */
    --container: 1180px;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --shadow-md: 0 12px 30px rgba(15, 19, 26, 0.12);
    --shadow-sm: 0 4px 12px rgba(15, 19, 26, 0.08);
}

* , *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--ink-900);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    line-height: 1.55;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select, button { font-family: inherit; font-size: inherit; }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.15;
    margin: 0 0 0.5em;
    letter-spacing: 0.01em;
}
h1 { font-size: clamp(2.2rem, 5vw, 4.1rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.05rem; }
p { margin: 0 0 1em; }

.eyebrow {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.78rem;
    color: var(--brand-green);
}
.eyebrow.on-light { color: var(--brand-green-dark); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section { padding: 84px 0; }
@media (max-width: 720px) { .section { padding: 56px 0; } }

.text-center { text-align: center; }
.muted { color: var(--ink-500); }
.muted-on-dark { color: var(--text-on-dark-muted); }

/* Buttons ----------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 26px;
    border-radius: 999px;
    border: 1.5px solid transparent;
    font-weight: 600;
    font-size: 0.95rem;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--brand-green); color: var(--navy-900); }
.btn-primary:hover { background: var(--brand-green-dark); }
.btn-outline-dark { border-color: var(--navy-900); color: var(--navy-900); }
.btn-outline-dark:hover { background: var(--navy-900); color: var(--text-on-dark); }
.btn-outline-light { border-color: rgba(255,255,255,0.35); color: var(--text-on-dark); }
.btn-outline-light:hover { background: rgba(255,255,255,0.08); border-color: var(--brand-green); }
.btn-ghost { color: var(--navy-900); }
.btn-sm { padding: 8px 16px; font-size: 0.85rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

/* Badges -------------------------------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-family: var(--font-mono);
}
.badge-green  { background: rgba(124,241,4,0.14);  color: #4C9200; }
.badge-blue   { background: rgba(45,98,224,0.12);  color: var(--brand-blue); }
.badge-purple { background: rgba(164,167,255,0.20); color: #6367CC; }
.badge-yellow { background: rgba(255,243,110,0.28); color: #9C8B00; }
.badge-gray   { background: var(--paper-soft); color: var(--ink-500); }
.badge-ok     { background: rgba(31,180,99,0.12); color: var(--ok); }
.badge-warn   { background: rgba(224,166,45,0.14); color: #9C7616; }
.badge-danger { background: rgba(224,71,45,0.12); color: var(--danger); }

/* Cards ---------------------------------------------------------------------- */
.card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 24px;
}

/* Forms ------------------------------------------------------------------------ */
.field { margin-bottom: 18px; }
.field label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--ink-700);
}
.field .hint { font-size: 0.78rem; color: var(--ink-500); margin-top: 4px; }
.input, textarea.input, select.input {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--paper);
    color: var(--ink-900);
    outline: none;
    transition: border-color 0.15s ease;
}
.input:focus { border-color: var(--brand-green); }
textarea.input { resize: vertical; min-height: 110px; }
.field-row { display: grid; gap: 16px; }
@media (min-width: 640px) { .field-row.cols-2 { grid-template-columns: 1fr 1fr; } .field-row.cols-3 { grid-template-columns: repeat(3,1fr); } }
.checkbox-row { display: flex; align-items: flex-start; gap: 8px; font-size: 0.85rem; color: var(--ink-500); }
.checkbox-row input { margin-top: 3px; }
.error-text { color: var(--danger); font-size: 0.8rem; margin-top: 4px; }

/* Alerts / flash messages ------------------------------------------------------- */
.alert {
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    margin-bottom: 18px;
    border: 1px solid transparent;
}
.alert-success { background: rgba(31,180,99,0.10); color: #157C46; border-color: rgba(31,180,99,0.25); }
.alert-error   { background: rgba(224,71,45,0.08); color: var(--danger); border-color: rgba(224,71,45,0.25); }
.alert-info    { background: rgba(45,98,224,0.08); color: var(--brand-blue); border-color: rgba(45,98,224,0.2); }

/* Pixel decorative clusters ------------------------------------------------------ */
.pixel-cluster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: fit-content; }
.pixel-cluster .px { width: 18px; height: 18px; border-radius: 3px; }
.pixel-cluster .px.outline { border: 1.5px solid rgba(255,255,255,0.25); }
.pixel-cluster .px.green { background: var(--brand-green); }
.pixel-cluster .px.blue { background: var(--brand-blue); }
.pixel-cluster .px.purple { background: var(--brand-purple); }
.pixel-cluster .px.yellow { background: var(--brand-yellow); }
.pixel-cluster .px.empty { background: transparent; }

/* Scrollbar niceties on dark surfaces --------------------------------------------- */
.on-dark ::-webkit-scrollbar { height: 8px; width: 8px; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}