/**
 * Shadows - Foundation
 * Box shadow scale
 * @generated 2025-12-12T07:31:15.567325
 */
export default {
  title: 'Foundation/Effects/Shadows',
  tags: ['autodocs'],
  parameters: {
    docs: {
      description: {
        component: 'Box shadow tokens for elevation and depth.'
      }
    }
  }
};

const styles = `
  .shadows-grid { display: flex; flex-wrap: wrap; gap: 2rem; padding: 2rem; background: #f9fafb; }
  .shadow-card { text-align: center; }
  .box { width: 120px; height: 80px; background: white; border-radius: 8px; margin-bottom: 0.5rem; }
  .name { font-size: 0.75rem; font-weight: 500; }
  .value { font-size: 0.6rem; color: #6b7280; font-family: monospace; max-width: 120px; word-wrap: break-word; }
`;

export const AllShadows = {
  render: () => `
    <style>${styles}</style>
    <div class="shadows-grid">
      
      <div class="shadow-card">
        <div class="box" style="box-shadow: none;"></div>
        <div class="name">none</div>
        <div class="value">none</div>
      </div>
      <div class="shadow-card">
        <div class="box" style="box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);"></div>
        <div class="name">xs</div>
        <div class="value">0 1px 2px 0 rgba(0, 0, 0, 0.05)</div>
      </div>
      <div class="shadow-card">
        <div class="box" style="box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);"></div>
        <div class="name">sm</div>
        <div class="value">0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgb...</div>
      </div>
      <div class="shadow-card">
        <div class="box" style="box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);"></div>
        <div class="name">default</div>
        <div class="value">0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgb...</div>
      </div>
      <div class="shadow-card">
        <div class="box" style="box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);"></div>
        <div class="name">md</div>
        <div class="value">0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px ...</div>
      </div>
      <div class="shadow-card">
        <div class="box" style="box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);"></div>
        <div class="name">lg</div>
        <div class="value">0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4p...</div>
      </div>
      <div class="shadow-card">
        <div class="box" style="box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);"></div>
        <div class="name">xl</div>
        <div class="value">0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6...</div>
      </div>
      <div class="shadow-card">
        <div class="box" style="box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);"></div>
        <div class="name">2xl</div>
        <div class="value">0 25px 50px -12px rgba(0, 0, 0, 0.25)</div>
      </div>
      <div class="shadow-card">
        <div class="box" style="box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);"></div>
        <div class="name">inner</div>
        <div class="value">inset 0 2px 4px 0 rgba(0, 0, 0, 0.05)</div>
      </div>
      <div class="shadow-card">
        <div class="box" style="box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);"></div>
        <div class="name">shadow-xs</div>
        <div class="value">0 1px 2px 0 rgba(0, 0, 0, 0.05)</div>
      </div>
      <div class="shadow-card">
        <div class="box" style="box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);"></div>
        <div class="name">shadow-sm</div>
        <div class="value">0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgb...</div>
      </div>
      <div class="shadow-card">
        <div class="box" style="box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);"></div>
        <div class="name">shadow-md</div>
        <div class="value">0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px ...</div>
      </div>
      <div class="shadow-card">
        <div class="box" style="box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);"></div>
        <div class="name">shadow-lg</div>
        <div class="value">0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4p...</div>
      </div>
      <div class="shadow-card">
        <div class="box" style="box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);"></div>
        <div class="name">shadow-xl</div>
        <div class="value">0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6...</div>
      </div>
      <div class="shadow-card">
        <div class="box" style="box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);"></div>
        <div class="name">shadow-2xl</div>
        <div class="value">0 25px 50px -12px rgba(0, 0, 0, 0.25)</div>
      </div>
    </div>
  `
};