/* =========================================================
   ball-b UI Base (CI-fähig, wiederverwendbar)
   - Tokens (Theme)
   - Layout primitives
   - Components
========================================================= */

/* -------------------------
   1) THEME TOKENS
------------------------- */
:root {
    /* Brand / surfaces */
    --bb-bg: #0f1722;
    --bb-bg-accent: #243447;
    --bb-card-bg: #ffffff;
  
    /* Brand primary */
    --bb-primary: #c4d600;
    --bb-primary-dark: #a5b800;
  
    /* Text / borders */
    --bb-text: #111827;
    --bb-muted: #a1a1aa;
    --bb-border: #e5e7eb;
    --bb-surface-muted: #f9fafb;
    --bb-placeholder: #c4c4cf;
  
    /* Status */
    --bb-success-bg: #ecfdf3;
    --bb-success-border: #bbf7d0;
    --bb-success-text: #065f46;
  
    --bb-error-bg: #fef2f2;
    --bb-error-border: #fecaca;
    --bb-error-text: #991b1b;
  
    /* Spacing scale */
    --space-xs: 6px;
    --space-sm: 10px;
    --space-md: 14px;
    --space-lg: 18px;
    --space-xl: 28px;
  
    /* Radius */
    --radius-card: 20px;
    --radius-card-lg: 24px;
    --radius-soft: 12px;
    --radius-input: 10px;
    --radius-pill: 999px;
  
    /* Shadows */
    --shadow-card: 0 14px 32px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(15, 23, 42, 0.04);
    --shadow-logo: 0 12px 30px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(17, 24, 39, 0.05);
    --shadow-button: 0 10px 18px rgba(0, 0, 0, 0.18);
  
    /* Typography */
    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  
    /* Mobile-friendly defaults */
    --fs-base: 0.95rem;     /* ~15.2px */
    --fs-label: 0.95rem;
    --fs-input: 0.95rem;
    --fs-hint: 0.82rem;     /* ~13.1px */
    --fs-small: 0.82rem;
    --fs-legal: 0.8rem;
  
    --fs-title: 1.3rem;     /* ~20.8px */
    --lh-title: 1.3;
  }
  
  /* Desktop upscale */
  @media (min-width: 640px) {
    :root {
      --fs-base: 1rem;
      --fs-label: 0.9rem;
      --fs-input: 0.9rem;
      --fs-hint: 0.78rem;
      --fs-small: 0.8rem;
      --fs-legal: 0.75rem;
  
      --fs-title: 1.5rem;
      --lh-title: 1.25;
    }
  }
  
  /* -------------------------
     2) RESET / BASE
  ------------------------- */
  * { box-sizing: border-box; }
  
  body {
    margin: 0;
    font-family: var(--font-sans);
    background: radial-gradient(circle at top, var(--bb-bg-accent) 0, var(--bb-bg) 65%);
    color: var(--bb-text);
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    padding: 16px;
  }
  
  /* Body padding responsive */
  @media (min-width: 640px) {
    body { padding: var(--space-xl); }
  }
  
  /* -------------------------
     3) LAYOUT PRIMITIVES
  ------------------------- */
  .ui-container {
    width: 100%;
    max-width: 820px;
  }
  
  .ui-card {
    background: var(--bb-card-bg);
    border-radius: var(--radius-card);
    padding: 20px var(--space-lg) 20px;
    box-shadow: var(--shadow-card);
  }
  
  @media (min-width: 640px) {
    .ui-card {
      border-radius: var(--radius-card-lg);
      padding: var(--space-xl) var(--space-xl) 24px;
    }
  }
  
  @media (min-width: 900px) {
    .ui-card {
      padding: 32px 32px 26px;
    }
  }
  
  /* -------------------------
     4) HEADER
  ------------------------- */
  .ui-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
  }
  
  @media (min-width: 640px) {
    .ui-header {
      gap: var(--space-lg);
      margin-bottom: 22px;
    }
  }
  
  @media (max-width: 420px) {
    .ui-header {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-sm);
    }
  }
  
  .ui-brand {
    width: 88px;
    height: 88px;
    border-radius: 16px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: var(--shadow-logo);
  }
  
  .ui-brand img {
    max-width: 82%;
    height: auto;
    display: block;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.18));
  }
  
  .ui-title h1 {
    font-size: var(--fs-title);
    line-height: var(--lh-title);
    margin: 0 0 4px;
  }
  
  .ui-title p {
    margin: 0;
    font-size: var(--fs-base);
    color: var(--bb-muted);
  }
  
  /* -------------------------
     5) CALLOUTS / STATUS
  ------------------------- */
  .ui-tagline {
    background: var(--bb-surface-muted);
    border-radius: var(--radius-soft);
    padding: var(--space-sm) 12px;
    margin-bottom: var(--space-lg);
    font-size: 0.92rem; /* stable across devices */
    color: var(--bb-muted);
  }
  
  .ui-tagline strong { color: var(--bb-text); }
  
  @media (min-width: 640px) {
    .ui-tagline {
      padding: 12px var(--space-md);
      font-size: 0.92rem;
    }
  }
  
  .ui-alert {
    border-radius: var(--radius-soft);
    padding: var(--space-md);
    margin-bottom: var(--space-lg);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
  }
  
  .ui-alert--success {
    background: var(--bb-success-bg);
    border: 1px solid var(--bb-success-border);
    color: var(--bb-success-text);
  }
  
  .ui-alert--error {
    background: var(--bb-error-bg);
    border: 1px solid var(--bb-error-border);
    color: var(--bb-error-text);
  }
  
  .ui-alert h2 {
    margin: 0 0 6px;
    font-size: 1rem;
  }
  
  .ui-alert p {
    margin: 0;
    color: inherit;
  }
  
  /* -------------------------
     6) FORM
  ------------------------- */
  .ui-form {
    display: grid;
    gap: var(--space-md);
  }
  
  @media (min-width: 640px) {
    .ui-form { gap: 16px; }
  }
  
  .ui-label {
    font-weight: 500;
    font-size: var(--fs-label);
    display: block;
    margin-bottom: 4px;
  }
  
  .ui-hint {
    font-size: var(--fs-hint);
    color: var(--bb-muted);
    margin-top: 2px;
  }
  
  .ui-input,
  .ui-textarea {
    width: 100%;
    border-radius: var(--radius-input);
    border: 1px solid var(--bb-border);
    padding: 9px 11px;
    font-size: var(--fs-input);
    font-family: inherit;
    background-color: var(--bb-surface-muted);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  }
  
  .ui-textarea {
    min-height: 90px;
    resize: vertical;
  }
  
  .ui-input::placeholder,
  .ui-textarea::placeholder {
    color: var(--bb-placeholder);
  }
  
  .ui-input:focus,
  .ui-textarea:focus {
    outline: none;
    border-color: var(--bb-primary);
    box-shadow: 0 0 0 1px rgba(196, 214, 0, 0.4);
    background-color: #ffffff;
  }
  
  .ui-input:focus-visible,
  .ui-textarea:focus-visible {
    outline: none;
    border-color: var(--bb-primary);
    box-shadow: 0 0 0 2px rgba(196, 214, 0, 0.35);
  }
  
  /* -------------------------
     7) FILE PICKER
  ------------------------- */
  .ui-file {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  
  .ui-file-picker {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    max-width: 260px;
  }
  
  .ui-file-picker input[type="file"] {
    opacity: 0;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
  
  .ui-file-pill {
    border-radius: var(--radius-pill);
    padding: 7px var(--space-md);
    border: 1px solid var(--bb-border);
    background: var(--bb-surface-muted);
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
  }
  
  .ui-file-pill span {
    font-size: 0.9rem;
  }
  
  .ui-file-list {
    margin: var(--space-xs) 0 0;
    padding-left: var(--space-lg);
    color: var(--bb-muted);
    font-size: var(--fs-small);
  }
  
  /* -------------------------
     8) ACTIONS / BUTTONS
  ------------------------- */
  .ui-actions {
    margin-top: var(--space-sm);
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    flex-wrap: wrap;
  }
  
  .ui-button {
    border: none;
    border-radius: var(--radius-pill);
    padding: 11px 20px; /* mobile-friendly touch */
    font-size: var(--fs-input);
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    background: var(--bb-primary);
    color: #111827;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: var(--shadow-button);
    transition: background 0.12s ease, transform 0.08s ease, box-shadow 0.12s ease;
  }
  
  @media (min-width: 640px) {
    .ui-button { padding: 9px 18px; }
  }
  
  .ui-button:hover {
    background: var(--bb-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 14px 26px rgba(0, 0, 0, 0.22);
  }
  
  .ui-button:active {
    transform: translateY(0);
    box-shadow: 0 8px 14px rgba(0, 0, 0, 0.18);
  }
  
  .ui-note {
    font-size: var(--fs-small);
    color: var(--bb-muted);
  }
  
  /* -------------------------
     9) LEGAL
  ------------------------- */
  .ui-legal {
    text-align: center;
    margin-top: 20px;
    font-size: var(--fs-legal);
    color: var(--bb-muted);
  }
  
  .ui-legal a {
    color: var(--bb-muted);
    text-decoration: none;
  }