/* Shofy Platform Styles — no build step required */

/* ── THEME CSS VARIABLES (overridden by /theme/styles.css) ── */
:root {
    --color-primary:        #4f46e5;
    --color-primary-dark:   #3730a3;
    --color-secondary:      #06b6d4;
    --color-accent:         #f59e0b;
    --color-success:        #10b981;
    --color-danger:         #ef4444;
    --color-bg:             #ffffff;
    --color-text:           #1e293b;
    --color-text-muted:     #64748b;
    --color-border:         #e2e8f0;
    --color-header-bg:      #ffffff;
    --color-header-text:    #1e293b;
    --color-footer-bg:      #0f172a;
    --color-footer-text:    #e2e8f0;
    --font-heading:         'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
    --font-body:            'DM Sans', ui-sans-serif, system-ui, sans-serif;
    --font-size-base:       16px;
    --font-size-h1:         3rem;
    --font-size-h2:         2.25rem;
    --font-weight-heading:  700;
    --line-height:          1.6;
    --radius:               12px;
    --container-width:      1280px;
    --header-height:        72px;
}

/* ── BODY ── */
body {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height);
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5,h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
}

h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }

/* ── SITE LAYOUT ── */
.container { max-width: var(--container-width); margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; }
.site-header { background: var(--color-header-bg); color: var(--color-header-text); height: var(--header-height); }
.site-footer { background: var(--color-footer-bg); color: var(--color-footer-text); }

/* ── CARD ── */
.card {
    background: #fff;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.dark .card { background: #1e293b; border-color: #334155; }

/* ── BUTTONS ── */
.btn-primary {
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--color-primary); color: #fff;
    font-weight: 600; padding: .5rem 1rem;
    border-radius: calc(var(--radius) - 2px);
    border: none; cursor: pointer; text-decoration: none;
    transition: background .15s, transform .1s;
}
.btn-primary:hover { background: var(--color-primary-dark); color: #fff; }

.btn-secondary {
    display: inline-flex; align-items: center; gap: .5rem;
    background: transparent; color: #374151;
    font-weight: 500; padding: .5rem 1rem;
    border-radius: calc(var(--radius) - 2px);
    border: 1px solid var(--color-border); cursor: pointer;
    text-decoration: none; transition: background .15s;
}
.btn-secondary:hover { background: #f8fafc; }

.btn-danger {
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--color-danger); color: #fff;
    font-weight: 500; padding: .5rem 1rem;
    border-radius: calc(var(--radius) - 2px); border: none; cursor: pointer;
    text-decoration: none; transition: background .15s;
}
.btn-danger:hover { background: #dc2626; }

/* ── FORM INPUTS ── */
.input {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) - 2px);
    padding: .625rem 1rem;
    font-size: .875rem;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    background: #fff;
    color: var(--color-text);
}
.input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(79,70,229,.12); }
.dark .input { background: #1e293b; border-color: #334155; color: #e2e8f0; }

/* ── BADGES ── */
.badge-success { display: inline-flex; align-items: center; padding: .125rem .625rem; border-radius: 9999px; font-size: .75rem; font-weight: 600; background: #d1fae5; color: #065f46; }
.badge-warning { display: inline-flex; align-items: center; padding: .125rem .625rem; border-radius: 9999px; font-size: .75rem; font-weight: 600; background: #fef3c7; color: #92400e; }
.badge-danger  { display: inline-flex; align-items: center; padding: .125rem .625rem; border-radius: 9999px; font-size: .75rem; font-weight: 600; background: #fee2e2; color: #991b1b; }
.badge-info    { display: inline-flex; align-items: center; padding: .125rem .625rem; border-radius: 9999px; font-size: .75rem; font-weight: 600; background: #dbeafe; color: #1e40af; }

/* ── DARK MODE ── */
.dark body  { background: #0f172a; color: #e2e8f0; }
.dark .btn-secondary { color: #cbd5e1; border-color: #334155; }
.dark .btn-secondary:hover { background: #1e293b; }