/**
 * Rivus Theme — AWS Console Dark Design System
 * Core design tokens: colors, typography, spacing, layout
 * v1.0.0
 */

/* ============================================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================================ */
:root {
    /* Background Colors */
    --aws-bg-primary:     #0f1419;
    --aws-bg-secondary:   #16191f;
    --aws-bg-tertiary:    #232f3e;
    --aws-bg-elevated:    #1b1f23;
    --aws-bg-input:       #1d2329;
    --aws-bg-hover:       #1f2937;

    /* Text Colors */
    --aws-text-primary:   #ffffff;
    --aws-text-secondary: #aab7b8;
    --aws-text-tertiary:  #687078;
    --aws-text-disabled:  #4a5568;
    --aws-text-link:      #4da6ff;

    /* Brand & Action Colors */
    --aws-orange:         #ff9900;
    --aws-orange-hover:   #ec7211;
    --aws-orange-dim:     #7d4e00;
    --aws-blue:           #0972d3;
    --aws-blue-hover:     #0562b8;
    --aws-blue-light:     #4da6ff;
    --aws-green:          #1d8102;
    --aws-green-light:    #29a32a;
    --aws-red:            #d13212;
    --aws-red-light:      #eb5f07;
    --aws-yellow:         #ff9900;
    --aws-purple:         #8b6fc5;

    /* Rivus Brand Accent */
    --rivus-accent:       #00bcd4;
    --rivus-accent-dim:   #006b7a;
    --rivus-accent-hover: #00acc1;

    /* Border Colors */
    --aws-border-primary: #414d5c;
    --aws-border-subtle:  #2a2f3a;
    --aws-border-focus:   #0972d3;

    /* Status Colors */
    --status-ok:          #1d8102;
    --status-ok-bg:       #0a2e0a;
    --status-ok-text:     #29a32a;
    --status-warn:        #7d4e00;
    --status-warn-bg:     #2d1f00;
    --status-warn-text:   #ff9900;
    --status-error:       #7b1d00;
    --status-error-bg:    #2d0f00;
    --status-error-text:  #eb5f07;
    --status-info:        #0c3a6b;
    --status-info-bg:     #061e3a;
    --status-info-text:   #4da6ff;
    --status-unknown:     #3a3f4b;
    --status-unknown-bg:  #1e2230;
    --status-unknown-text:#aab7b8;

    /* Typography */
    --font-primary:  'Amazon Ember', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --font-mono:     'SFMono-Regular', 'Consolas', 'Liberation Mono', Menlo, monospace;

    --text-xs:    11px;
    --text-sm:    12px;
    --text-base:  14px;
    --text-lg:    16px;
    --text-xl:    18px;
    --text-2xl:   20px;
    --text-3xl:   24px;
    --text-4xl:   32px;

    --font-regular:  400;
    --font-medium:   500;
    --font-semibold: 600;
    --font-bold:     700;

    /* Spacing (4px base) */
    --space-1:   4px;
    --space-2:   8px;
    --space-3:   12px;
    --space-4:   16px;
    --space-5:   20px;
    --space-6:   24px;
    --space-8:   32px;
    --space-10:  40px;
    --space-12:  48px;
    --space-16:  64px;

    /* Layout */
    --container-max: 1600px;
    --navbar-height: 48px;

    /* Shadows */
    --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
    --shadow-md:  0 4px 12px rgba(0,0,0,0.5);
    --shadow-lg:  0 8px 24px rgba(0,0,0,0.6);

    /* Transitions */
    --transition-fast:   100ms ease;
    --transition-normal: 200ms ease;
    --transition-slow:   300ms ease;

    /* Border Radius */
    --radius-sm:  2px;
    --radius-md:  4px;
    --radius-lg:  8px;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: var(--text-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--font-regular);
    line-height: 1.5;
    color: var(--aws-text-primary);
    background-color: var(--aws-bg-primary);
    min-height: 100vh;
}

a {
    color: var(--aws-text-link);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover { color: var(--aws-blue-light); text-decoration: underline; }

code, pre, .mono {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
}

/* ============================================================
   LAYOUT
   ============================================================ */
.aws-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-6) var(--space-6);
}

@media (max-width: 1199px) {
    .aws-container { padding: var(--space-5) var(--space-5); }
}
@media (max-width: 767px) {
    .aws-container { padding: var(--space-3) var(--space-3); }
}

.aws-section {
    margin-bottom: var(--space-8);
}

.aws-page-header {
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--aws-border-subtle);
}

.aws-page-title {
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    color: var(--aws-text-primary);
    line-height: 1.2;
    margin-bottom: var(--space-2);
}

.aws-page-description {
    font-size: var(--text-base);
    color: var(--aws-text-secondary);
}

.aws-section-title {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--aws-text-primary);
    margin-bottom: var(--space-4);
}

/* ============================================================
   GRID SYSTEM
   ============================================================ */
.aws-grid {
    display: grid;
    gap: var(--space-4);
}
.aws-grid-2 { grid-template-columns: repeat(2, 1fr); }
.aws-grid-3 { grid-template-columns: repeat(3, 1fr); }
.aws-grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1199px) {
    .aws-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .aws-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .aws-grid-2,
    .aws-grid-3,
    .aws-grid-4 { grid-template-columns: 1fr; }
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.mb-2  { margin-bottom: var(--space-2); }
.mb-3  { margin-bottom: var(--space-3); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.mt-2  { margin-top: var(--space-2); }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.ml-2  { margin-left: var(--space-2); }
.mr-2  { margin-right: var(--space-2); }

.text-xs       { font-size: var(--text-xs); }
.text-sm       { font-size: var(--text-sm); }
.text-base     { font-size: var(--text-base); }
.text-lg       { font-size: var(--text-lg); }
.text-secondary { color: var(--aws-text-secondary); }
.text-tertiary  { color: var(--aws-text-tertiary); }
.text-orange    { color: var(--aws-orange); }
.text-blue      { color: var(--aws-blue-light); }
.text-green     { color: var(--status-ok-text); }
.text-red       { color: var(--status-error-text); }
.text-yellow    { color: var(--status-warn-text); }
.text-accent    { color: var(--rivus-accent); }
.text-mono      { font-family: var(--font-mono); }
.text-bold      { font-weight: var(--font-bold); }
.text-semibold  { font-weight: var(--font-semibold); }

.flex           { display: flex; }
.flex-center    { display: flex; align-items: center; }
.flex-between   { display: flex; align-items: center; justify-content: space-between; }
.flex-end       { display: flex; align-items: center; justify-content: flex-end; }
.flex-wrap      { flex-wrap: wrap; }
.gap-2          { gap: var(--space-2); }
.gap-3          { gap: var(--space-3); }
.gap-4          { gap: var(--space-4); }

.w-full         { width: 100%; }
.hidden         { display: none !important; }

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar       { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--aws-bg-secondary); }
::-webkit-scrollbar-thumb { background: var(--aws-border-primary); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--aws-text-tertiary); }