/* =============================================================================
   BASE.CSS — Design Tokens, Typography, Reset
   HTTP Learning Portal
   ============================================================================= */

/* --- Google Fonts Import --------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* --- Design Tokens: Light Mode --------------------------------------------- */
:root {
  /* Background */
  --color-bg-primary:    #ffffff;
  --color-bg-secondary:  #f6f8fa;
  --color-bg-tertiary:   #edf2f7;
  --color-bg-surface:    #ffffff;
  --color-bg-elevated:   #ffffff;
  --color-bg-overlay:    rgba(0, 0, 0, 0.5);

  /* Text */
  --color-text-primary:  #0d1117;
  --color-text-secondary:#57606a;
  --color-text-muted:    #8c959f;
  --color-text-inverse:  #ffffff;

  /* Borders */
  --color-border-primary:   #d0d7de;
  --color-border-secondary: #e7ecf0;
  --color-border-focus:     #0969da;

  /* Brand / Accent */
  --color-accent-primary:   #0969da;
  --color-accent-hover:     #0550ae;
  --color-accent-subtle:    #ddf4ff;

  /* HTTP Method Colors */
  --color-method-get:     #0969da;
  --color-method-get-bg:  #ddf4ff;
  --color-method-post:    #1a7f37;
  --color-method-post-bg: #dafbe1;
  --color-method-put:     #9a6700;
  --color-method-put-bg:  #fff8c5;
  --color-method-patch:   #8250df;
  --color-method-patch-bg:#fbefff;
  --color-method-delete:  #cf222e;
  --color-method-delete-bg:#FFEBE9;
  --color-method-head:    #0969da;
  --color-method-head-bg: #ddf4ff;
  --color-method-options: #57606a;
  --color-method-options-bg:#f6f8fa;

  /* Status Code Category Colors */
  --color-status-1xx:    #0969da;
  --color-status-1xx-bg: #ddf4ff;
  --color-status-2xx:    #1a7f37;
  --color-status-2xx-bg: #dafbe1;
  --color-status-3xx:    #9a6700;
  --color-status-3xx-bg: #fff8c5;
  --color-status-4xx:    #cf222e;
  --color-status-4xx-bg: #FFEBE9;
  --color-status-5xx:    #8250df;
  --color-status-5xx-bg: #fbefff;

  /* Semantic Colors */
  --color-success:       #1a7f37;
  --color-success-bg:    #dafbe1;
  --color-warning:       #9a6700;
  --color-warning-bg:    #fff8c5;
  --color-danger:        #cf222e;
  --color-danger-bg:     #FFEBE9;
  --color-info:          #0969da;
  --color-info-bg:       #ddf4ff;

  /* Code Block */
  --color-code-bg:       #f6f8fa;
  --color-code-text:     #0d1117;
  --color-code-border:   #d0d7de;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.12);
  --shadow-xl:  0 20px 40px rgba(0,0,0,0.15);

  /* Spacing Scale */
  --space-1:  0.25rem;   /* 4px  */
  --space-2:  0.5rem;    /* 8px  */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */

  /* Typography Scale */
  --font-family-ui:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  --font-size-xs:   0.75rem;    /* 12px */
  --font-size-sm:   0.875rem;   /* 14px */
  --font-size-base: 1rem;       /* 16px */
  --font-size-lg:   1.125rem;   /* 18px */
  --font-size-xl:   1.25rem;    /* 20px */
  --font-size-2xl:  1.5rem;     /* 24px */
  --font-size-3xl:  1.875rem;   /* 30px */
  --font-size-4xl:  2.25rem;    /* 36px */
  --font-size-5xl:  3rem;       /* 48px */

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

  --line-height-tight:  1.25;
  --line-height-snug:   1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed:1.625;
  --line-height-loose:  2;

  /* Border Radius */
  --radius-sm:   0.25rem;   /* 4px  */
  --radius-md:   0.375rem;  /* 6px  */
  --radius-lg:   0.5rem;    /* 8px  */
  --radius-xl:   0.75rem;   /* 12px */
  --radius-2xl:  1rem;      /* 16px */
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   350ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --sidebar-width:        260px;
  --sidebar-width-collapsed: 0px;
  --content-max-width:    900px;
  --header-height:        60px;
  --z-index-dropdown:     100;
  --z-index-sticky:       200;
  --z-index-modal-backdrop: 300;
  --z-index-modal:        400;
  --z-index-tooltip:      500;
}

/* --- Design Tokens: Dark Mode --------------------------------------------- */
[data-theme="dark"] {
  --color-bg-primary:    #0d1117;
  --color-bg-secondary:  #161b22;
  --color-bg-tertiary:   #21262d;
  --color-bg-surface:    #161b22;
  --color-bg-elevated:   #21262d;
  --color-bg-overlay:    rgba(0, 0, 0, 0.7);

  --color-text-primary:  #e6edf3;
  --color-text-secondary:#8b949e;
  --color-text-muted:    #6e7681;
  --color-text-inverse:  #0d1117;

  --color-border-primary:   #30363d;
  --color-border-secondary: #21262d;
  --color-border-focus:     #58a6ff;

  --color-accent-primary:   #58a6ff;
  --color-accent-hover:     #79c0ff;
  --color-accent-subtle:    #0c2d6b;

  /* HTTP Method Colors - Dark */
  --color-method-get:     #58a6ff;
  --color-method-get-bg:  #0c2d6b;
  --color-method-post:    #3fb950;
  --color-method-post-bg: #0f2b15;
  --color-method-put:     #d29922;
  --color-method-put-bg:  #2f2008;
  --color-method-patch:   #bc8cff;
  --color-method-patch-bg:#271052;
  --color-method-delete:  #f85149;
  --color-method-delete-bg:#300d0d;
  --color-method-head:    #58a6ff;
  --color-method-head-bg: #0c2d6b;
  --color-method-options: #8b949e;
  --color-method-options-bg:#21262d;

  /* Status Code Category Colors - Dark */
  --color-status-1xx:    #58a6ff;
  --color-status-1xx-bg: #0c2d6b;
  --color-status-2xx:    #3fb950;
  --color-status-2xx-bg: #0f2b15;
  --color-status-3xx:    #d29922;
  --color-status-3xx-bg: #2f2008;
  --color-status-4xx:    #f85149;
  --color-status-4xx-bg: #300d0d;
  --color-status-5xx:    #bc8cff;
  --color-status-5xx-bg: #271052;

  --color-success:       #3fb950;
  --color-success-bg:    #0f2b15;
  --color-warning:       #d29922;
  --color-warning-bg:    #2f2008;
  --color-danger:        #f85149;
  --color-danger-bg:     #300d0d;
  --color-info:          #58a6ff;
  --color-info-bg:       #0c2d6b;

  --color-code-bg:       #0d1117;
  --color-code-text:     #e6edf3;
  --color-code-border:   #30363d;

  --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);
  --shadow-xl:  0 20px 40px rgba(0,0,0,0.7);
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  tab-size: 2;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--transition-normal), color var(--transition-normal);
  height: 100%;
  overflow: hidden;
}

/* --- Typography ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
}

h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }
h5 { font-size: var(--font-size-lg); }
h6 { font-size: var(--font-size-base); }

p {
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
}

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

a:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

code, pre {
  font-family: var(--font-family-mono);
  font-size: 0.875em;
}

strong { font-weight: var(--font-weight-semibold); }

ul, ol {
  padding-left: var(--space-6);
}

li {
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
}

img, svg {
  display: block;
  max-width: 100%;
}

button {
  font-family: var(--font-family-ui);
  cursor: pointer;
}

input, textarea, select {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-base);
}

/* --- Focus Visible --------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* --- Scrollbar ------------------------------------------------------------- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--color-border-primary);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

/* --- Selection ------------------------------------------------------------- */
::selection {
  background-color: var(--color-accent-subtle);
  color: var(--color-text-primary);
}

/* --- Utility: Screen Reader Only ------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* --- Utility: Text Truncate ------------------------------------------------ */
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}