/* =========================================================
   TOE BEANS DESIGN SYSTEM
   BRAND SYSTEM

   This file contains reusable Toe Beans branding rules.

   Brand assets should identify the product or company.
   They should not be used as generic interface icons.

   Logo source:
   images/ToeBeans_logo.png
   ========================================================= */


/* =========================================================
   BASE LOGO
   ========================================================= */

.ds-brand-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}


/* =========================================================
   STANDARD LOGO SIZES
   ========================================================= */

.ds-brand-logo-32 {
  width: 32px;
}

.ds-brand-logo-48 {
  width: 48px;
}

.ds-brand-logo-72 {
  width: 72px;
}

.ds-brand-logo-96 {
  width: 96px;
}

.ds-brand-logo-128 {
  width: 128px;
}


/* =========================================================
   LOGO TEST GRID
   ========================================================= */

.ds-brand-test-grid {
  display: grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(260px, 1fr)
    );
  gap: 16px;
}


/* =========================================================
   LOGO TEST SURFACES
   ========================================================= */

.ds-brand-test-surface {
  display: grid;
  gap: 20px;
  padding: 24px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface);
}

.ds-brand-test-surface-dark {
  border-color: var(--ds-primary-dark);
  background: var(--ds-primary-dark);
}


/* =========================================================
   SIZE ROW
   ========================================================= */

.ds-brand-size-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 24px;
}


/* =========================================================
   INDIVIDUAL SIZE SAMPLE
   ========================================================= */

.ds-brand-size-sample {
  display: grid;
  justify-items: center;
  gap: 10px;
  min-width: 72px;
}

.ds-brand-size-label {
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.ds-brand-test-surface-dark
.ds-brand-size-label {
  color: rgba(255, 255, 255, 0.78);
}


/* =========================================================
   BRAND GUIDANCE
   ========================================================= */

.ds-brand-guidance {
  display: grid;
  gap: 8px;
}

.ds-brand-guidance p {
  margin: 0;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */




/* =========================================================
   BRAND RULES

   1. Preserve the logo aspect ratio.
   2. Never stretch the logo.
   3. Never crop the logo.
   4. Do not add shadows or 3D effects to the logo itself.
   5. Do not recolor the source logo with CSS filters.
   6. Use SVG icons for interface controls.
   7. Use the Toe Beans logo only for branding.
   ========================================================= */