/* =========================================================
   IAM Design System v1.0.0
   Shared design tokens and opt-in utility classes.
   These rules are intentionally namespaced and safe by default.
   ========================================================= */

:root {
    /* Brand */
    --iam-color-primary: #b98f6e;
    --iam-color-primary-hover: #a87f60;
    --iam-color-accent: #8fae1b;
    --iam-color-heading: #cc9955;
    --iam-color-dark: #2f2a26;
    --iam-color-text: #5f5a55;
    --iam-color-muted: #746d66;
    --iam-color-danger: #a93226;
    --iam-color-danger-hover: #922b21;
    --iam-color-success: #6c7a45;

    /* Surfaces */
    --iam-color-surface: #ffffff;
    --iam-color-surface-soft: #fffdfb;
    --iam-color-surface-warm: #faf7f3;
    --iam-color-surface-muted: #f7f3ef;
    --iam-color-border: #e8ddd2;
    --iam-color-border-strong: #dccfc2;

    /* Typography */
    --iam-font-family-heading: "Archivo", sans-serif;
    --iam-font-family-body: inherit;
    --iam-font-size-xs: 12px;
    --iam-font-size-sm: 13px;
    --iam-font-size-md: 14px;
    --iam-font-size-lg: 16px;
    --iam-font-size-xl: 18px;
    --iam-font-size-2xl: 24px;
    --iam-font-size-3xl: 32px;
    --iam-line-height-tight: 1.25;
    --iam-line-height-body: 1.6;

    /* Spacing */
    --iam-space-1: 4px;
    --iam-space-2: 8px;
    --iam-space-3: 12px;
    --iam-space-4: 16px;
    --iam-space-5: 20px;
    --iam-space-6: 24px;
    --iam-space-8: 32px;
    --iam-space-10: 40px;

    /* Shape */
    --iam-radius-sm: 6px;
    --iam-radius-md: 8px;
    --iam-radius-lg: 12px;
    --iam-radius-xl: 14px;
    --iam-radius-pill: 999px;

    /* Shadows */
    --iam-shadow-sm: 0 4px 10px rgba(0, 0, 0, 0.04);
    --iam-shadow-md: 0 8px 20px rgba(0, 0, 0, 0.04);
    --iam-shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.08);

    /* Motion */
    --iam-transition-fast: 0.2s ease;
    --iam-transition-normal: 0.25s ease;

    /* Layout */
    --iam-content-width: 1200px;
}

/* =========================================================
   Opt-in shared components
   Use only by adding these IAM classes to plugin markup.
   ========================================================= */

.iam-ds-card {
    box-sizing: border-box;
    padding: var(--iam-space-6);
    background: var(--iam-color-surface-soft);
    border: 1px solid var(--iam-color-border);
    border-radius: var(--iam-radius-lg);
    box-shadow: var(--iam-shadow-sm);
}

.iam-ds-card--plain {
    background: var(--iam-color-surface);
    box-shadow: none;
}

.iam-ds-title {
    margin: 0 0 var(--iam-space-3);
    color: var(--iam-color-heading);
    font-family: var(--iam-font-family-heading);
    font-size: var(--iam-font-size-2xl);
    font-weight: 700;
    line-height: var(--iam-line-height-tight);
}

.iam-ds-text {
    color: var(--iam-color-text);
    font-family: var(--iam-font-family-body);
    line-height: var(--iam-line-height-body);
}

.iam-ds-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 16px;
    border: 1px solid var(--iam-color-primary);
    border-radius: var(--iam-radius-md);
    background: var(--iam-color-primary);
    color: #ffffff !important;
    font-size: var(--iam-font-size-md);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    transition: background var(--iam-transition-fast), border-color var(--iam-transition-fast), transform var(--iam-transition-fast);
}

.iam-ds-button:hover,
.iam-ds-button:focus {
    background: var(--iam-color-primary-hover);
    border-color: var(--iam-color-primary-hover);
    color: #ffffff !important;
}

.iam-ds-button--secondary {
    background: var(--iam-color-surface);
    border-color: var(--iam-color-border-strong);
    color: var(--iam-color-dark) !important;
}

.iam-ds-button--secondary:hover,
.iam-ds-button--secondary:focus {
    background: var(--iam-color-surface-warm);
    border-color: var(--iam-color-primary);
    color: var(--iam-color-dark) !important;
}

.iam-ds-button--danger {
    background: var(--iam-color-danger);
    border-color: var(--iam-color-danger);
}

.iam-ds-button--danger:hover,
.iam-ds-button--danger:focus {
    background: var(--iam-color-danger-hover);
    border-color: var(--iam-color-danger-hover);
}

.iam-ds-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--iam-space-1);
    padding: 4px 10px;
    background: var(--iam-color-surface-muted);
    border: 1px solid var(--iam-color-border);
    border-radius: var(--iam-radius-pill);
    color: var(--iam-color-muted);
    font-size: var(--iam-font-size-xs);
    font-weight: 600;
    line-height: 1.2;
}

.iam-ds-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--iam-space-4);
}

.iam-ds-stack {
    display: flex;
    flex-direction: column;
    gap: var(--iam-space-4);
}

.iam-ds-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--iam-space-3);
}

.iam-ds-field,
.iam-ds-field input,
.iam-ds-field select,
.iam-ds-field textarea {
    box-sizing: border-box;
}

.iam-ds-field input,
.iam-ds-field select,
.iam-ds-field textarea {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    background: var(--iam-color-surface);
    border: 1px solid var(--iam-color-border-strong);
    border-radius: var(--iam-radius-md);
    color: var(--iam-color-dark);
    font-size: var(--iam-font-size-md);
    box-shadow: none;
}

.iam-ds-field input:focus,
.iam-ds-field select:focus,
.iam-ds-field textarea:focus {
    border-color: var(--iam-color-primary);
    outline: none;
    box-shadow: 0 0 0 1px var(--iam-color-primary);
}

@media (max-width: 1024px) {
    .iam-ds-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .iam-ds-card {
        padding: var(--iam-space-4);
    }

    .iam-ds-grid {
        grid-template-columns: 1fr;
    }

    .iam-ds-title {
        font-size: 22px;
    }
}