/**
 * saas_core_ui — core.css
 * Design Tokens · Layout · Typography · Base Reset
 * Version: 1.0.0
 */

/* ================================================================
   DESIGN TOKENS — CSS Custom Properties
================================================================ */
:root {
    /* Brand Colors */
    --sc-primary:        #7c3aed;
    --sc-primary-dark:   #6d28d9;
    --sc-primary-light:  #a855f7;
    --sc-primary-xlight: #ede9fe;
    --sc-accent:         #0ea5e9;

    /* Semantic Colors */
    --sc-success:        #10b981;
    --sc-success-light:  #ecfdf5;
    --sc-success-border: #a7f3d0;
    --sc-success-dark:   #059669;

    --sc-warning:        #f59e0b;
    --sc-warning-light:  #fffbeb;
    --sc-warning-border: #fde68a;
    --sc-warning-dark:   #d97706;

    --sc-danger:         #ef4444;
    --sc-danger-light:   #fef2f2;
    --sc-danger-border:  #fca5a5;
    --sc-danger-dark:    #dc2626;

    --sc-info:           #3b82f6;
    --sc-info-light:     #eff6ff;
    --sc-info-border:    #93c5fd;

    --sc-gold:           #f59e0b;
    --sc-gold-light:     #fef3c7;

    /* Neutrals */
    --sc-text:           #1e293b;
    --sc-text-muted:     #94a3b8;
    --sc-text-light:     #64748b;
    --sc-border:         #e2e8f0;
    --sc-bg:             #f8fafc;
    --sc-card:           #ffffff;

    /* Shadows */
    --sc-shadow-sm:  0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04);
    --sc-shadow-md:  0 4px 16px rgba(0,0,0,.08);
    --sc-shadow-lg:  0 8px 30px rgba(0,0,0,.12);
    --sc-shadow-xl:  0 20px 60px rgba(0,0,0,.18);

    /* Radii */
    --sc-radius-xs:  6px;
    --sc-radius-sm:  8px;
    --sc-radius:     12px;
    --sc-radius-md:  14px;
    --sc-radius-lg:  16px;
    --sc-radius-xl:  20px;
    --sc-radius-full: 9999px;

    /* Spacing */
    --sc-spacing-xs: 4px;
    --sc-spacing-sm: 8px;
    --sc-spacing:    16px;
    --sc-spacing-md: 20px;
    --sc-spacing-lg: 24px;
    --sc-spacing-xl: 32px;

    /* Typography */
    --sc-font:         'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
    --sc-font-mono:    'SFMono-Regular', Consolas, monospace;
    --sc-text-xs:      10px;
    --sc-text-sm:      12px;
    --sc-text-base:    13px;
    --sc-text-md:      14px;
    --sc-text-lg:      16px;
    --sc-text-xl:      18px;
    --sc-text-2xl:     22px;
    --sc-text-3xl:     26px;

    /* Transitions */
    --sc-transition:     all .2s ease;
    --sc-transition-md:  all .3s cubic-bezier(.25,.8,.25,1);
}

/* ================================================================
   BASE RESET (scoped to sc-wrap)
================================================================ */
.sc-wrap *,
.sc-wrap *::before,
.sc-wrap *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.sc-wrap {
    font-family: var(--sc-font);
    color: var(--sc-text);
    font-size: var(--sc-text-base);
    line-height: 1.5;
}

/* ================================================================
   LAYOUT — Container, Grid, Flex
================================================================ */
.sc-container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--sc-spacing);
    padding-right: var(--sc-spacing);
}

.sc-grid {
    display: grid;
    gap: var(--sc-spacing);
}

.sc-grid-2 { grid-template-columns: repeat(2, 1fr); }
.sc-grid-3 { grid-template-columns: repeat(3, 1fr); }
.sc-grid-4 { grid-template-columns: repeat(4, 1fr); }
.sc-grid-auto { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.sc-flex          { display: flex; gap: var(--sc-spacing-sm); }
.sc-flex-center   { display: flex; align-items: center; gap: var(--sc-spacing-sm); }
.sc-flex-between  { display: flex; align-items: center; justify-content: space-between; gap: var(--sc-spacing-sm); }
.sc-flex-wrap     { display: flex; flex-wrap: wrap; gap: var(--sc-spacing-sm); }
.sc-flex-col      { display: flex; flex-direction: column; gap: var(--sc-spacing-sm); }

/* Responsive Grid Breakpoints */
@media (max-width: 900px) {
    .sc-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .sc-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .sc-grid-4,
    .sc-grid-3,
    .sc-grid-2 { grid-template-columns: 1fr; }
    .sc-container { padding-left: var(--sc-spacing); padding-right: var(--sc-spacing); }
}

/* Spacing utilities */
.sc-mb-0  { margin-bottom: 0 !important; }
.sc-mb-sm { margin-bottom: var(--sc-spacing-sm) !important; }
.sc-mb    { margin-bottom: var(--sc-spacing) !important; }
.sc-mb-md { margin-bottom: var(--sc-spacing-md) !important; }
.sc-mb-lg { margin-bottom: var(--sc-spacing-lg) !important; }

/* ================================================================
   TYPOGRAPHY
================================================================ */
.sc-title {
    font-size: var(--sc-text-2xl);
    font-weight: 800;
    color: var(--sc-text);
    letter-spacing: -.3px;
    line-height: 1.2;
}

.sc-subtitle {
    font-size: var(--sc-text-md);
    color: var(--sc-text-muted);
    font-weight: 500;
    line-height: 1.5;
}

.sc-label {
    display: block;
    font-size: var(--sc-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--sc-text-muted);
    margin-bottom: var(--sc-spacing-xs);
}

.sc-text-muted  { color: var(--sc-text-muted); }
.sc-text-primary { color: var(--sc-primary); }
.sc-text-success { color: var(--sc-success-dark); }
.sc-text-warning { color: var(--sc-warning-dark); }
.sc-text-danger  { color: var(--sc-danger-dark); }
.sc-text-sm      { font-size: var(--sc-text-sm); }
.sc-text-xs      { font-size: var(--sc-text-xs); }
.sc-fw-bold      { font-weight: 700; }
.sc-fw-black     { font-weight: 900; }
.sc-text-center  { text-align: center; }
.sc-text-upper   { text-transform: uppercase; letter-spacing: .5px; }

/* Section Divider */
.sc-divider {
    border: none;
    border-top: 1px solid var(--sc-border);
    margin: var(--sc-spacing-md) 0;
}

.sc-divider-dashed {
    border-top-style: dashed;
}