:root{

/* -----------------------------------------
   COLORS
----------------------------------------- */

--color-primary: #6366f1;
--color-primary-hover: #4f46e5;

--color-bg: #f9fafb;
--color-surface: #ffffff;
--color-border: #e5e7eb;

--color-text: #111827;
--color-text-muted: #6b7280;

--color-success: #10b981;
--color-warning: #f59e0b;
--color-error: #ef4444;


/* -----------------------------------------
   TYPOGRAPHY
----------------------------------------- */

--font-sans: -apple-system, BlinkMacSystemFont,"Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

--fs-xs: 12px;
--fs-sm: 14px;
--fs-md: 16px;
--fs-lg: 20px;
--fs-xl: 24px;
--fs-2xl: 32px;

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

--line-height-base: 1.5;


/* -----------------------------------------
   SPACING SYSTEM
----------------------------------------- */

--space-nano: 6px;
--space-micro: 8px;
--space-default: 16px;
--space-section: 24px;
--space-page: 32px;
--space-large: 48px;


/* -----------------------------------------
   BORDER RADIUS
----------------------------------------- */

--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;


/* -----------------------------------------
   SHADOW / ELEVATION
----------------------------------------- */

--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
--shadow-md:
0 4px 6px rgba(0,0,0,0.05),
0 1px 3px rgba(0,0,0,0.1);
--shadow-lg:
0 10px 15px rgba(0,0,0,0.05),
0 4px 6px rgba(0,0,0,0.05);

}



/* =========================================
   GLOBAL RESET
========================================= */

*,
*::before,
*::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
}



/* =========================================
   BODY
========================================= */

body{

  font-family:var(--font-sans);
  font-size:var(--fs-md);
  line-height:var(--line-height-base);
  background:var(--color-bg);
  color:var(--color-text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;

}



/* =========================================
   HEADINGS
========================================= */

h1,h2,h3,h4,h5,h6{
  font-weight:600;
  line-height:1.2;
  margin-bottom:var(--space-default);
}

h1{ font-size:var(--fs-2xl); }
h2{ font-size:var(--fs-xl); }
h3{ font-size:var(--fs-lg); }



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


small{
  color:var(--color-text-muted);
}



/* =========================================
   LINKS
========================================= */

a{
  color:var(--color-primary);
  text-decoration:none;
}

a:hover{
  text-decoration:underline;
}



/* =========================================
   INPUTS
========================================= */

input,
textarea,
select{
  width:100%;
  padding:var(--space-micro) var(--space-default);
  font-family:var(--font-sans);
  font-size:var(--fs-md);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-surface);
  transition:
  border 0.2s ease,
  box-shadow 0.2s ease;
}

input:focus,
textarea:focus,
select:focus{
  outline:none;
  border-color:var(--color-primary);
  box-shadow:
  0 0 0 3px rgba(99,102,241,0.15);
}



/* =========================================
   BUTTONS
========================================= */

button{
  border:none;
  border-radius:var(--radius-md);
  padding:var(--space-micro) var(--space-default);
  font-size:var(--fs-sm);
  font-weight:500;
  cursor:pointer;
  background:var(--color-primary);
  color:white;
  transition:
  background 0.2s ease,
  transform 0.05s ease,
  box-shadow 0.2s ease;
}

button:hover{
  background:var(--color-primary-hover);
  box-shadow:var(--shadow-md);
}

button:active{
  transform:translateY(1px);
}



/* =========================================
   CARD SURFACE
========================================= */

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



/* =========================================
   CODE / JSON OUTPUT
========================================= */

pre{
  background:#0f172a;
  color:#e5e7eb;
  font-family:var(--font-mono);
  font-size:13px;
  padding:var(--space-section);
  border-radius:var(--radius-md);
  overflow-x:auto;
}



/* =========================================
   FORM GROUPS
========================================= */

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

label{
  display:block;
  font-size:var(--fs-sm);
  margin-bottom:var(--space-nano);
}



/* =========================================
   UTILITY CLASSES
========================================= */

.text-muted{
  color:var(--color-text-muted);
}

.mt-default{ margin-top:var(--space-default); }
.mt-section{ margin-top:var(--space-section); }
.mt-page{ margin-top:var(--space-page); }

.mb-default{ margin-bottom:var(--space-default); }
.mb-section{ margin-bottom:var(--space-section); }
.mb-page{ margin-bottom:var(--space-page); }