/* ==========================================================================
   OKG Solutions — Brand System (v1.0)
   Single source of truth for colors, type, spacing, and UI primitives.
   Import on every page before any page-specific CSS:
     <link rel="stylesheet" href="/css/okg-brand.css">

   Derived from the public landing (coming-soon.html) so the app layer
   matches what the customer first sees. Tokens are CSS custom
   properties so any page can override or theme-shift later.
   ========================================================================== */

/* ----------------------------- Design tokens ----------------------------- */
:root{
  /* Surfaces (dark-first) */
  --okg-bg:           #0a0f1a;
  --okg-bg-elevated:  #0f172a;
  --okg-bg-raised:    #1e293b;
  --okg-bg-overlay:   rgba(10,15,26,.7);
  --okg-bg-scrim:     rgba(2,6,23,.8);
  --okg-border:       rgba(30,41,59,.8);
  --okg-border-soft:  rgba(15,23,42,.8);
  --okg-border-hover: #334155;

  /* Ink (text) */
  --okg-ink:          #e2e8f0;
  --okg-ink-strong:   #ffffff;
  --okg-ink-dim:      #94a3b8;
  --okg-ink-muted:    #64748b;
  --okg-ink-subtle:   #475569;

  /* Brand accents — orange is the logo tie-in; blue is the UI chrome */
  --okg-orange:       #f59e0b;   /* primary brand (matches logo shield) */
  --okg-orange-bright:#fb923c;
  --okg-orange-amber: #fbbf24;
  --okg-orange-deep:  #d97706;
  --okg-orange-glow:  rgba(245,158,11,.25);

  --okg-blue:         #3b82f6;   /* primary interactive */
  --okg-blue-bright:  #60a5fa;
  --okg-blue-soft:    #93c5fd;
  --okg-blue-subtle:  #bfdbfe;
  --okg-blue-glow:    rgba(59,130,246,.25);

  --okg-violet:       #8b5cf6;
  --okg-violet-soft:  #a78bfa;

  /* Semantic */
  --okg-success:      #34d399;
  --okg-success-deep: #10b981;
  --okg-warning:      #fbbf24;
  --okg-danger:       #ef4444;
  --okg-danger-soft:  rgba(239,68,68,.7);

  /* Focus ring (always keyboard-visible — a11y rule) */
  --okg-focus:        0 0 0 2px var(--okg-bg),0 0 0 4px var(--okg-blue);

  /* Radii */
  --okg-r-xs: 4px;
  --okg-r-sm: 6px;
  --okg-r-md: 8px;
  --okg-r-lg: 12px;
  --okg-r-xl: 16px;
  --okg-r-pill: 9999px;

  /* Shadows */
  --okg-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --okg-shadow-md: 0 8px 24px -8px rgba(0,0,0,.5);
  --okg-shadow-lg: 0 30px 80px -20px rgba(0,0,0,.6);
  --okg-shadow-glow-blue:   0 0 32px rgba(59,130,246,.25);
  --okg-shadow-glow-orange: 0 0 32px rgba(245,158,11,.25);

  /* Type scale (fluid via clamp) */
  --okg-font-sans: 'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --okg-font-mono: 'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --okg-fs-xs:   12px;
  --okg-fs-sm:   14px;
  --okg-fs-md:   16px;
  --okg-fs-lg:   18px;
  --okg-fs-h3:   clamp(20px,2.2vw,24px);
  --okg-fs-h2:   clamp(28px,4vw,40px);
  --okg-fs-h1:   clamp(40px,7vw,64px);
  --okg-fs-hero: clamp(44px,12vw,92px);

  /* Spacing (4-point grid) */
  --okg-sp-1: 4px;
  --okg-sp-2: 8px;
  --okg-sp-3: 12px;
  --okg-sp-4: 16px;
  --okg-sp-5: 20px;
  --okg-sp-6: 24px;
  --okg-sp-8: 32px;
  --okg-sp-10: 40px;
  --okg-sp-12: 48px;
  --okg-sp-16: 64px;
  --okg-sp-20: 80px;

  /* Motion */
  --okg-ease: cubic-bezier(.4,0,.2,1);
  --okg-dur-fast: .15s;
  --okg-dur-med: .25s;
  --okg-dur-slow: .5s;
}

/* ----------------------------- Reset & base ------------------------------ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  font-family:var(--okg-font-sans);
  background:var(--okg-bg);
  color:var(--okg-ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  line-height:1.5;
  min-height:100vh;
  min-height:100dvh;
}
img,svg,canvas{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
input,textarea,select{font:inherit;color:inherit}
::selection{background:var(--okg-blue-glow);color:#fff}

/* Focus visibility — accessibility baseline */
:focus-visible{outline:none;box-shadow:var(--okg-focus)}

/* Honor user motion preference */
@media(prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* ----------------------------- Utility classes --------------------------- */
.okg-wrap{max-width:1280px;margin:0 auto;padding:0 20px}
@media(min-width:640px){.okg-wrap{padding:0 32px}}
.okg-mono{font-family:var(--okg-font-mono)}
.okg-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.okg-tbalance{text-wrap:balance}

/* ----------------------------- Logo lockup ------------------------------- */
.okg-brand{display:inline-flex;align-items:center;gap:10px;color:inherit}
.okg-brand-mark{
  width:32px;height:32px;
  object-fit:contain;flex-shrink:0;
  filter:drop-shadow(0 0 12px var(--okg-orange-glow));
}
.okg-brand-mark--sm{width:24px;height:24px}
.okg-brand-mark--lg{width:48px;height:48px}
.okg-brand-mark--xl{width:64px;height:64px;filter:drop-shadow(0 0 20px var(--okg-orange-glow))}
.okg-brand-name{font-weight:700;letter-spacing:-.01em;font-size:15px;color:var(--okg-ink-strong)}
.okg-brand-name b{color:var(--okg-orange-bright);font-weight:700}
.okg-brand-tagline{
  display:block;
  font-family:var(--okg-font-mono);
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--okg-ink-muted);
  margin-top:2px;
}

/* ----------------------------- Buttons ----------------------------------- */
.okg-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 18px;
  border-radius:var(--okg-r-md);
  font-size:14px;font-weight:500;
  min-height:44px;  /* a11y touch target */
  transition:background var(--okg-dur-fast) var(--okg-ease),
             border-color var(--okg-dur-fast) var(--okg-ease),
             transform var(--okg-dur-fast) var(--okg-ease);
  position:relative;
}
.okg-btn:active{transform:translateY(1px)}
.okg-btn:disabled{opacity:.5;cursor:not-allowed}

.okg-btn--primary{
  background:var(--okg-orange);
  color:#0f172a;
  font-weight:600;
  box-shadow:var(--okg-shadow-glow-orange);
}
.okg-btn--primary:hover{background:var(--okg-orange-bright)}

.okg-btn--secondary{
  border:1px solid var(--okg-border);
  background:rgba(15,23,42,.4);
  backdrop-filter:blur(8px);
  color:var(--okg-ink);
}
.okg-btn--secondary:hover{background:rgba(15,23,42,.7);border-color:var(--okg-border-hover)}

.okg-btn--ghost{
  color:var(--okg-ink-dim);
  padding:8px 12px;
}
.okg-btn--ghost:hover{color:var(--okg-ink-strong);background:rgba(15,23,42,.4)}

.okg-btn--danger{
  background:var(--okg-danger);
  color:#fff;font-weight:600;
}
.okg-btn--danger:hover{background:#dc2626}

/* ----------------------------- Inputs ------------------------------------ */
.okg-input,.okg-textarea,.okg-select{
  width:100%;
  padding:12px 14px;
  border-radius:var(--okg-r-md);
  border:1px solid var(--okg-border);
  background:rgba(15,23,42,.4);
  color:var(--okg-ink);
  font-size:16px;  /* >=16px to prevent iOS zoom-on-focus */
  transition:border-color var(--okg-dur-fast) var(--okg-ease),
             background var(--okg-dur-fast) var(--okg-ease);
  -webkit-appearance:none;
  appearance:none;
}
.okg-input::placeholder,.okg-textarea::placeholder{color:var(--okg-ink-muted)}
.okg-input:hover,.okg-textarea:hover,.okg-select:hover{border-color:var(--okg-border-hover)}
.okg-input:focus,.okg-textarea:focus,.okg-select:focus{
  outline:none;
  border-color:var(--okg-blue);
  background:rgba(15,23,42,.7);
  box-shadow:0 0 0 3px rgba(59,130,246,.15);
}
.okg-input[aria-invalid="true"],
.okg-input.is-invalid{border-color:var(--okg-danger)}

.okg-label{
  display:block;
  font-size:13px;
  font-weight:500;
  color:var(--okg-ink-dim);
  margin-bottom:6px;
}
.okg-help{font-size:12px;color:var(--okg-ink-muted);margin-top:6px}
.okg-error{font-size:12px;color:var(--okg-danger);margin-top:6px}

/* ----------------------------- Cards ------------------------------------- */
.okg-card{
  border-radius:var(--okg-r-xl);
  border:1px solid var(--okg-border);
  background:linear-gradient(to bottom,rgba(15,23,42,.4),rgba(2,6,23,.4));
  padding:28px;
  transition:border-color var(--okg-dur-med) var(--okg-ease);
}
.okg-card:hover{border-color:var(--okg-border-hover)}
.okg-card--tight{padding:20px}
.okg-card--roomy{padding:40px}

/* ----------------------------- Badges ------------------------------------ */
.okg-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;
  border-radius:var(--okg-r-pill);
  font-family:var(--okg-font-mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  border:1px solid var(--okg-border);
  background:rgba(15,23,42,.6);
  color:var(--okg-ink-dim);
}
.okg-badge--success{color:var(--okg-success);border-color:rgba(52,211,153,.4)}
.okg-badge--warn{color:var(--okg-warning);border-color:rgba(251,191,36,.4)}
.okg-badge--danger{color:var(--okg-danger);border-color:rgba(239,68,68,.4)}
.okg-badge--brand{color:var(--okg-orange-bright);border-color:rgba(245,158,11,.4)}

/* Eyebrow (the label above a section heading on the landing) */
.okg-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  border-radius:var(--okg-r-pill);
  border:1px solid var(--okg-bg-raised);
  background:rgba(15,23,42,.6);
  backdrop-filter:blur(8px);
  padding:6px 14px;
  font-size:12px;
  color:var(--okg-ink-dim);
}

/* ----------------------------- Nav (shared chrome) ----------------------- */
.okg-nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  border-bottom:1px solid var(--okg-border-soft);
  background:var(--okg-bg-overlay);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  padding-top:env(safe-area-inset-top);
}
.okg-nav-inner{
  max-width:1280px;margin:0 auto;
  height:64px;
  padding:0 20px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
@media(min-width:640px){.okg-nav-inner{padding:0 32px}}

/* ----------------------------- Footer ------------------------------------ */
.okg-footer{
  border-top:1px solid var(--okg-border-soft);
  background:rgba(2,6,23,.6);
  padding:48px 0 calc(32px + env(safe-area-inset-bottom));
  color:var(--okg-ink-muted);
  font-size:13px;
}

/* ----------------------------- Auth card (login/register/etc.) ---------- */
.okg-auth{
  min-height:100dvh;
  display:flex;align-items:center;justify-content:center;
  padding:48px 20px calc(48px + env(safe-area-inset-bottom));
  position:relative;
}
.okg-auth-card{
  width:100%;max-width:440px;
  position:relative;z-index:1;
  border-radius:var(--okg-r-xl);
  border:1px solid var(--okg-border);
  background:linear-gradient(to bottom,rgba(15,23,42,.7),rgba(2,6,23,.85));
  padding:40px 32px;
  box-shadow:var(--okg-shadow-lg);
  backdrop-filter:blur(20px);
}
.okg-auth-head{text-align:center;margin-bottom:32px}
.okg-auth-head h1{font-size:24px;font-weight:700;color:var(--okg-ink-strong);margin:20px 0 8px}
.okg-auth-head p{color:var(--okg-ink-dim);font-size:14px}
.okg-auth-field{margin-bottom:16px}
.okg-auth-footer{margin-top:24px;text-align:center;font-size:13px;color:var(--okg-ink-muted)}
.okg-auth-footer a{color:var(--okg-blue-bright)}
.okg-auth-footer a:hover{color:var(--okg-blue-soft)}

/* ----------------------------- Background flourishes -------------------- */
/* Blueprint grid backdrop — apply as a class to a <div> positioned behind content. */
.okg-blueprint-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(to bottom,transparent,var(--okg-bg) 80%),
    repeating-linear-gradient(0deg,rgba(59,130,246,.04) 0 1px,transparent 1px 40px),
    repeating-linear-gradient(90deg,rgba(59,130,246,.04) 0 1px,transparent 1px 40px),
    radial-gradient(ellipse at 50% 20%,rgba(245,158,11,.08),transparent 60%);
}

/* High-contrast preference — stronger borders for accessibility */
@media (prefers-contrast: more){
  :root{
    --okg-border:       rgba(148,163,184,.5);
    --okg-border-soft:  rgba(148,163,184,.4);
    --okg-ink-dim:      #cbd5e1;
    --okg-ink-muted:    #94a3b8;
  }
}