/**
 * Brownie documentation theme
 *
 * This theme adds some flair to base Brownie for the documentation site,
 * including more 3D effects. You can use this as a reference for custom
 * themes for Brownie.
 */

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

@layer theme {

  :root {
    /* ==========================================================================
    SEMANTIC COLORS
  ========================================================================== */

    --color-accent: light-dark(#6a8a6a, #7a9f7a);
    --color-neutral: light-dark(#eae8e4, #2a2a26);
    --color-background-body: light-dark(#f5f5f4, #121210);
    --color-background-card: light-dark(#ffffff, #1a1a18);
    --color-overlay-hover: light-dark(#f4f7f4, #1a2a1a);
    --color-background-muted: light-dark(#f0efed, #232320);
    --color-overlay: light-dark(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7));

    /* ==========================================================================
    TEXT COLORS
  ========================================================================== */

    --color-text-primary: light-dark(#393a34, #dbd7caee);
    --color-text-secondary: light-dark(#5c5c56, #a8a49a);
    --color-text-accent: light-dark(#4a6a4a, #9fc09f);
    --color-text-disabled: light-dark(#a8a8a0, #5a5850);
    --color-on-accent: light-dark(#ffffff, #1a1a18);

    /* ==========================================================================
    BORDER COLORS
  ========================================================================== */

    --color-border: light-dark(#e5e5e0, #3a3a35);
    --color-border-muted: light-dark(#eeede8, #2a2a26);
    --color-border-emphasized: light-dark(#d4d4cf, #4a4a44);

    /* ==========================================================================
    STATUS COLORS
  ========================================================================== */

    --color-success-bg: light-dark(#e2efe2, #1e2e1e);
    --color-success-text: light-dark(#2d5a2d, #a3d4a3);
    --color-success-dot: light-dark(#6a9a6a, #5a9a5a);

    --color-warning-bg: light-dark(#f5ead8, #2e2818);
    --color-warning-text: light-dark(#8a6020, #d4c08a);
    --color-warning-dot: light-dark(#c9a040, #a08030);

    --color-error-bg: light-dark(#f5e0de, #2e1e1c);
    --color-error-text: light-dark(#8a3a35, #d4a09c);
    --color-error-dot: light-dark(#c97a76, #a05a54);

    --color-info-bg: light-dark(#e0eaf5, #1c2430);
    --color-info-text: light-dark(#2a4a70, #9cb8d4);
    --color-info-dot: light-dark(#6a9ac4, #5a8aba);

    /* ==========================================================================
    TYPOGRAPHY
  ========================================================================== */

    --font-family-body: 'Lato', system-ui, sans-serif;
    --font-family-heading: 'Lato', system-ui, sans-serif;
    --font-family-code: 'Monaco', 'Consolas', monospace;

    /* ==========================================================================
    ELEVATION
  ========================================================================== */

    --shadow-low: 0 1px 3px light-dark(rgba(0, 0, 0, 0.04), transparent);

    /* ==========================================================================
    RADIUS
  ========================================================================== */

    --radius-full: 9999px;
    --radius-container: 0.75rem;
    /* 12px */
    --radius-element: 0.625rem;
    /* 10px */

    /* ==========================================================================
    SPACING (base unit: 4px)
  ========================================================================== */

    --spacing-0: 0;
    --spacing-0-5: 0.125rem;
    /* 2px */
    --spacing-1: 0.25rem;
    /* 4px */
    --spacing-1-5: 0.375rem;
    /* 6px */
    --spacing-2: 0.5rem;
    /* 8px */
    --spacing-2-5: 0.625rem;
    /* 10px */
    --spacing-3: 0.75rem;
    /* 12px */
    --spacing-4: 1rem;
    /* 16px */
    --spacing-5: 1.25rem;
    /* 20px */
    --spacing-6: 1.5rem;
    /* 24px */
    --spacing-8: 2rem;
    /* 32px */
    --spacing-9: 2.25rem;
        /* 36px */
    --spacing-10: 2.5rem;
    /* 40px */
    --spacing-12: 3rem;
    /* 48px */

    /* ==========================================================================
    TRANSITIONS
  ========================================================================== */

    --duration-fast: 100ms ease;
    --duration-medium: 150ms ease;
    --duration-slow: 200ms ease;
  }

  /**
 * ---------------------
 * Customizing Components
 * ---------------------
 * Override component styles using ::part() selectors.
 * Each component exposes named parts you can target.
 *
 * Example - custom button styling:
 *
 *   brow-button::part(base) {
 *     border-radius: var(--radius-full);
 *     text-transform: uppercase;
 *   }
 *
 *   brow-button[variant="primary"]::part(base) {
 *     background: linear-gradient(135deg, #6a8a6a, #4a6a4a);
 *   }
 */
brow-button::part(base) {
  transition: box-shadow 0ms;
  font-weight: 500;
}

brow-button::part(base):not(:disabled),
brow-button[variant="secondary"]::part(base):not(:disabled) {
  box-shadow: inset 0 3px 0 color-mix(in srgb, var(--color-neutral), white 15%),
    inset 0 -3px 0 color-mix(in srgb, var(--color-neutral), black 15%);
}
brow-button:active::part(base):not(:disabled),
brow-button[variant="secondary"]:active::part(base):not(:disabled) {
  box-shadow: inset 0 3px 0 color-mix(in srgb, var(--color-neutral), black 15%);
  transform: translateY(1px);
}

brow-button[variant="primary"]::part(base):not(:disabled) {
  box-shadow: inset 0 3px 0 color-mix(in srgb, var(--color-accent), white 15%),
    inset 0 -3px 0 color-mix(in srgb, var(--color-accent), black 15%);
}
brow-button[variant="primary"]:active::part(base):not(:disabled) {
  box-shadow: inset 0 3px 0 color-mix(in srgb, var(--color-accent), black 15%);
}

brow-button[variant="ghost"]::part(base):not(:disabled) {
  box-shadow: none;
}
brow-button[variant="ghost"]:active::part(base):not(:disabled) {
  box-shadow: inset 0 3px 0 color-mix(in srgb, var(--color-neutral), transparent 10%);
}

brow-select::part(trigger) {
  box-shadow: inset 0 2px 0 color-mix(in srgb, var(--color-neutral), transparent 25%);
}
}